写在前面：

　　对于可移动的列表框，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. win10 uwp 分治法

    其实我想说Path,因为最近在做一个简单的分治. 算法涉及到了一个平面几何的知识.就是三角形p1p2p3的面积等于以下行列式的二分之一: 而且当点P3 在射线P1P2的左侧的时候,表达式为正,右侧表达 ...

  2. 牛顿插值法及其C++实现

    h1 { margin-bottom: 0.21cm } h1.western { font-family: "Liberation Sans", sans-serif; font ...

  3. Linux系统EXT文件系统

    分区格式化(Linux创建文件系统):(假设需要格式化的分区为/dev/sdb1) 1. ext2文件系统和ext3文件系统的区别: ext2不支持日志文件系统,不会产生日志文件,ext3则会产生日志 ...

  4. Java并发编程--线程池

    1.ThreadPoolExecutor类 java.uitl.concurrent.ThreadPoolExecutor类是线程池中最核心的一个类,下面我们来看一下ThreadPoolExecuto ...

  5. Problem A

    Problem Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum ...

  6. 哈尔滨理工大学第六届程序设计团队 E-Mod

    /* 成功水过,哈哈哈,可能数据水吧 */ #include <stdio.h> #include <algorithm> #include <string.h> ...

  7. Linux学习（十六）VIM

    一.简介 VIM是vi的增强版.VIM是Linux平台上的主要编辑器.基本上所有的文档的新增,修改,保存都需要用到它.所以,掌握VIM是很有必要的. vim的安装非常简单,一条命令就可以了: yum ...

  8. IdentityServer4实现Token认证登录以及权限控制

    相关知识点 不再对IdentityServer4做相关介绍,博客园上已经有人出了相关的系列文章,不了解的可以看一下: 蟋蟀大神的:小菜学习编程-IdentityServer4 晓晨Master:Ide ...

  9. HDFS的接口（命令行接口和Java接口）--笔记

    HDFS 文件的系统访问的接口 1.Hadoop的shell命令脚本 hadoop fs -ls   列出某一个目录下的文件 hadoop fs -lsr 递归的方式列出所有文件 hadoop fs ...

  10. Python入门学习（一）

    看完了莫烦Python的视频,对于Python有了一点感觉,接下来打算把小甲鱼的视频啃完,附上学习网址:http://blog.fishc.com/category/python 小甲鱼的视频是从零基 ...