左右选择小组件
2014-02-24 12:13
330 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>节点属性</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function moveOver(){
var boxLength = document.choiceForm.backNode.length;
var selectedItem = document.choiceForm.LeadNode.selectedIndex;
if(boxLength==-1||selectedItem==-1){
return;
}
var selectedText = document.choiceForm.LeadNode.options[selectedItem].text;
var selectedValue = document.choiceForm.LeadNode.options[selectedItem].value;
var i;
var isNew = true;
if(boxLength != 0){
for(i = 0; i < boxLength; i++){
thisitem = document.choiceForm.backNode.options[i].value;
thisitemText = document.choiceForm.backNode.options[i].text;
if(thisitem == selectedValue){
isNew = false;
alert(thisitemText+"已被选择！");
break;
}
}
}
if(isNew){
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.backNode.options[boxLength] = newoption;
}
document.choiceForm.LeadNode.selectedIndex=-1;
}
function moveOverRedo(){
var boxLength = document.choiceForm.redoNode.length;
var selectedItem = document.choiceForm.redoLeadNode.selectedIndex;
if(boxLength==-1||selectedItem==-1){
return;
}
var selectedText = document.choiceForm.redoLeadNode.options[selectedItem].text;
var selectedValue = document.choiceForm.redoLeadNode.options[selectedItem].value;
var i;
var isNew = true;
if(boxLength != 0){
for(i = 0; i < boxLength; i++){
thisitem = document.choiceForm.redoNode.options[i].value;
thisitemText = document.choiceForm.redoNode.options[i].text;
if(thisitem == selectedValue){
isNew = false;
alert(thisitemText+"已被选择！");
break;
}
}
}
if(isNew){
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.redoNode.options[boxLength] = newoption;
}
document.choiceForm.redoLeadNode.selectedIndex=-1;
}
//lbox:前置节点,rbox:回退节点
function moveToRight(lbox,rbox){
var lboxLength=lbox.length;//左边列表长度
if(lboxLength==0){
alert("没有数据可以选择！");
return false;
}
var boxLength = rbox.length;//右边列表长度
var j;
var isNew=false;
if(boxLength!=0){ //右边框不为空时
for(var i=0; i<lbox.length; i++){ //遍历左边框内数据
if(lbox.options[i].selected){
var no = new Option(); //新选项
no.value = lbox.options[i].value;
no.text = lbox.options[i].text;
for (j = 0; j < boxLength; j++){ //遍历右边框内数据
thisitem = rbox.options[j].value;
if (thisitem == no.value){ //如果值存在
isNew=false;
break;
}else{
isNew=true;
}
}
if(isNew){ //如果可以添加
rbox.options[boxLength++] = no;
}
}
}
}else{ //右边框为空时
for(var i=0; i<lbox.length; i++){ //遍历左边框内数据
if(lbox.options[i].selected){
var no = new Option(); //新选项
no.value = lbox.options[i].value;
no.text = lbox.options[i].text;
rbox.options[boxLength++] = no;
}
}
}
}
//删除一个或多个
function removeMe(){
var boxLength = document.choiceForm.backNode.length;
arrSelected = new Array();
var count = 0;
for(i = 0; i < boxLength; i++){
if(document.choiceForm.backNode.options[i].selected){
arrSelected[count] = document.choiceForm.backNode.options[i].value;
}
count++;
}
var x;
for(i = 0; i < boxLength; i++){
for(x = 0; x < arrSelected.length; x++){
if(document.choiceForm.backNode.options[i].value == arrSelected[x]){
document.choiceForm.backNode.options[i] = null;
}
}
boxLength = document.choiceForm.backNode.length;
}
}
function removeMeRedo(){
var boxLength = document.choiceForm.redoNode.length;
arrSelected = new Array();
var count = 0;
for(i = 0; i < boxLength; i++){
if(document.choiceForm.redoNode.options[i].selected){
arrSelected[count] = document.choiceForm.redoNode.options[i].value;
}
count++;
}
var x;
for(i = 0; i < boxLength; i++){
for(x = 0; x < arrSelected.length; x++){
if(document.choiceForm.redoNode.options[i].value == arrSelected[x]){
document.choiceForm.redoNode.options[i] = null;
}
}
boxLength = document.choiceForm.redoNode.length;
}
}
//全选
function moveAll(lbox,rbox){
var lboxLength=lbox.length;//左边列表长度
if(lboxLength==0){
alert("没有数据可以选择！");
return false;
}
var boxLength = rbox.length;//右边列表长度
var j;
var isNew=false;
if(boxLength!=0){//右边框不为空时
for(var i=0; i<lbox.length; i++){ //遍历左边框内数据
var no = new Option();//新选项
no.value = lbox.options[i].value;
no.text = lbox.options[i].text;
for (j = 0; j < boxLength; j++){//遍历右边框内数据
thisitem = rbox.options[j].value;
if (thisitem == no.value){//如果值存在
isNew=false;
break;
}else{
isNew=true;
}
}
if(isNew){//如果可以添加
rbox.options[boxLength++] = no;
}
}
}else{//右边框为空时
for(var i=0; i<lbox.length; i++) { //遍历左边框内数据
var no = new Option();//新选项
no.value = lbox.options[i].value;
no.text = lbox.options[i].text;
rbox.options[boxLength++] = no;
}
}
}
//全部删除
function reMoveAll(flag) {
if(flag=='0'){
document.getElementById("backNode").options.length=0;
}
if(flag=='1'){
document.getElementById("redoNode").options.length=0;
}
}
function removechild(obj){
if(obj.selectedIndex==-1){
return;
}
obj.removeChild(obj.options[obj.selectedIndex]);
}
function getAllBackNodes(){
var nodes = document.choiceForm.backNode;
var backNodes = new Array();
for(var i=0; i<nodes.length; i++) { //遍历左边框内数据
backNodes[i] = nodes.options[i].text;
}
return backNodes;
}
$(function(){
var buttons = $("#voButtons").val();
var messages = $("#voMessages").val();
var expandVos = $("#voexpandVo").val();
setChecked(buttons);
setChecked(messages);
setChecked(expandVos);
});
function setChecked(values){
if(values != null && values != ""){
var array = values.split(",");
for(var i=0;i<array.length;i++){
var key = array[i];
$("#"+key).attr("checked",true);
}
}
}
function getCheckedValues(param){
var checkedValues = "";
$("#"+param).find("span").each(function(i){
var checkBoxObj = $(this).find("input[type='checkbox']");
if(checkBoxObj.attr("checked")){
checkedValues += checkBoxObj.attr("id")+",";
}
});
checkedValues = checkedValues.substring(0,checkedValues.lastIndexOf(","));
return checkedValues;
}
var backNodeTo = function(){
var len = $('#backNode option').length;
var nodestring = "";
for(var i=0;i<len;i++){
nodestring+=document.getElementById("backNode").options[i].value+",";
};
if(nodestring.charAt(nodestring.length-1)==","){
nodestring = nodestring.substring(0,nodestring.length-1);
}
return nodestring;
}
var redoNodeTo = function(){
var len = $('#redoNode option').length;
var nodestring = "";
for(var i=0;i<len;i++){
nodestring+=document.getElementById("redoNode").options[i].value+",";
};
if(nodestring.charAt(nodestring.length-1)==","){
nodestring = nodestring.substring(0,nodestring.length-1);
}
return nodestring;
}
document.onkeypress=function(){
if(event.keyCode==13){
return false;
}
}
</script>
</head>
<body>
<div class="ui-common-form-biserial">
<form name="choiceForm">
<div id="buttons">
<div id="selected" class="ui-custom-process-div" name="selected">
<table width="100%" border="0" cellspacing="0" class="grid_biserial">
<tr>
<td>
前置节点
</td>
<td>
</td>
<td>
回退节点
</td>
</tr>
<tr>
<td width="45%" >
<select name="LeadNode" ondblclick="moveOver();" size="10" multiple="multiple" style="width: 100%;">
<option>
节点1
</option>
<option>
节点2
</option>
<option>
节点3
</option>
<option>
节点1
</option>
<option>
节点2
</option>
<option>
节点3
</option>
<option>
节点1
</option>
<option>
节点2
</option>
<option>
节点3
</option>
<option>
节点2
</option>
<option>
节点3
</option>
</select>
</td>
<td style="text-align: center;">
<p style="margin-bottom: 5px; margin-top: -20px;">
<input type="button"
onclick="moveToRight(this.form.LeadNode,this.form.backNode);"
class="buttonPro" style='width:30px' value=">" />
</p>
<p style="margin-bottom: 5px;">
<input type="button"
onclick="moveAll(this.form.LeadNode,this.form.backNode);"
class="buttonPro" style='width:30px'
value=">>" />
</p>
<p style="margin-bottom: 5px;">
<input type="button" onclick="removeMe();"
class="buttonPro" style='width:30px' value="<" />
</p>
<p>
<input type="button" onclick="reMoveAll('0');"
class="buttonPro" style='width:30px' value="<<" />
</p>
</td>
<td width="45%">
<select name="backNode" id="backNode"
ondblclick="removechild(this)" size="10" multiple="multiple"
style="width: 100%">
</select>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《算法谜题》
- socket,
- boost教程
- 亲身经历故障－－如何解决
- Node.js Cannot find module 'xxx' 问题解决
- c语言结构体用法
- 域用户查看应用的策略
- SRM144DIV1 Lottery
- [python]json.load() vs val()探究
- OJ_1124
- 计算相似度方法
- java 导出excel问题
- 使用nginx upstream upstream timed out while reading response header from upstream问题解决
- ios开发第三方库介绍大全（收集中）
- 《趣学Python编程》
- 浅谈windows句柄表
- poj 2002 Squares 几何二分 || 哈希
- 持续集成调研报告（1）
- OJ_1123 采药
- IOS：音频播放