ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例-CSDN博客

本文链接：https://blog.csdn.net/IBM_hoojo/article/details/5823924

本文介绍如何使用ExtJS实现带有中文排序、分组、行展开等功能的Grid面板，并通过自定义样式来改变行和单元格的背景色及字体颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

look：按照国家分组的，其中还按照中文排序及Expand插件、分组修改单元格、行背景色、字体颜色

Ext.hoo.grid.ConformityGrid.js

/*** * grid基础综合案例 * 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、 * Ext.data.GroupingStore分组（GroupingStore继承Store的）、 * 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧 * 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的 * 添加Ext.grid.GroupingView的groupTextTpl方法的使用 * author: hoojo * create by: 2010-8-14 */ Ext.ns("Ext.hoo.grid"); Ext.hoo.grid.ConformityGrid = Ext.extend(Ext.grid.GridPanel, { //expander: null, constructor: function () { this.data = [ [1, "奥巴马", 48, "美国", "好像是美国总统"], [3, "布朗", 20, "美国", "很常见的名字"], [5, "次郎", 22, "日本", "据说是武大郎赐给的名称"], [2, "多尔衮", 159, "中国", "差点历史就被改写"], [4, "厄洛斯", 34, "英国", "不知哪里来的"], [6, "弗莱德", 25, "美国", "和弗兰德很像"], [8, "哥萨克", 24, "英国", "是萨克斯的弟弟么"], [23, "汉德森", 48, "美国", "好像是部电影的主角"], [13, "杰克", 20, "美国", "电影中常出现的配角名称"], [15, "卡尔", 22, "美国", "是小时候看动画片的那个瘦猫，胖子是BC"], [12, "露丝", 159, "英国", "很常见的名称"], [14, "玛丽卡", 34, "美国", "这个名称好像不错哦"], [16, "妮娜", 25, "美国", "在中国有叫‘妮’、‘娜’的，‘妮娜’不多见"], [18, "欧德桑", 24, "英国", "Good Success!"] ], this.store = new Ext.data.GroupingStore({ proxy: new Ext.data.PagingMemoryProxy(this.data),//后台分页只须将proxy改为url: "your url", reader: new Ext.data.ArrayReader({}, [ {name: "id", type: "int", mapping: 0}, "name", "age", "country", "origin" ]), sortInfo: {field: "name", direction: "asc"}, groupField: "country" }), this.expander = new Ext.grid.RowExpander({ tpl : new Ext.Template( '你是: {name} ', '评价: {origin}' ) }), Ext.hoo.grid.ConformityGrid.superclass.constructor.call(this, { renderTo: Ext.getBody(), title: "可按中文排序的Grid/改变行背景/单元格背景/字体颜色", height: 450, width: 600, frame: true, autoScroll: true, plugins: this.expander, autoExpandColumn: "age", columns: [this.expander, { header: "编号", dataIndex: "id", sortable: true }, { header: "名称", dataIndex: "name", sortable: true }, { header: "年龄", dataIndex: "age", sortable: true, renderer: this.onRenderAgeCol }, { header: "国家", dataIndex: "country", sortable: true }], sm: new Ext.grid.RowSelectionModel({singleSelect: true}), bbar: new Ext.PagingToolbar({ store: this.store, pageSize: 8, displayInfo: true, displayMsg: "显示{0}条到{1}条记录，总共{2}条记录", emptyMsg: "没有数据记录" }), view: new Ext.grid.GroupingView({ forceFit:true, autoFill: true, groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "人" : "人"]})-记录[{startRow}]'/*,startRow是行索引 //如果不用Ext.grid.RowExpande插件，这里才有效果，在用插件的情况下改变行背景颜色需要覆盖插件中的getRowClass方法 getRowClass: function(record, index, rowParams, store) { if (index % 2 == 0) { return 'rowEven'; } else { return 'rowOdd'; } }*/ }) }); this.store.load({params: {start: 0, limit: 8}}); }, /** * 列渲染器方法，在grid渲染的时候执行 * @param value 当前列的值 * @param metaData 当前列的css样式 * @param record 当前列的record记录 * @param rowIndex 行索引 * @param colIndex 当前列索引 * @param store 当前grid的store */ onRenderAgeCol: function (value, metaData, record, rowIndex, colIndex, store) { if (rowIndex == 2) {//改变第四行的当前单元格背景颜色 metaData.attr = 'style="color: white; background-color: #A9C9E2;"';//添加style样式 } else if (value > 40) { metaData.attr = 'style="color: red;"'; metaData.css = "cellBG";//添加class样式 } if (rowIndex > 2) { return "<a href='http://blog.csdn.net/IMB_hoojo' target='_blank'>【" + value + "】-【" + record.get("name") + "】-【" + store.getAt(0).data.name + "】</a>"; } else if (rowIndex == 1) { metaData.cellAttr = "style='background-color: white; color: green;'";//不兼容firefox return value; } else { return value; } } }); /** * 重写（覆盖）applySort方法 * 按照拼音字母进行排序 */ Ext.override(Ext.data.Store, { applySort: function () { if (this.sortInfo && !this.remoteSort) { var s = this.sortInfo; var f = s.field; var st = this.fields.get(f).sortType; var fn = function (r1, r2) { var v1 = st(r1.data[f]); var v2 = st(r2.data[f]); if (typeof(v1) == "string") { return v1.localeCompare(v2); } return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); }; this.data.sort(s.direction, fn); if (this.snapshot && this.snapshot != this.data) { this.snapshot.sort(s.direction, fn); } } } }); /* 也可以下面这样写； Ext.data.Store.prototype.applySort = function () { };*/ Ext.override(Ext.grid.RowExpander, { getRowClass: function(record, rowIndex, rowParams, store) { rowParams.cols = rowParams.cols-1; var content = this.bodyContent[record.id]; if(!content && !this.lazyRender){ content = this.getBodyContent(record, rowIndex); } if(content){ rowParams.body = content; } if (rowIndex % 2 == 0) { return this.state[record.id] ? 'x-grid3-row-expanded rowEven' : 'x-grid3-row-collapsed rowEven';//添加样式rowEven } else { return this.state[record.id] ? 'x-grid3-row-expanded rowOdd' : 'x-grid3-row-collapsed rowOdd';//添加样式rowOdd } } }); Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif"; var grid = new Ext.hoo.grid.ConformityGrid(); });