jqgrid 合并表头

最新推荐文章于 2021-10-15 10:47:01 发布

转载最新推荐文章于 2021-10-15 10:47:01 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvlin241/p/9313021.html

文章标签：

#javascript #php #ViewUI

本文介绍如何使用jQuery插件jqGrid实现表格分组表头功能，通过具体代码示例展示如何配置列名、列模型及分组表头样式，适用于需要复杂数据展示的应用场景。

参考：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar

jQuery("#表格id").jqGrid({
　　...
　　colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
　　colModel: [
　　　　{name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
　　　　{name: 'name', index: 'name', width: 70 },
　　　　{name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
　　　　{name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
　　　　{name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
　　　　{name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
　　　　{name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select', edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
　　　　{name: 'note', index: 'note', width: 70, sortable: false}
],
　　rowNum: 10,
　　rowList: [5, 10, 20],
　　...
});

jQuery("#表格id").jqGrid('setGroupHeaders', {
　　　useColSpanStyle: false,
　　　groupHeaders:[
　　　　　{startColumnName: '开始的标题名称', numberOfColumns: 合并的表头数量, titleText: '<em>合并后的表头名称</em>'},
　　　　　{startColumnName: '开始的标题名称', numberOfColumns: 合并的表头数量, titleText: '合并后的表头名称'}
　　　]
});

转载于:https://www.cnblogs.com/lvlin241/p/9313021.html