写在前面：

　　对于可移动的列表框，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. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  2. 张高兴的 Xamarin.Android 学习笔记：（一）环境配置

    最近在自学 Xamarin 和 Android ,同时发现国内在做 Xamarin 的不多.我在自学中间遇到了很多问题,而且百度到的很多教程也有些过时,现在打算写点东西稍微总结下,顺便帮后人指指路了. ...

  3. ASP.NET没有魔法——ASP.NET MVC 直连路由(特性路由)

    之前对Controller创建的分析中,知道了Controller的创建是有两个步骤组成,分别是Controller的类型查找以及根据类型创建Controller实例. 在查询Controller的类 ...

  4. NodeJs通过镜像下载相关NPM模块

    临时通过镜像使用一次:npm --registry https://registry.npm.taobao.org install  模块名[设置镜像源地址为淘宝] 持久使用的第一种方法: npm c ...

  5. [Python] 文科生零基础学编程系列一——对象、集合、属性、方法的基本定义

    1.编程语言: 1.1是什么: 编程语言(programming language),是用来定义计算机程序的形式语言.它是一种被标准化的交流技巧,用来向计算机发出指令. 一种计算机语言让程序员能够准确 ...

  6. 树莓派.系统.修改声音输出通道(auto,hdmi,耳机接口)

    树莓派平时通过耳机接口一直在正常使用 有一天外接了一个HDMI的屏幕, 结果耳机接口连着的音箱突然就没声音了,在网上查了资料,发现原来树莓派声音输出有3种模式 记录如下: 在命令行终端上输入下面命令将 ...

  7. 用户关注微信公众号后，获取该用户的openID存数据库失败

    关注微信公众号后将关注人的openID存入数据库失败,而openID换成字符串写死却可以存入数据库: $wxid=$postObj->FromUserName; $data['wx_openid ...

  8. .11-Vue源码之patch（1）

    最近太鸡儿忙了!鸽了一个多月,本来这个都快完了,拖到现在,结果我都不知道怎么写了. 接着上节的话,目前是这么个过程: 函数大概是这里: // line-3846 Vue.prototype._rend ...

  9. 京东口红top 30分析

    一.抓取商品id 分析网页源码,发现所有id都是在class="gl-item"的标签里,可以利用bs4的select方法查找标签,获取id: 获取id后,分析商品页面可知道每个商 ...

  10. babel从入门到入门

    babel从入门到入门 来源 http://www.cnblogs.com/gg1234/p/7168750.html 博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3. ...