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 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
js操作数组函数实例小结
Dec 10 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
JavaScript实现简单随机点名器
Nov 21 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
判断用户是否在线的代码
2011/03/05 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
微信小程序云开发详细教程
2019/05/16 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python实现字符串匹配算法代码示例
2017/12/05 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python做接口测试的必要性
2019/11/20 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
高校自主招生自荐信
2013/12/09 职场文书
会计找工作求职信范文
2013/12/09 职场文书
心理健康教育心得体会
2013/12/29 职场文书
家具促销活动方案
2014/02/16 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
护士求职简历自我评价
2015/03/10 职场文书