写在前面：
对于可移动的列表框，ligerui中也对其进行了封装，可以直接照着demo拿来用，不过那都是直接在页面上静态初始化的数据，那么如何从后台获取？
前面有了对ligerui的一些组件的使用经验后，在这里其实 对于从后台获取数据在前台页面进行显示，都大同小异。也不是很难。
即要么是在ligerui组件中直接使用其url属性向后台发送请求，要么是单独发送一个ajax请求拿到数据后，通过获取组件，然后设置其data属性。嘿嘿。。
下面就直接使用url属性来发送请求吧。。。。。
$(function() {
//初始化8个listBox
Box1 = $("#listBox1").ligerListBox({
isShowCheckBox: true,isMultiSelect: true,height: 140,//发送给后台的请求
url: '${baseURL}/getDeviceByAll.action',});
Box2 = $("#listBox2").ligerListBox({
isShowCheckBox: true,});
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);
}