ligerListBox
列表框组件
示例
1 <script type="text/javascript"> 2 $(function () 3 { 4 $("#listbox1,#listbox2").ligerListBox({ 5 isShowCheckBox: true, 6 isMultiSelect: true, 7 height: 140 8 }); 9 10 var data = [ 11 { text: '张三', id: '1' }, 12 { text: '李四', id: '2' }, 13 { text: '赵武2', id: '3' }, 14 { text: '赵武3', id: '4' }, 15 { text: '赵武4', id: '5' }, 16 { text: '赵武5', id: '6' }, 17 { text: '赵武6', id: '7' }, 18 { text: '赵武7', id: '8' } 19 ]; 20 liger.get("listbox1").setData(data); 21 }); 22 function moveToLeft() 23 { 24 var box1 = liger.get("listbox1"), box2 = liger.get("listbox2"); 25 var selecteds = box2.getSelectedItems(); 26 if (!selecteds || !selecteds.length) return; 27 box2.removeItems(selecteds); 28 box1.addItems(selecteds); 29 } 30 function moveToRight() 31 { 32 var box1 = liger.get("listbox1"), box2 = liger.get("listbox2"); 33 var selecteds = box1.getSelectedItems(); 34 if (!selecteds || !selecteds.length) return; 35 box1.removeItems(selecteds); 36 box2.addItems(selecteds); 37 } 38 function moveAllToLeft() 39 { 40 var box1 = liger.get("listbox1"), box2 = liger.get("listbox2"); 41 var selecteds = box2.data; 42 if (!selecteds || !selecteds.length) return; 43 box1.addItems(selecteds); 44 box2.removeItems(selecteds); 45 } 46 function moveAllToRight() 47 { 48 var box1 = liger.get("listbox1"), box2 = liger.get("listbox2"); 49 var selecteds = box1.data; 50 if (!selecteds || !selecteds.length) return; 51 box2.addItems(selecteds); 52 box1.removeItems(selecteds); 53 54 } 55 </script> 56 <style type="text/css"> 57 .middle input { 58 display: block;width:30px; margin:2px; 59 } 60 </style> 61 </head> 62 <body style="padding:10px"> 63 <div style="margin:4px;float:left;"> 64 <div id="listbox1"></div> 65 </div> 66 <div style="margin:4px;float:left;" class="middle"> 67 <input type="button" onclick="moveToLeft()" value="<" /> 68 <input type="button" onclick="moveToRight()" value=">" /> 69 <input type="button" onclick="moveAllToLeft()" value="<<" /> 70 <input type="button" onclick="moveAllToRight()" value=">>" /> 71 </div> 72 <div style="margin:4px;float:left;"> 73 <div id="listbox2"></div> 74 </div> 75 </body>
截图
