当前位置:Gxlcms > JavaScript > ligerUI---ListBox(列表框可移动的实例)

ligerUI---ListBox(列表框可移动的实例)

时间:2021-07-01 10:21:17 帮助过:44人阅读

写在前面:

对于可移动的列表框,ligerui中也对其进行了封装,可以直接照着demo拿来用,不过那都是直接在页面上静态初始化的数据,那么如何从后台获取?

前面有了对ligerui的一些组件的使用经验后,在这里其实 对于从后台获取数据在前台页面进行显示,都大同小异。也不是很难。

即要么是在ligerui组件中直接使用其url属性向后台发送请求,要么是单独发送一个ajax请求拿到数据后,通过获取组件,然后设置其data属性。嘿嘿。。

下面就直接使用url属性来发送请求吧。。。。。

前台页面:

  1. <script type="text/javascript">
  2. var box1,box2;
  3. $(function() {
  4. //初始化8个listbox
  5. box1 = $("#listbox1").ligerListBox({
  6. isShowCheckBox: true,
  7. isMultiSelect: true,
  8. height: 140,
  9. //发送给后台的请求
  10. url: '${baseURL}/getDeviceByAll.action',
  11. });
  12. box2 = $("#listbox2").ligerListBox({
  13. isShowCheckBox: true,
  14. isMultiSelect: true,
  15. height: 140,
  16. });
  17. var tempData2 = [{id:1,text:"aa"},{id:2,text:"bb"}];
  18. //button点击事件
  19. $("#btn1").click(function(){
  20. setListBoxData(tempData2);
  21. });
  22. });
  23. function setListBoxData(tempData2){
  24. //貌似只能通过id来移除了 用removeItems不可以达到效果
  25. //例如移除id为1,2的然后添加到左边
  26. for(var i=0;i<tempData2.length;i++){
  27. box1.removeItem(tempData2[i].id);
  28. }
  29. box2.addItems(tempData2);
  30. }
  31. //===========listbox四个按钮点击相关函数===========
  32. function moveToLeft1()
  33. {
  34. var selecteds = box2.getSelectedItems();
  35. if (!selecteds || !selecteds.length) return;
  36. box2.removeItems(selecteds);
  37. box1.addItems(selecteds);
  38. }
  39. function moveToRight1()
  40. {
  41. var selecteds = box1.getSelectedItems();
  42. if (!selecteds || !selecteds.length) return;
  43. box1.removeItems(selecteds);
  44. box2.addItems(selecteds);
  45. }
  46. function moveAllToLeft1()
  47. {
  48. var selecteds = box2.data;
  49. if (!selecteds || !selecteds.length) return;
  50. box1.addItems(selecteds);
  51. box2.removeItems(selecteds);
  52. }
  53. function moveAllToRight1()
  54. {
  55. var selecteds = box1.data;
  56. if (!selecteds || !selecteds.length) return;
  57. box2.addItems(selecteds);
  58. box1.removeItems(selecteds);
  59. }
  60. </script>
  61. <style type="text/css">
  62. .middle input {
  63. display: block;width:30px; margin:2px;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div>
  69. <div style="float:left;font-size:15px;width:150px;text-align: center">Support Devices:</div>
  70. <div style="margin:4px;float:left;">
  71. <div id="listbox1"></div>
  72. </div>
  73. <div style="margin:4px;float:left;" class="middle">
  74. <input type="button" onclick="moveToLeft1()" value="<" />
  75. <input type="button" onclick="moveToRight1()" value=">" />
  76. <input type="button" onclick="moveAllToLeft1()" value="<<" />
  77. <input type="button" onclick="moveAllToRight1()" value=">>" />
  78. </div>
  79. <div style="margin:4px;float:left;">
  80. <div id="listbox2"></div>
  81. </div>
  82. </div>
  83. <input type="button" value="点击" id="btn1">
  84. </body>

后台action:

  1. private JSONArray jsonArray;
  2. public JSONArray getJsonArray() {
  3. return jsonArray;
  4. }
  5. public String getDeviceByAll() throws Exception{
  6. List<Device> deviceList = deviceService.getAll(Device.class);
  7. jsonArray = new JSONArray();
  8. for(Device device:deviceList){
  9. JSONObject obj = new JSONObject();
  10. //listbox对应的数据格式要有text、id字段
  11. obj.put("id",device.getDevId());
  12. obj.put("text",device.getDevName());
  13. jsonArray.add(obj);
  14. }
  15. return SUCCESS;
  16. }

好啦,这样就成功了,当然 我这里是省略了后台如何将json数据传递到前台,因为在我写ligerui的其他组件(ligerGrid,ligerForm)的时候已经写过了,就不再重复说了

效果演示截图:(省略向左向右的移动效果图)

在不勾选数据的情况下,点击“点击”按钮,的效果图如下:

其实在移除的过程中,一开始使用的removeItems()方法,但是测试貌似不可以移除,故采用removeItem()的方法,根据id来移除。。

人气教程排行