写在前面：

　　对于可移动的列表框，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)的时候已经写过了，就不再重复说了

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

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

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

额呃呃呃呃呃呃呃呃呃。。今天不用加班啦。。开心。。。。。。。。。。。。。。。

ligerUI---ListBox(列表框可移动)的更多相关文章

  1. Tkinter Listbox(列表框)

    Python - Tkinter Listbox(列表框): 列表框部件用于显示一个项目列表,用户可以选择的项目数   列表框部件用于显示一个项目列表,用户可以选择的项目数. 语法: 这里是一个简单的 ...

  2. MFC编程入门之二十四（常用控件：列表框控件ListBox）

    前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...

  3. VS2010/MFC编程入门之二十四（常用控件：列表框控件ListBox）

    前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...

  4. Spring MVC-表单（Form）标签-列表框（Listbox）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_listbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  5. （七）对话框，单选框(radiobox)，复选框(checkbox)，列表框(ListBox)，组合框(CComboBox)，水平滚动条(Horizontal scroll bar)，微调(旋转)spincontrol，列表视图控件CListCtrl，静态控件static

    1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...

  6. VS2010-MFC（常用控件：列表框控件ListBox）

    转自:http://www.jizhuomi.com/software/186.html 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选中的项会高亮显示.列表框可分为单 ...

  7. 列表框List Box

    List Box/Check List Box ListBox窗口用来列出一系列的文本,每条文本占一行.创建一个列表窗口可以使用成员函数: BOOL CListBox::Create( LPCTSTR ...

  8. CIconListBox带图标的列表框类

    有时候,我们需要在列表框ListBox中插入带图标的文字项,这就需要自己派生一个类出来了,网上的一个CIconListBox类还不错,网站http://www.codeguru.com/Cpp/con ...

  9. 积累的VC编程小技巧之列表框

    1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...

随机推荐

  1. 多个code.csdn.net账号切换

    code.csdn.net是国内开源库 使用git需要在项目添加密钥 而如果有多个账户,一个是私人,一个是公司,那么这时怎么做? 密钥存在~/.ssh默认是id_rsa 那么一个比较笨的办法是做一个k ...

  2. PHP连接mysql数据库进行增删改查--删除

    删除: 1.首页 在foreach里面加入   <td><a href='dele.php?id={$i[0]}'>删除</a></td> 在上面< ...

  3. 解析 .Net Core 注入 (2) 创建容器

    在上一节的学习中,我们已经知道了通过 IServiceCollection 拓展方法创建 IServiceProvider 默认的是一个类型为 ServiceProvider 对象,并且实际提供创建对 ...

  4. 【NOIP2016提高组】 Day2 T1 组合数问题

    题目传送门:https://www.luogu.org/problemnew/show/P2822                 ↓题目大意↓ 数据的极限范围:n,m≤2000,k≤21,数据组数≤ ...

  5. IO 调优

    磁盘优化 1.增加缓存 2.优化磁盘的管理系统 3.设计合理的磁盘存储数据块 4.应用合理的RAID策略 TCP网络参数调优 网络IO优化 1.减少网络交互次数 2.减少网络传输数据量的大小 3.尽量 ...

  6. CentOS（linux发行版）系统安装中文输入法:

    安装步骤: 1>.打开终端界面,使用su - root切换到超级用户,然后输入yum install"@Chinese support",回车. 2>.中间安装过程提示 ...

  7. Ajax.Nodejs.跨域访问

    使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...

  8. 运用El表达式截取字符串/获取list的长度

    ${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)} 引入 <%@ taglib prefix ...

  9. LeetCode 405. Convert a Number to Hexadecimal （把一个数转化为16进制）

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  10. Kotlin——最详细的接口使用、介绍

    在Kotlin中,接口(Interface)的使用和Java中的使用方式是有很大的区别.不管是接口中的属性定义,方法等.但是定义方式还是相同的. 目录 一.接口的声明 1.接口的声明 关键字:inte ...