jqGrid文档
目录
b) 实现多级表头.
c) 冻结行或冻结列.
d) 合并行和和并列.
e) 编辑行.
f) 数据格式化.
1.jQgrid的引入。
Html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
// JqGrid组件基础样式表--必要
<link href="static/public/css/plugins/jqgrid/ui.jqgridffe4.css"rel="stylesheet">
//这个是所有jquery插件的基础，首先第一个引入
<scripttype="text/javascript"src="js/jquery-1.7.1.js"></script>
<script src="static/public/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script>
<script c="static/public/js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script>
</head> <body>
<table id="list2"></table> <div id="pager2"></div>
</body> </html>
Js代码：
//创建jqGrid组件
jQuery("#list2").jqGrid( { url : 'data/JSONData.json', //组件创建完成之后请求数据的url datatype : "json", //请求数据返回的类型。可选json,xml,txt colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
//jqGrid的列显示名字 colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式..... {name : 'id',index : 'id',width : 55}, {name : 'invdate',index : 'invdate',width : 90}, {name : 'name',index : 'name asc, invdate',width : 100}, {name : 'amount',index : 'amount',width : 80,align : "right"}, {name : 'tax',index : 'tax',width : 80,align : "right"}, {name : 'total',index : 'total',width : 80,align : "right"}, {name : 'note',index : 'note',width : 150,sortable : false} ], rowNum : 10, //一页显示多少条 rowList : [ 10, 20, 30 ], //可供用户选择一页显示多少条 pager : '#pager2', //表格页脚的占位符(一般是div)的id sortname : 'id', //初始化的时候排序的字段 sortorder : "desc", //排序方式,可选desc,asc mtype : "post", //向后台请求数据的ajax的类型。可选post,get viewrecords : true, caption : "JSON Example" //表格的标题名字 });
效果展示：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid
2.实现多级表头。
*二级表头
html代码：同上，
js代码：
//创建jqGrid组件，此处省略同上
jQuery("#test2").jqGrid('setGroupHeaders',{
useColSpanStyle: true, //合并后的单元格隐藏
groupHeaders:[
{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]
});
效果图：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/ice_line_title.html
*三级表头
……
3.冻结列。
html代码：同上，
javascript代码：下方标红的为冻结列属性核心
jQuery("#gfrc1").jqGrid({
url:ctx+'/JSONNameData',
datatype: "json",
colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
{name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
{name: 'name', index: 'name', width: 100, frozen : true },
……
],
……
});
jQuery("#gfrc1").jqGrid('setFrozenColumns');
效果图：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/ice_line.html
4.合并行和列。
html代码：同上，
javascript代码：下方标红的为冻结列属性核心
1）在colmodel中为要合并的列添加id标识
cellattr: function(rowId, tv, rawObject, cm, rdata) { /合并单元格 return 'id=\'corpName' + rowId + "\'"; //if (Number(rowId) < 5) { return ' colspan=2' } },
2)设置参数
gridComplete: function() { //②在gridComplete调用合并方法 var gridName = "table_list_1"; Merger(gridName, 'corpName'); }
3）merger函数；合并单元格函数
function Merger(gridName,CellName){ //得到显示到界面的id集合 var mya = $("#" + gridName + "").getDataIDs(); //当前显示多少条 var length = mya.length,a; for (var i = 0; i < length; i++) { //从上到下获取一条信息 var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]); //定义合并行数 var rowSpanTaxCount = 1; for (j = i + 1; j <= length; j++) { //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏 var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]); if (before[CellName] == end[CellName]) { rowSpanTaxCount++; $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' }); } else { rowSpanTaxCount = 1; break; } $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount); } } }
4）合并列只需要适当修改merger函数，不在例举。
效果图：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/merge_line.html
由于数据量过大，jqGrid合并单元格时数据迭代过多，出现页面卡死，页面无响应！解决方案：对合并单元格逻辑代码merger函数进行优化：
functionMergerRow(gridName, CellName) {
//得到显示到界面的id集合
var mya = $("#table_list_1").getDataIDs();
//当前显示多少条
var length = mya.length;
var s = 0;//标记合并行开始的行数
//...省略
//定义合并行数
var rowSpanTaxCount = 1;
//...省略
for (vari = 0; i < length; i++) {
//从上到下获取一条信息
var before = $("#table_list_1").jqGrid('getRowData', mya[i]);
var end = $("#table_list_1").jqGrid('getRowData', mya[i+1]);
(before[CellName] == end[CellName])?(rowSpanTaxCount++,$("#table_list_1").setCell(mya[i+1], CellName, '', { display: 'none' })):(rowSpanTaxCount = 1,s = i+1)
$("#" + CellName + "" + mya[s] + "").attr("rowspan", rowSpanTaxCount);
//...省略
}
}
优化后的代码可以对大量的数据进行合并行操作，不会出现页面卡死的问题！
5.编辑单元格。
html代码：同上，
为了是单元格可以编辑，你需要设置cellEdit参数为true，并且适当的方式取调整colModel参数。
javascript代码：下方标红的为冻结列属性核心。
jQuery("#list2").jqGrid({ url:'data/JSONData.json', datatype: "json", colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], colModel: [ {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date'}, {name: 'amount', index: 'amount', width: 95, align: 'right', editable:true }, {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number',align: 'right',editable:true}, ……省略 ], ……省略 cellEdit: true, //启用或者禁用单元格编辑功能 cellsubmit: 'clientArray', //定义了单元格内容保存位置
cellurl:’../ctx/jsonData’ //单元格提交的url
效果图：只有client，amount，tax可以编辑！！！
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/edit_line.html
6.数据格式化。
html代码：同上，
jqGrid中集成的有格式化数据
number类型的格式;
在colmodel中设置formatter: 'number'；默认的保留两位小数.
Select类型的格式;
在colmodel中设置
edittype:'select',
formatter:’select’,
editoptions:{value:"1:One;2:Two"}}结果是，表格的数据值为1或者2但是现实的是One或者Two。
在colmodel中设置formatter: 'number'；默认的保留两位小数.
同样支持自定义格式化数据
在colmodel中设置formatter为格式化函数
Formatter：function（cellcalue，options，rowObject）{…省略}
效果图：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/formatter.html
扫一扫
4819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
