效果如下
后台传回来是许多存在相同信息的记录,前台显示的时候就需要过滤一下了,否则显得很乱,研究了许多表格分组显示以及合并单元格的而方法,还在论坛看了许多大佬给的js合并单元格方法,发现给GRID进行分组比较简单,由于extgrid元素好像是每行记录一个table,所以此方法不能实现效果,决定用分组。实现方法如下
首先后台得返回正确的json数据
[
{"uid": 375,
"Description": "SN2018120022 合格 AP14组装件",
"BatchNumber": "OL201812060015",
"MaterialQty": 1.0,
"DeductBarCode": "OL201812060015",
"_user": "280",
"_ctime": "2018-12-06 16:15:15",
"CodeNumber": "80100001"
}, {"uid": 375,
"Description": "SN2018120022 合格 AP14组装件",
"BatchNumber": "OL201812060016",
"MaterialQty": 1.0,
"DeductBarCode": "OL201812060016",
"_user": "280",
"_ctime": "2018-12-06 16:15:15",
"CodeNumber": "80100001"}
]
接下来,定义一个store
var SNStore = Ext.create('Ext.data.Store', {
id: 'SNStore',
//选择分组的字段
groupField: 'Description',
proxy: {
url: 'Handler.ashx?action=load',
type: 'ajax',
async: false,
simpleSortMode: true
},
//选择开始读取的根节点
reader: {
type: 'json',
root: 'datas'
},
fields: [
'Description','BatchNumber', 'MaterialQty', 'DeductBarCode', '_user', '_ctime']
});
再定义一个gridpanel
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
//下面设置name就默认显示分组的字段
groupHeaderTpl: '{name}', //print the number of items in the group
Collapsed: false // start all groups collapsed
});
var SNBatch = Ext.create('Ext.grid.Panel',
{
id: 'SNBatch',
title: 'SN及批次信息',
store: Ext.data.StoreManager.lookup('SNStore'),
features: [groupingFeature],
columns: [
{ name: 'txtSN', width: 280, text: 'SN信息', dataIndex: '' },
{ name: 'txtQty', width: 100, text: '数量', dataIndex: 'MaterialQty' },
{ name: 'txtBarcode', width: 150, text: '条码', dataIndex: 'DeductBarCode' },
{ name: 'txtBuckleSN', width: 150, text: '扣料批次', dataIndex: 'BatchNumber' },
{ name: 'txtCollectionPerson', width: 100, text: '采集人员', dataIndex: '_user' },
{ name: 'txtCollectionTime', width: 180, text: '采集时间', dataIndex: '_ctime'}
]
});
如果需要把grid的分组结果进行收起,可在加载完后调用方法
var colla = function () {
Ext.getCmp("SNBatch").getView().features[0].collapseAll();
}
最后把grid载入viewport就可以实现了。
貌似grid还有另一种subtable方法实现,效果更美观,会在后面更新使用方法。
先剧透一下,给大家瞧一瞧官方给的例子的实现效果