FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 6376|回复: 9
打印 上一主题 下一主题

(转)FineUI之嵌套表格

[复制链接]
跳转到指定楼层
楼主
发表于 2013-9-3 21:29:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 游泳的鱼 于 2013-9-3 21:43 编辑

转坛友的一篇关于Grid嵌套Grid的做法,使用了模板列结合ExtJs生成Grid

感谢坛友,原文请看坛友博客:
http://www.cnblogs.com/fendou1986/

1、插入模板列,代码如下。
  1. <x:TemplateField ColumnID="expander" RenderAsRowExpander="true">
  2.                     <ItemTemplate>
  3.                           <div class="detailData"></div>
  4.                     </ItemTemplate>
  5.                     </x:TemplateField>
复制代码
2、给这个模板列,绑定一个事件
  1. <p> // 获取Grid的ID
  2.    var gridClientID = '<%= Grid1.ClientID %>';
  3.    var grid = X(gridClientID);
  4.    // 之后点击‘+’号添加希望显示的内容,即调用.on定义的expand事件
  5.    grid.plugins[0].on("expand", function (expander, r, body, rowIndex) {
  6. //[第三步]...   </p><p> // 构造新的子panel
  7.                  this._rowPanel = new xg.GridPanel({
  8.                      id: 'testgrid',
  9.                      store: new Ext.data.Store
  10.                         ({
  11.                             //autoLoad: {
  12.                             //    params: {
  13.                             // 获取当前行的ID
  14.                             //        id: grid.x_state.X_Rows.DataKeys[rowIndex]
  15.                             //    }
  16.                             //},
  17. //读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
  18.                             reader: new Ext.data.JsonReader
  19.                             ({
  20.                                 root: "data",
  21.                                 //从数据库中读取的总记录数
  22.                                 totalProperty: 'totalCount',
  23.                                 //要读取出来的字段
  24.                                 fields:
  25.                             [
  26.                                 'ID', Name, Remark
  27.                             ]
  28.                             }),
  29.                             //获取数据源(该方法返回一个json格式的数据源)
  30.                             proxy: new Ext.data.HttpProxy
  31.                             ({
  32.                                 url: '../json/TestHandler.ashx?test=1'
  33.                             })
  34.                         }),
  35.                      //定义GridPanel的列名称
  36.                      cm: new Ext.grid.ColumnModel([
  37.                      //  new Ext.grid.RowNumberer(
  38.                      //  { header: "编号", width: 80, align: "center" }), //添加一个编号
  39.                         //  new Ext.grid.CheckboxSelectionModel(), //增加 CheckBox多选框列
  40.                          //header列名称,dateIndex对应数据库字段名称,sortable支持排序
  41.                         {header: "角色名称", dataIndex: "Name", sortable: true },
  42.                         { header: "角色备注", dataIndex: "Remark", sortable: true }
  43.                         ]),
  44.                      viewConfig: {
  45.                          forceFit: true
  46.                      },
  47.                      stateful: true,
  48.                      sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
  49.                      autoExpandColumn: true,
  50.                      enableColumnHide: true,
  51.                      enableColumnMove: true,
  52.                      iconCls: 'icon-grid',
  53.                      viewConfig: {
  54.                          forceFit: true,
  55.                          emptyText: '没有满足条件的条目'
  56.                      },
  57.                      view: this._view,
  58.                      autoWidth: true,
  59.                      autoHeight: true,
  60.                      //最重要的一行,跟上面定义的detailData呼应,将内容渲染到定义了class的当前层。
  61.                     renderTo: Ext.DomQuery.select("div.detailData", body)[0]
  62.                          });
  63.                     });</p>
复制代码
沙发
发表于 2013-9-4 09:56:11 | 只看该作者
本帖最后由 奋斗~ 于 2013-9-4 10:13 编辑
  1.   listeners: {
  2.                          mouseover: function (e) {
  3.                              e.stopEvent();
  4.                          },
  5.                          rowmousedown: function (g, r, e) {
  6.                              e.stopEvent();
  7.                          }
  8.                      },
复制代码
再补充一点:上面的代码一定要追加,要不然主表格和子表格选择的时候,会有冲突,如有问题在联系我吧;552847957@qq.com,效果图如下:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
板凳
发表于 2013-9-4 09:59:10 | 只看该作者
给点截图效果,看着直观
地板
发表于 2013-9-4 10:13:54 | 只看该作者
sanshi 发表于 2013-9-4 09:59
给点截图效果,看着直观

老大,已经截图了....
5#
发表于 2013-9-6 00:27:34 | 只看该作者
奋斗~ 发表于 2013-9-4 10:13
老大,已经截图了....

能不能给我发一份示例代码啊。再次感谢。还有个问题表格的绑定是根据Grid行的Key吗?
邮箱:freebirdwww@163.com
6#
发表于 2013-9-6 08:24:24 | 只看该作者
是根据grid当前行的key
     // 获取当前行的ID
     //  id: grid.x_state.X_Rows.DataKeys[rowIndex]
7#
发表于 2013-9-6 09:06:59 | 只看该作者
多谢分享,作个记号
8#
发表于 2013-9-6 09:20:01 | 只看该作者
能上传个简单示例?在哪绑定一个事件,怎样获取数据源(该方法返回一个json格式的数据源)。初学
9#
发表于 2013-9-6 09:32:53 | 只看该作者
希望能上传示例。或者增加到在线示例中
10#
发表于 2015-7-30 14:41:02 | 只看该作者
grid.plugins[0].on("expand", function (expander, r, body, rowIndex)这里为何总是报Cannot read property 'plugins'
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-1 07:12 , Processed in 0.047707 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表