JSP自定义标签（三） 多选控件（2）

三、JS代码：multiSelector.js

  	
	// author: HHB      
function showMulti(parentId, name, id, value) {
    var multi = new MultiSelector();
    multi.create(parentId, name, id);
    var str = "[{text:'zs1',value:'1'},{text:'zs2',value:'1'},{text:'zs3',value:'1',selected:'true'},{text:'zs4',value:'1',selected:'true'}]";
    var obj = eval("(" + (value?value:'-1') + ")");
    multi.initItem(obj);
    // alert(multi);
}

MultiSelector = function() {
    this.forSelec = null;
    this.selected = null;
    this.selectedItemL = null;
    this.selectedItemR = null;
    this.valueObj = null;
    this.selectBtn=null;
    this.cancelBtn=null;
    var forSele_="forSele_";
    var selected_="selected_";
    var valueObj_="valueObj_";
    var selectBtn_="selectBtn_";
    var cancelBtn_="cancelBtn_";
    var parent_="multiParent_";

    //根据ID获取多选控件对象
    MultiSelector.prototype.multiSelector=function(id){
        var _this=this;
        this.forSelec=document.getElementById(forSele_+id);
        this.selected=document.getElementById(selected_+id);
        this.valueObj=document.getElementById(id);
        this.selectBtn=document.getElementById(selectBtn_+id);
        this.cancelBtn=document.getElementById(cancelBtn_+id);
        MultiSelector.removeEvent(_this.selectBtn,'click',MultiSelector.itemOnSelect);
        MultiSelector.addEvent(_this.selectBtn,'click',function() {
            MultiSelector.itemOnSelect(_this);
        });
        MultiSelector.removeEvent(_this.cancelBtn,'click',MultiSelector.itemOnSelect);
        MultiSelector.addEvent(_this.cancelBtn,'click',function() {
            MultiSelector.itemOnCancel(_this);
        });
        
        //MultiSelector.clearChildren(document.getElementById(parent_+id));
        //this.create()
    };
    
    //加载本地数据
    MultiSelector.prototype.load=function(data,textField,valueField){
        if(this.forSelec&&this.selected)
        {
            this.clear();
            this.initItem(data,textField,valueField);
        }
    };
    
    MultiSelector.addEvent = function(el, evname, func) {
        if (el.attachEvent) { // IE
            el.attachEvent("on" + evname, func);
        } else if (el.addEventListener) { // Gecko / W3C
            el.addEventListener(evname, func, true);
        } else { // Opera (or old browsers)
            el["on" + evname] = func;
        }
    };
    MultiSelector.removeEvent=function(el, evname, func) {
        if (el.detachEvent) { // IE
            el.detachEvent("on" + evname, func);
        } else if (el.removeEventListener) { // Gecko / W3C
            el.removeEventListener(evname, func, true);
        } else { // Opera (or old browsers)
            el["on" + evname] = null;
        }
    };
    MultiSelector.clearChildren=function(parent)
    {
        while (parent.firstChild) {
              var oldNode = parent.removeChild(parent.firstChild);
              oldNode = null;
            }
    };
    //清空多选控件的选择列表
    MultiSelector.prototype.clear=function()
    {
        var children=null;
        if(this.forSelec)
        {
            MultiSelector.clearChildren(this.forSelec);
        }
        if(this.selected)
        {
            MultiSelector.clearChildren(this.selected);
        }
    };
    //初始化创建元素
    MultiSelector.createElement = function(type, parent) {
        var el = null;
        if (document.createElementNS) {
            el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
        } else {
            el = document.createElement(type);
        }
        if (typeof parent != "undefined") {
            parent.appendChild(el);
        }
        return el;
    };
    
    //初始创建控件元素
    MultiSelector.prototype.create = function(par, name, id) {
        var _this = this;
        var parent = document.getElementById(par);
        var tempTable = MultiSelector.createElement("table");
        parent.appendChild(tempTable);
        var tbody = MultiSelector.createElement("tbody");
        tempTable.appendChild(tbody);
        var tmpTr = MultiSelector.createElement("tr");
        tmpTr.style.verticalAlign = 'middle';
        tbody.appendChild(tmpTr);

        // 供选择列表
        var forSeletd = MultiSelector.createElement("td");
        forSeletd.style.width = '150px';
        forSeletd.style.height = '200px';
        var forSeleDiv = MultiSelector.createElement("div");
        forSeleDiv.id=forSele_+id;
        forSeleDiv.style.width = '150px';
        forSeleDiv.style.height = '200px';
        forSeleDiv.style.border = '2px solid #C9D7F1';
        forSeleDiv.setAttribute("stype", "L");
        this.forSelec = forSeleDiv;
        forSeletd.appendChild(forSeleDiv);
        tmpTr.appendChild(forSeletd);

        // 按钮列表
        var btntd = MultiSelector.createElement("td");
        btntd.style.width = '80px';
        btntd.style.height = '200px';
        var btnDiv = MultiSelector.createElement("div");
        btnDiv.style.width = '80px';
        btnDiv.style.height = '100px';
        // btnDiv.style.border='2px solid #C9D7F1';
        btnDiv.style.floatStyle = 'left';
        btntd.appendChild(btnDiv);
        tmpTr.appendChild(btntd);

        // 选择按钮
        var selectBtn = MultiSelector.createElement("div");
        selectBtn.id=selectBtn_+id;
        selectBtn.style.cursor = 'pointer';
        selectBtn.style.width = '70px';
        selectBtn.style.height = '20px';
        selectBtn.style.border = "#7b9ebd 1px solid";
        selectBtn.style.backgroundColor = "#EBE9ED";
        selectBtn.style.fontFamily = "Verdana,Arial,Helvetica,sans-serif";
        selectBtn.innerHTML = "选择 >>";
        selectBtn.style.marginLeft = 'auto';
        selectBtn.style.marginRight = 'auto';
        MultiSelector.addEvent(selectBtn, "click", function() {
            MultiSelector.itemOnSelect(_this);
        });
        this.selectBtn=selectBtn;
        btnDiv.appendChild(selectBtn);

        // 取消按钮
        var cancelBtn = MultiSelector.createElement("div");
        cancelBtn.id=cancelBtn_+id;
        cancelBtn.style.cursor = 'pointer';
        cancelBtn.style.width = '70px';
        cancelBtn.style.height = '20px';
        // cancelBtn.style.border="1px #000000 solid";
        cancelBtn.style.border = "#7b9ebd 1px solid";
        cancelBtn.style.backgroundColor = "#EBE9ED";
        cancelBtn.style.fontFamily = "Verdana,Arial,Helvetica,sans-serif";
        cancelBtn.innerHTML = "<< 取消 ";
        cancelBtn.style.marginLeft = 'auto';
        cancelBtn.style.marginRight = 'auto';
        cancelBtn.style.marginTop = '30px';
        cancelBtn.style.color = "#000000";
        MultiSelector.addEvent(cancelBtn, "click", function() {
            MultiSelector.itemOnCancel(_this);
        });
        this.cancelBtn=cancelBtn;
        btnDiv.appendChild(cancelBtn);

        // 保存值
        var valueHid = MultiSelector.createElement("input");
        //valueHid.id=valueObj_+id;
        valueHid.type = "hidden";
        valueHid.name = name;
        valueHid.id = id;
        this.valueObj = valueHid;
        btnDiv.appendChild(valueHid);

        // 已选择项列表
        var selectedtd = MultiSelector.createElement("td");
        selectedtd.style.width = '150px';
        selectedtd.style.height = '200px';
        var selectedDiv = MultiSelector.createElement("div");
        selectedDiv.id=selected_+id;
        selectedDiv.style.width = '150px';
        selectedDiv.style.height = '200px';
        selectedDiv.style.border = '2px solid #C9D7F1';
        selectedDiv.style.floatStyle = 'left';
        selectedDiv.setAttribute("stype", "R");
        this.selected = selectedDiv;
        selectedtd.appendChild(selectedDiv);
        tmpTr.appendChild(selectedtd);
    };
    MultiSelector.prototype.initItem = function(jsonValue,textField,valueField) {
        //alert(jsonValue[0].text);
        //var objs = eval("(" + jsonValue + ")");
        var objs=jsonValue;
        var objTmp = null;
        for (objIndex = 0; objIndex < objs.length; objIndex++) {
            objTmp = objs[objIndex];
            this.createItem(objTmp,textField,valueField);
        }
        this.valueObj.value = this.getValue();
    };
    MultiSelector.prototype.createItem = function(valueObj,textField,valueField) {
        if (!valueObj) {
            return;
        }
        var itemDiv = null;
        itemDiv = MultiSelector.createElement("div");
        if(valueField)
        {
            itemDiv.setAttribute('key', valueObj[valueField]);
        }else{
            itemDiv.setAttribute('key', valueObj.value);
        }
        
        itemDiv.style.width = '100%';
        itemDiv.style.cursor = 'pointer';
        if(textField)
        {
            itemDiv.innerHTML = valueObj[textField];
        }
        else
        {
            itemDiv.innerHTML = valueObj.text;
        }
        itemDiv.onblur = MultiSelector.itemOnBlur;
        var _this = this;
        MultiSelector.addEvent(itemDiv, "click", function(event) {
            var srcObj = null;
            if (event && event.srcElement) {
                srcObj = event.srcElement;
            } else {
                srcObj = this;
            }
            MultiSelector.itemOnClick(srcObj, _this);
        });
        // MultiSelector.addEvent(itemDiv,"blur",MultiSelector.itemOnBlur);
        if (valueObj.selected == "true") {
            this.selected.appendChild(itemDiv);
        } else {
            this.forSelec.appendChild(itemDiv);
        }
    };
    MultiSelector.prototype.moveItem = function(direction) {
        if (direction && direction === true) {
            if (this.selectedItemL) {
                this.forSelec.removeChild(this.selectedItemL);
                this.selected.appendChild(this.selectedItemL);
                this.selectedItemR = this.selectedItemL;
                this.selectedItemL = null;
                this.selectedItemR.click();
            }
        } else {
            if (this.selectedItemR) {
                this.selected.removeChild(this.selectedItemR);
                this.forSelec.appendChild(this.selectedItemR);
                this.selectedItemL = this.selectedItemR;
                this.selectedItemR = null;
                this.selectedItemL.click();
            }
        }
        this.valueObj.value = this.getValue();
    };
    MultiSelector.prototype.getValue = function() {
        var valueStr = "";
        var valueObjs = this.selected.childNodes;
        var tmpItem = null;
        for (valueIndex = 0; valueIndex < valueObjs.length; valueIndex++) {
            tmpItem = valueObjs[valueIndex];
            valueStr = valueStr + tmpItem.getAttribute("key") + ",";
        }
        return valueStr;
    };
    MultiSelector.itemOnClick = function(srcObj, obj) {
        var nodes = srcObj.parentNode.childNodes;
        for (index = 0; index < nodes.length; index++) {
            nodes[index].style.backgroundColor = "#ffffff";
        }
        srcObj.style.backgroundColor = "#E0EEE0";
        if (srcObj.parentNode == obj.forSelec) {
            obj.selectedItemL = srcObj;
        }
        if (srcObj.parentNode == obj.selected) {
            obj.selectedItemR = srcObj;
        }
    };
    MultiSelector.itemOnBlur = function() {
        this.style.backgroundColor = "#ffffff";
    };
    MultiSelector.itemOnSelect = function(obj) {
        obj.moveItem(true);
    };
    MultiSelector.itemOnCancel = function(obj) {
        obj.moveItem(false);
    };
};

  	

四、tld定义

 <!-- 多选标签 -->
  <tag>
  	<name>multiselec</name>
  	<tag-class>base.tags.MultiSelectorTag</tag-class>
  	<body-content>empty</body-content>
  	<small-icon></small-icon>
  	<large-icon></large-icon>
  	<description></description>
  	<attribute>
  		<name>id</name>
  		<required>true</required>
  	</attribute>
  	<attribute>
  		<name>name</name>
  		<required>true</required>
  	</attribute>
  	<attribute>
  		<name>value</name>
  		<required>false</required>
  		<rtexprvalue>true</rtexprvalue>
  	</attribute>
  	<example></example>
  </tag>

五、测试标签

 

<%
	String multiStr="[{text:'zs1',value:'1'},{text:'zs2',value:'1'},{text:'zs3',value:'1',selected:'true'},{text:'zs4',value:'1',selected:'true'}]";
%>
<c:multiselec name="multiTest" id="multiTest" value="<%=multiStr %>"/>

或者：

var multiS=new MultiSelector();
multiS.multiSelector("multiTest");
multiS.load(data,"serviceName","serviceId");