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