ligerUI中ListBox列表框可移動的示例分析

發(fā)布時間：2021-07-23 13:42:52 來源：億速云閱讀：280 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)ligerUI中ListBox列表框可移動的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

前臺頁面：

<script type="text/javascript">
 var box1,box2;

 $(function() {

  //初始化8個listbox
  box1 = $("#listbox1").ligerListBox({
   isShowCheckBox: true,
   isMultiSelect: true,
   height: 140,
   //發(fā)送給后臺的請求
   url: '${baseURL}/getDeviceByAll.action',
  });
  box2 = $("#listbox2").ligerListBox({
   isShowCheckBox: true,
   isMultiSelect: true,
   height: 140,

  });

  var tempData2 = [{id:1,text:"aa"},{id:2,text:"bb"}];

  //button點擊事件
  $("#btn1").click(function(){
   setListBoxData(tempData2);
  });

 });



 function setListBoxData(tempData2){
  //貌似只能通過id來移除了 用removeItems不可以達到效果
  //例如移除id為1,2的然后添加到左邊
  for(var i=0;i<tempData2.length;i++){
   box1.removeItem(tempData2[i].id);
  }
  box2.addItems(tempData2);
 }

 //===========listbox四個按鈕點擊相關(guān)函數(shù)===========
 function moveToLeft1()
 {
  var selecteds = box2.getSelectedItems();
  if (!selecteds || !selecteds.length) return;
  box2.removeItems(selecteds);
  box1.addItems(selecteds);

 }

 function moveToRight1()
 {
  var selecteds = box1.getSelectedItems();
  if (!selecteds || !selecteds.length) return;
  box1.removeItems(selecteds);
  box2.addItems(selecteds);


 }
 function moveAllToLeft1()
 {
  var selecteds = box2.data;
  if (!selecteds || !selecteds.length) return;
  box1.addItems(selecteds);
  box2.removeItems(selecteds);

 }
 function moveAllToRight1()
 {
  var selecteds = box1.data;
  if (!selecteds || !selecteds.length) return;
  box2.addItems(selecteds);
  box1.removeItems(selecteds);

 }




</script>
<style type="text/css">
 .middle input {
  display: block;width:30px; margin:2px;
 }
</style>
</head>
<body>

  <div>
   <div >Support Devices:</div>
   <div >
    <div id="listbox1"></div>
   </div>
   <div  class="middle">
    <input type="button" onclick="moveToLeft1()" value="<" />
    <input type="button" onclick="moveToRight1()" value=">" />
    <input type="button" onclick="moveAllToLeft1()" value="<<" />
    <input type="button" onclick="moveAllToRight1()" value=">>" />
   </div>
   <div >
    <div id="listbox2"></div>
   </div>
  </div>

  <input type="button" value="點擊" id="btn1">


</body>

后臺action：

private JSONArray jsonArray;
 public JSONArray getJsonArray() {
  return jsonArray;
 }
 public String getDeviceByAll() throws Exception{
  List<Device> deviceList = deviceService.getAll(Device.class);

  jsonArray = new JSONArray();
  for(Device device:deviceList){
   JSONObject obj = new JSONObject();
   //listbox對應(yīng)的數(shù)據(jù)格式要有text、id字段
   obj.put("id",device.getDevId());
   obj.put("text",device.getDevName());
   jsonArray.add(obj);

  }
  return SUCCESS;
 }

好啦，這樣就成功了，當然我這里是省略了后臺如何將json數(shù)據(jù)傳遞到前臺，因為在我寫ligerui的其他組件(ligerGrid,ligerForm)的時候已經(jīng)寫過了，就不再重復(fù)說了

效果演示截圖：(省略向左向右的移動效果圖)

ligerUI中ListBox列表框可移動的示例分析

在不勾選數(shù)據(jù)的情況下，點擊“點擊”按鈕，的效果圖如下：
ligerUI中ListBox列表框可移動的示例分析

其實在移除的過程中，一開始使用的removeItems()方法，但是測試貌似不可以移除，故采用removeItem()的方法，根據(jù)id來移除。。

關(guān)于“l(fā)igerUI中ListBox列表框可移動的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

ligerUI中ListBox列表框可移動的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽