写在前面：

　　对于可移动的列表框，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 修改CalendarDatePicker图标颜色

    CalendarDatePicker 是一个好用的东西,但是我发现想要修改他右边的那个图标,显示日历的图标颜色,没有这个选项. 如果不知道我说的是哪个,请看下面的图. 左边颜色变化的就是我们要修改的图 ...

  2. win10 uwp 车表盘 径向规

    车表盘就是有刻度的圆盘加上针,这个控件可以直观让用户知道当前的速度或其他 看名字不知道是什么,我就放一张图 使用很简单,在Nuget,Radial Gauge 要使用大神做的,简单,在使用我们需要在N ...

  3. WAMPServer配置修改及问题汇总

    备忘录 软件版本wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b -------------------------------------- ...

  4. 南天PR2、PR2E驱动下载，xp，win7，win8，win8.1，win10 32位64位驱动下载安装教程

    家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...

  5. Servlet中路径信息总结

    ./ 当前目录 ../ 父级目录 / 根目录 资源寻找都是依靠路径,资源存储方式是按照哈希表运算的,所以路径的计算其实就是哈希值的计算. servlet中,所有路径的配置都要用绝对路径. 什么是绝对路 ...

  6. Java打印常见图形

    package org.other; import java.util.Scanner; /* * 题目:打印常用图形逻辑 */ public class Ninthninth { public st ...

  7. (转)Java开发中的23种设计模式详解

    原文出自:http://blog.csdn.net/zhangerqing 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型 ...

  8. LINUX 配置默认程序

    update-alternatives 命令用于配置默认程序,版本切换 1.display 命令,查看命令链接信息 update-alternatives --display name 2.insta ...

  9. ssh更改默认端口号及实现免密码远程登陆

    近来在复习防火墙管理工具 iptables 的基本使用方法,涉及到对端口添加或删除防火墙策略的内容,之前对ssh更改默认端口号及免密码登录的方法不熟悉,这次做一个基本的总结防止自己遗忘. 错误偏差及其 ...

  10. AsposeCell特定格式表格

    效果图: Workbook workbook = new Workbook(); Worksheet sheet = (Worksheet)workbook.Worksheets[0]; Cells ...