使用 jQuery MiniUI 实现 mini-combox 跨页多选,可以按照以下步骤进行:
1. 引入 jQuery 和 MiniUI 的相关文件:
```html
<script src="jquery.min.js"></script>
<script src="miniui/miniui.js"></script>
<link href="miniui/themes/default/miniui.css" rel="stylesheet" />
<link href="miniui/themes/icons.css" rel="stylesheet" />
```
2. 创建 mini-combox 组件并设置相关属性:
```html
<input id="myCombox" name="myCombox" class="mini-combobox" value="" showNullItem="true" popupWidth="250" onvaluechanged="onValueChanged" />
```
其中,`onvaluechanged` 属性绑定了一个回调函数,用于在用户选择选项后更新选择结果。
3. 在 JavaScript 中初始化 mini-combox 组件并设置数据源:
```javascript
$(function() {
var myCombox = mini.get("myCombox");
myCombox.setData([{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }]);
});
```
其中,`setData` 方法用于设置 mini-combox 的数据源。
4. 实现多页加载和多选功能:
```javascript
var pageSize = 5; // 每页显示的选项数
var selectedItems = []; // 保存用户选择的选项
function onValueChanged(e) {
// 当用户选择一个选项时触发
var item = e.selected;
if (item) {
// 如果选项还没有被选择过,则添加到选择结果列表中
if ($.inArray(item.id, selectedItems) == -1) {
selectedItems.push(item.id);
}
} else {
// 如果选项已经被选择过,则从选择结果列表中移除
var index = $.inArray(e.value, selectedItems);
if (index >= 0) {
selectedItems.splice(index, 1);
}
}
}
function loadPage(pageIndex) {
// 加载指定页的选项并更新 mini-combox 的数据源
var start = pageIndex * pageSize;
var end = start + pageSize;
var data = [{ id: -1, text: "全部" }].concat(selectedItems.map(function(id) { return { id: id, text: "选项" + id }; })).concat(myData.slice(start, end));
var myCombox = mini.get("myCombox");
myCombox.setData(data);
}
$(function() {
var myData = [{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }];
// 初始化 mini-combox 组件
var myCombox = mini.get("myCombox");
myCombox.set({
pageSize: pageSize,
onbeforeload: function(e) {
var pageIndex = e.pageIndex;
loadPage(pageIndex);
e.cancel = true; // 取消默认的数据加载方式
}
});
loadPage(0);
});
```
其中,`loadPage` 方法用于加载指定页的选项并更新 mini-combox 的数据源。`selectedItems` 数组保存用户选择的选项,其中的元素为选项的 ID。在 `onValueChanged` 回调函数中,每当用户选择或取消一个选项时,都会更新 `selectedItems` 数组,并调用 `loadPage` 方法重新加载 mini-combox 的数据源。同时,为了实现多选功能,需要在每个选项前面添加一个复选框,并在选择结果列表中保存用户选择的所有选项。