(转)FineUI之嵌套表格 - FineUI 官方论坛

<x:TemplateField ColumnID="expander" RenderAsRowExpander="true">
<ItemTemplate>
<div class="detailData"></div>
</ItemTemplate>
</x:TemplateField>

复制代码

<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>

复制代码

listeners: {
mouseover: function (e) {
e.stopEvent();
},
rowmousedown: function (g, r, e) {
e.stopEvent();
}
},

复制代码