气垫cc跟隔离霜的区别:extjs 分组表格
1、Ext.grid.GroupingView
主要配置项:
enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true
groupByText:表头菜单中分组控制的菜单文字,默认为'Group By This Field'
enableNoGroups:是否允许用户关闭分组功能,默认为true
showGroupsText:在表头菜单中启用分组和禁用分组的菜单文字,默认为'Show in Groups'
groupTextTpl:用于渲染分组信息的模板,默认为'{text}',常用的可选值有:
text:列标题:组字段值
gvalue:组字段的值
startRow:组行索引
enableGrouping:是否对数据分组,默认为true
hideGroupedColumn:是否隐藏分组列,默认为false
ignoreAdd:在向表格中添加数据时是否刷新表格,默认为false
showGroupName:是否在分组行上显示分组字段的名字,默认为true
startCollapsed:初次显示时分组是否处于收缩状态,默认为false
主要方法:
collapseAllGroups():收缩所有分组行
expandAllGroups():展开所有分组行
getGroupId( String value ):根据分组字段值取得组id
toggleAllGroups( [Boolean expanded] ):切换所有分组行的展开或收缩状态
toggleGroup( String groupId, [Boolean expanded] ):切换指定分组行的展开或收缩状态
groupField:分组字段
groupOnSort:是否在分组字段上排序,默认为false
remoteGroup:是否远程分组数据,默认为false。如果是远程分组数据,则通过groupBy参数发送分组字段名
var inloaderclumn = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //获得行号
{ header: "单据编号", dataIndex: "s_id", sortable: true
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "入库时间", dataIndex: "get_in_time", sortable: true,
renderer: function (val) { return new Date(parseInt(val.substring(6, val.length - 2))).format('yyyy年MM月dd日') }
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "货物编码", dataIndex: "code", sortable: true, hideable: false
// summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "货物名称", dataIndex: "name", sortable: true //summaryType: 'count', //分组类型,还有:average,sum,max,totalCost
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "规格及型号", dataIndex: "spec", sortable: true //summaryType: 'count', //分组类型,还有:average,sum,max,totalCost
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "单位", dataIndex: "unit", sortable: true //summaryType: 'count', //分组类型,还有:average,sum,max,totalCost
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "单价", dataIndex: "unit_price", sortable: true //summaryType: 'count', //分组类型,还有:average,sum,max,totalCost
//summaryRenderer: function(v, params, data){
//return '—';
//}
},
{ header: "入库量", dataIndex: "act_number", sortable: true
//summaryType:'sum'
}
]);
_filed01 = ["get_in_sid","s_id", "get_in_time", "code", "name","spec","unit","unit_price","maxValue","minValue","sid","pur_number","act_number","amount","id","state"]
//store
var inload_sore = new Ext.data.GroupingStore({
url: 'ashx/get_in_lis_store.ashx',
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
remoteSort: true,
fields: _filed01
}),
sortInfo: { field: 'id', direction: 'ASC' },
groupField: ['code']
});
var _pageSize02 = 25; //每页显示条数
inload_sore.load({ params: { action: "inloader", start: 0, limit: _pageSize02} });//分页状态
var inlodertbar = new Ext.PagingToolbar({
store: inload_sore,
pageSize: _pageSize02,
//显示右下角信息
displayInfo: true,
emptyMsg: "暂无"
});
var person = Ext.data.Record.create([
{name: "s_id", mapping: 0},
{name: "get_in_time", mapping: 1},
{name: "code", mapping: 2},
{name: "name", mapping: 3},
{name: "act_number", mapping: 4}
]); //grid
inloadgrid = Ext.extend(Ext.grid.GridPanel, {
constructor: function () {
inloadgrid.superclass.constructor.call(this, {
store: inload_sore,
cm :inloaderclumn,
layout: 'fit',
autoHeight: true,
//collapsible: true,
//animCollapse: false,
view: new Ext.grid.GroupingView({
sortAscText: "升序",
sortDescText: "降序",
columnsText: "表格字段",
groupByText: "使用当前字段进行分组",
showGroupsText: "表格分组",
groupTextTpl: "{text}(共{[values.rs.length]}条)",
forceFit:true//单元格自动填充
}),
bbar:inlodertbar,
autoScroll:true
//autoExpandColumn:'action'
})
}
});
//-------------------------grid---------------------------*
//--------------------容器panel---------------------
inloaderpanel = Ext.extend(Ext.Panel, {
_inloadgri: null,
constructor: function () {
this._inloadgri = new inloadgrid();
inloaderpanel.superclass.constructor.call(this, {
anchor: "100%,100%",
border: false,
renderTo: "inloadercontent",
items:this._inloadgri
})
}
}); 注意事项:在写代码过程中注意 groupField:'code' 这里写法可以写成groupField:['code' ].;但是这样一写能出来。但是问题就会出现点击收拢分组行的时候就会出现报错。。什么该对象不支持此属性。。