欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS 控制 两个ListBox之间选择移动项 (转发)

程序员文章站 2022-04-08 17:18:42
第一种-文章出处 > www.miniui.com/demo/listbox/moveitems.html

两个ListBox之间选择移动项

第一种-文章出处----> www.miniui.com/demo/listbox/moveitems.html

<body>
    <h1>两个ListBox之间选择移动项 </h1>     

    <input type="button" value="Save" onclick="saveData()" style="width:55px;"/>
    <table >
        <tr>
            <td >
                <div id="listbox1" class="mini-listbox" style="width:150px;height:150px;"
                    textField="text" valueField="id" showCheckBox="true" multiSelect="true"
                    url="../data/countrys.txt">
                </div>
            </td>
            <td style="width:120px;text-align:center;">
                <input type="button" value=">" onclick="add()" style="width:40px;"/><br />
                <input type="button" value=">>" onclick="addAll()" style="width:40px;"/><br />
                <input type="button" value="&lt;&lt;" onclick="removeAll()" style="width:40px;"/><br />
                <input type="button" value="&lt;" onclick="removes()" style="width:40px;"/><br />

            </td>
            <td>
                <div id="listbox2" class="mini-listbox" style="width:250px;height:150px;"                    
                     showCheckBox="true" multiSelect="true" >    
                    <div property="columns">
                        <div header="ID" field="id"></div>
                        <div header="国家" field="text"></div>
                    </div>
                </div>
            </td>
            <td style="width:50px;text-align:center;vertical-align:bottom">
                <input type="button" value="Up" onclick="upItem()" style="width:55px;"/>
                <input type="button" value="Down" onclick="downItem()" style="width:55px;"/>

            </td>
        </tr>
   
    </table>   
   
    <script type="text/javascript">
        mini.parse();
        var listbox1 = mini.get("listbox1");
        var listbox2 = mini.get("listbox2");

        function add() {
            var items = listbox1.getSelecteds();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function addAll() {       
            var items = listbox1.getData();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function removes() {
            var items = listbox2.getSelecteds();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function removeAll() {
            var items = listbox2.getData();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function upItem() {
            var items = listbox2.getSelecteds();
            for (var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index-1);
            }
        }
        function downItem() {           
            var items = listbox2.getSelecteds();           
            for (var i = items.length-1; i >=0; i--) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index + 1);
            }
        }
        function saveData() {
            var data = listbox2.getData();
            var json = mini.encode(data);
            alert(json);
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>演示在两个ListBox之间,移动数据。
        </p>
    </div>
</body>

----------------

第二种,同事写的

<body>
    <h1>两个ListBox之间选择移动项 </h1>     

  <div class="main-content">
 
            <div>

                <select id="s1" name="s1" multiple="true" style="height: 150px; width: 180px;white-space: normal;overflow-y:scroll">
                    <option value="a" style=" float:left;">项目1</option>
                    <option value="b" style=" float:left;">项目2</option>
                    <option value="c" style=" float:left;">项目3</option>
                    <option value="d" style=" float:left;">项目4</option>
                    <option value="e" style=" float:left;">项目5</option>
                    <option value="6f" style=" float:left;">项目6</option>
                    <option value="7h" style=" float:left;">项目7</option>
                    <option value="8k" style=" float:left;">项目8</option>
                    <option value="9j" style=" float:left;">项目9</option>
                    <option value="10l" style="float:left;">项目10</option>
                </select>
                <input type="button" name="" value=">>" onclick="movetos2();" />
                <input type="button" name="" value="<<" onclick="movetos1();" />
                <select id="s2" name="s2" multiple="true" style="height: 150px; width:180px;white-space: normal;">
                </select>
               <input type="button" name="" value="确定" onclick="add()" />
            </div>

            <div id="ss1" style="height: 50px; width: 180px; border:1px solid #807575;overflow-y: scroll;" >

            </div>
        </div>

   
    <script type="text/javascript">
       

   function movetos2() {
            var s1 = document.getElementById("s1");
            var s2 = document.getElementById("s2");
            var i;
            for (i = 0; i < s1.options.length; i++) {
                if (s1.options[i].selected) {
                    s2.appendChild(s1.options[i]);
                }
            }
        }

        function movetos1() {
            var s1 = document.getElementById("s1");
            var s2 = document.getElementById("s2");
            var i;
            for (i = 0; i < s2.options.length; i++) {
                if (s2.options[i].selected) {
                    s1.appendChild(s2.options[i]);
                }
            }
        }


        var htmlArr1 =[];
        function add() {
            var s2 = document.getElementById("s2");
            var ss1 = document.getElementById("ss1");
            var i;
            var html = "";
            htmlArr = [];
            ss1.innerHTML = "";
            var len = s2.options.length;
            for (i = 0; i < len; i++) {
                ; (function (i) {
                    //s2.removeChild(s2.options[i]);
                    html += "<span style='margin-right:4px;'>" + s2.options[i].text + "</span>";
                    var val = s2.options[i].value;
                    var text = s2.options[i].text;
                    var sss =
                    htmlArr.push(val+':'+text);
                    if (i == len - 1) {
                        ss1.innerHTML = html;
                        $(ss1).data('json', htmlArr);
                        //ss1.setAttribute("data-json", htmlArr);
                    }
                })(i);
            }

        }

    </script>


</body>