<%@ page contentType="text/html; charset=GB2312" language="java"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>調整上下左右順序實例</title>
<link rel="stylesheet" href="style/style_<%=strCssType%>.css"
type="text/css">
<script language="JavaScript">
function chooseItems(source, target)
{
var choiceOptions = source.options;
var selectedOptions = target.options;
for (i = 0; i < (choiceOptions.length); i++)
{
var temp = choiceOptions.item(i);
if (temp.selected == true)
{
var oOption = document.createElement("OPTION");
selectedOptions[selectedOptions.length] = new Option(temp.text, temp.value);
}
}
for (j = (choiceOptions.length-1); j >= 0; j--)
{
var temp = choiceOptions.item(j);
if (temp.selected == true)
{
choiceOptions[j] = null;
}
}
}
function adjustUp()
{
var itemOptions = form1.selectcolumns.options;
var selectedOption;
var count = 0;
var index;
for ( i = 0; i < itemOptions.length ; i++)
{
var temp = itemOptions.item(i);
if (temp.selected == true)
{
count++;
if (count > 1)
{
alert("只能選擇一個列調整順序！");
return;
} else if(count == 1) {
index = i;
}
}
}
if (count == 0)
{
alert("請選擇要調整順序的列！");
return;
}
if (index == 0)
return;
selectedOption = itemOptions[index];
var lastOption = itemOptions[index-1];
var temp = new Option(selectedOption.text, selectedOption.value);
selectedOption.text = lastOption.text;
selectedOption.value = lastOption.value;
selectedOption.selected = false;
lastOption.text = temp.text;
lastOption.value = temp.value;
lastOption.selected = true;
}
function adjustDown()
{
var itemOptions = form1.selectcolumns.options;
var selectedOption;
var count = 0;
var index;
for ( i = 0; i < itemOptions.length ; i++)
{
var temp = itemOptions[i];
if (temp.selected == true)
{
count++;
if (count > 1)
{
alert("只能選擇一個列調整順序！");
return;
} else if(count == 1) {
index = i;
}
}
}
if (count == 0)
{
alert("請選擇要調整順序的列！");
return;
}
if (index == itemOptions.length-1)
return;
selectedOption = itemOptions[index];
var nextOption = itemOptions[index+1];
var temp = new Option(selectedOption.text, selectedOption.value);
selectedOption.text = nextOption.text;
selectedOption.value = nextOption.value;
selectedOption.selected = false;
nextOption.text = temp.text;
nextOption.value = temp.value;
nextOption.selected = true;
}
function checkForm(form1)
{
var columnsOptions = form1.selectcolumns.options;
if (columnsOptions.length == 0) {
alert("請選擇要顯示的列!");
return false;
}
for (i = 0; i < columnsOptions.length; i++)
{
columnsOptions[i].selected = true;
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="basylistForward.do"
onSubmit="return checkForm(form1)">
<center>
<table height="5" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="700">
<tr>
<td width="40%" align="center">
<select name="choices" size="25" style="width: 100%"
multiple="multiple">
<option value="userName">
用戶名
</option>
<option value="password">
密碼
</option>
<option value="Email">
郵箱
</option>
<option value="address">
住址
</option>
<option value="telephone">
聯系方式
</option>
<OPTION value="birthday">
生日
</OPTION>
<OPTION value="firstName">
名
</OPTION>
<OPTION value="lastName">
姓
</OPTION>
<option value="age">
年齡
</option>
<option value="company">
工作單位
</option>
<option value="workTime">
參加工作日期
</option>
</select>
</td>
<td width="10%" align="center">
<input name="but_r" type="button" class="buttonr" value="添加"
onClick="chooseItems(form1.choices, form1.selectcolumns)">
<table height="5" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<input name="but_l" type="button" class="buttonl" value="刪除"
onClick="chooseItems(form1.selectcolumns, form1.choices)">
</td>
<td width="40%" align="center">
<select name="selectcolumns" size="25" style="width: 100%"
multiple="multiple">
<option value="BasySex_n">
性別
</option>
<option value="BasyAge">
年齡
</option>
<option value="BasyRdate">
入院日期
</option>
<option value="BasyCDate">
出院日期
</option>
<option value="BasyCykbN">
出院科別
</option>
<option value="BasyCyMzd">
主要診斷名稱
</option>
<option value="BasyCyMcyqk_n">
出院情況
</option>
<option value="BasyZyfySum">
住院費用
</option>
<option value="BasyJzh">
備用號
</option>
</select>
</td>
<td width="10%" align="center">
<input name="but_u" type="button" value="向上"
onClick="adjustUp()">
<table height="5" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<input name="but_d" type="button" value="向下"
onClick="adjustDown()">
</td>
</tr>
<tr>
<TD align="center">
</TD>
<TD align="center">
</TD>
<TD align="center">
<INPUT type="submit" class="button" value="顯示(V)" accesskey="v">
<a href="javascript:history.go(-1)"><font color="red">返回</font>
</a>
</TD>
<TD align="center">
</TD>
</tr>
</table>
</center>
</form>
</body>
</html>