jQuery MiniUI 开发教程 表格控件 表格:合并单元格(十七)

[b]表格:合并单元格[/b]
[img]http://www.miniui.com/docs/api/images/mergecells.png[/img]

参考示例:[url=http://www.miniui.com/demo/datagrid/mergecells.html]合并单元格[/url]

调用方法:margeCells。如下代码:
grid.on("load", onLoad);
function onLoad(e) {
var grid = e.sender;

var marges = [
{ rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
];

grid.margeCells(marges);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 jQuery MiniUI 实现 mini-combox 跨页多选,可以按照以下步骤进行: 1. 引入 jQueryMiniUI 的相关文件: ```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 的数据源。同时,为了实现多选功能,需要在每个选项前面添加一个复选框,并在选择结果列表中保存用户选择的所有选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值