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


Posted in Javascript onNovember 28, 2017

写在前面:

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

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

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

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

前台页面:

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

 $(function() {

  //初始化8个listbox
  box1 = $("#listbox1").ligerListBox({
   isShowCheckBox: true,
   isMultiSelect: true,
   height: 140,
   //发送给后台的请求
   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四个按钮点击相关函数===========
 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 style="float:left;font-size:15px;width:150px;text-align: center">Support Devices:</div>
   <div style="margin:4px;float:left;">
    <div id="listbox1"></div>
   </div>
   <div style="margin:4px;float:left;" 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 style="margin:4px;float:left;">
    <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对应的数据格式要有text、id字段
   obj.put("id",device.getDevId());
   obj.put("text",device.getDevName());
   jsonArray.add(obj);

  }
  return SUCCESS;
 }

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

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

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

在不勾选数据的情况下,点击“点击”按钮,的效果图如下:
ligerUI---ListBox(列表框可移动的实例)

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

Javascript 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
JS实现的自定义map方法示例
May 17 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
基于vue2实现上拉加载功能
Nov 28 #Javascript
微信小程序模板和模块化用法实例分析
Nov 28 #Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 #Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 #Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 #Javascript
JavaScript中关于class的调用方法
Nov 28 #Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python操作redis的方法
2015/07/07 Python
Django开发中的日志输出的方法
2018/07/02 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python 互换字典的键值对实例
2019/02/12 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
旷课检讨书大全
2014/01/21 职场文书
夜不归宿检讨书
2014/02/25 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2019财务转正述职报告
2019/06/27 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript