本帖最后由 游泳的鱼 于 2013-9-3 21:43 编辑
转坛友的一篇关于Grid嵌套Grid的做法,使用了模板列结合ExtJs生成Grid
感谢坛友,原文请看坛友博客:
http://www.cnblogs.com/fendou1986/
1、插入模板列,代码如下。- <x:TemplateField ColumnID="expander" RenderAsRowExpander="true">
- <ItemTemplate>
- <div class="detailData"></div>
- </ItemTemplate>
- </x:TemplateField>
复制代码 2、给这个模板列,绑定一个事件- <p> // 获取Grid的ID
- var gridClientID = '<%= Grid1.ClientID %>';
- var grid = X(gridClientID);
- // 之后点击‘+’号添加希望显示的内容,即调用.on定义的expand事件
- grid.plugins[0].on("expand", function (expander, r, body, rowIndex) {
- //[第三步]... </p><p> // 构造新的子panel
- this._rowPanel = new xg.GridPanel({
- id: 'testgrid',
- store: new Ext.data.Store
- ({
- //autoLoad: {
- // params: {
- // 获取当前行的ID
- // id: grid.x_state.X_Rows.DataKeys[rowIndex]
- // }
- //},
- //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
- reader: new Ext.data.JsonReader
- ({
- root: "data",
- //从数据库中读取的总记录数
- totalProperty: 'totalCount',
- //要读取出来的字段
- fields:
- [
- 'ID', Name, Remark
- ]
- }),
- //获取数据源(该方法返回一个json格式的数据源)
- proxy: new Ext.data.HttpProxy
- ({
- url: '../json/TestHandler.ashx?test=1'
- })
- }),
- //定义GridPanel的列名称
- cm: new Ext.grid.ColumnModel([
- // new Ext.grid.RowNumberer(
- // { header: "编号", width: 80, align: "center" }), //添加一个编号
- // new Ext.grid.CheckboxSelectionModel(), //增加 CheckBox多选框列
- //header列名称,dateIndex对应数据库字段名称,sortable支持排序
- {header: "角色名称", dataIndex: "Name", sortable: true },
- { header: "角色备注", dataIndex: "Remark", sortable: true }
- ]),
- viewConfig: {
- forceFit: true
- },
- stateful: true,
- sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
- autoExpandColumn: true,
- enableColumnHide: true,
- enableColumnMove: true,
- iconCls: 'icon-grid',
- viewConfig: {
- forceFit: true,
- emptyText: '没有满足条件的条目'
- },
- view: this._view,
- autoWidth: true,
- autoHeight: true,
- //最重要的一行,跟上面定义的detailData呼应,将内容渲染到定义了class的当前层。
- renderTo: Ext.DomQuery.select("div.detailData", body)[0]
- });
- });</p>
复制代码 |