写在前面：

　　对于可移动的列表框，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. 转：stringstream的用法

    [本文来自]http://www.builder.com.cn/2003/0304/83250.shtmlhttp://www.cppblog.com/alantop/archive/2007/07/ ...

  2. PHP中header的作用

    1.跳转: //若等待时间为0,则与header("location:")等效.  //Header("Location:http://localhost//sessio ...

  3. Vue2.0 v-for 中 :key 到底有什么用？

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  4. Java基础笔记7

    OOP面向对象有三个特点 1.封装 封装的好处: 起到一定的保护作用  封装的是属性. java如何进行封装; 1.使用private关键字对象属性封装. 只能在本类中使用.  2.为每个属性提供方法 ...

  5. javascript 之执行环境-08

    概念 执行环境(Execution context,简称EC)或执行上下文对象(后面统一用执行上下文表示),它定义了变量或者函数有权访问的其他数据,决定了他们各自的行为.是不是有点不好理解,那我先简单 ...

  6. trait与policy模板技术

    trait与policy模板技术 我们知道,类有属性(即数据)和操作两个方面.同样模板也有自己的属性(特别是模板参数类型的一些具体特征,即trait)和算法策略(policy,即模板内部的操作逻辑). ...

  7. dom4j解析xml文档全面介绍

    一.dom4j介绍 dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点, ...

  8. 五种js判断是否为整数（转）

    五种js判断是否为整数类型方式 作者:snandy 这篇文章主要介绍了五种JavaScript判断是否为整数类型方式,需要的朋友可以参考下   这篇看看如何判断为整数类型(Integer),JavaS ...

  9. Linux系列教程（十四）——Linux用户和用户组管理之相关配置文件

    前面我们介绍了软件包管理.首先介绍了rpm包的相关命令,但是我们发现直接安装rpm包会被其依赖性折磨的不行,然后解决办法是yum在线管理,通过yum命令安装rpm包能自动帮助我们解决依赖性.最后又介绍 ...

  10. 针对数据量较大的表，需要进行跨库复制，采用navcat 实现sqlite数据库跨数据库的数据表迁移 [转载]

    2014年12月13日 14:36 新浪博客 (转自http://www.cnblogs.com/nmj1986/archive/2012/09/17/2688827.html) 需求: 有两个不同的 ...