English
资源说明：ligerUI ListBox可移动的实例详解
ligerUI ListBox是一个功能强大且灵活的列表框控件，它可以满足复杂的数据展示和交互需求。在本文中，我们将详细介绍ligerUI ListBox的使用方式和实现可移动的实例。
一、ligerUI ListBox的基本使用
ligerUI ListBox是一个jQuery插件，它可以轻松地将列表框控件集成到Web页面中。使用ligerUI ListBox，可以轻松地实现列表框的基本功能，如选择、多选、排序等。
我们需要在HTML页面中添加一个容器元素，用于承载列表框控件。例如：
然后，我们可以使用JavaScript代码来初始化列表框控件：
```
$(function() {
box1 = $("#listbox1").ligerListBox({
isShowCheckBox: true,
isMultiSelect: true,
height: 140
});
});
```
上面的代码将初始化一个列表框控件，具有多选和复选框的功能，并且高度为140px。
二、从后台获取数据
在实际应用中，我们通常需要从后台获取数据，然后将其展示在前台页面中。ligerUI ListBox提供了多种方式来实现数据的获取。
我们可以使用url属性来发送请求，从后台获取数据。例如：
```
box1 = $("#listbox1").ligerListBox({
isShowCheckBox: true,
isMultiSelect: true,
height: 140,
url: '${baseURL}/getDeviceByAll.action'
});
```
上面的代码将发送一个请求到后台，获取设备列表，然后将其展示在列表框中。
我们也可以使用ajax请求从后台获取数据，然后将其设置到列表框中。例如：
```
$.ajax({
type: 'post',
url: '${baseURL}/getDeviceByAll.action',
dataType: 'json',
success: function(data) {
box1.setData(data);
}
});
```
上面的代码将发送一个ajax请求到后台，获取设备列表，然后将其设置到列表框中。
三、可移动的实例
在实际应用中，我们常常需要实现列表框的可移动性，即可以在两个列表框之间移动项。ligerUI ListBox提供了多种方式来实现可移动性。
我们可以使用removeItem和addItem方法来实现列表框的可移动性。例如：
```
function moveToLeft1() {
var selecteds = box2.getSelectedItems();
if (!selecteds || !selecteds.length) return;
box2.removeItems(selecteds);
box1.addItems(selecteds);
}
```
上面的代码将移除box2中的选定项，然后将其添加到box1中。
我们可以使用moveAllToLeft和moveAllToRight方法来实现列表框的可移动性。例如：
```
function moveAllToLeft1() {
var selecteds = box2.data;
if (!selecteds || !selecteds.length) return;
box1.addItems(selecteds);
box2.removeItems(selecteds);
}
```
上面的代码将将box2中的所有项移除，然后将其添加到box1中。
ligerUI ListBox是一个功能强大且灵活的列表框控件，它可以满足复杂的数据展示和交互需求。通过使用ligerUI ListBox，我们可以轻松地实现列表框的基本功能和可移动性。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
