ExtJS4 表格的嵌套 rowExpander

今天做一个grid,里面的数据须要带明细,思来想去还是搞个表格嵌套吧!看下图

对于grid中每一条记录点击左边的+号能展开一个明细的子表格 全部数据包含列名均从后台获得,子表格的数据临时在本地以做測试

在此贴一些代码留下记录

function displayInnerGrid(renderId) {

    //Model for the inside grid store
    Ext.define(‘TestModel‘, {
        extend: ‘Ext.data.Model‘,
        fields: [
            { name: ‘Field1‘ },
            { name: ‘Field2‘ },
            { name: ‘Field3‘ }
        ]
    });

    //dummy data for the inside grid
    var dummyDataForInsideGrid = [
        [‘a‘, ‘a‘, ‘a‘],
        [‘b‘, ‘b‘, ‘b‘],
        [‘c‘, ‘c‘, ‘c‘]

    ];

    var insideGridStore = Ext.create(‘Ext.data.ArrayStore‘, {
        model: ‘TestModel‘,
        data: dummyDataForInsideGrid
    });

    innerGrid = Ext.create(‘Ext.grid.Panel‘, {
        store: insideGridStore,
        selModel: {
            selType: ‘cellmodel‘
        },
        columns: [
            { text: "明细1", dataIndex: ‘Field1‘ },
            { text: "明细2", dataIndex: ‘Field2‘ },
            { text: "明细3", dataIndex: ‘Field3‘ }
        ],
        columnLines: true,
        autoWidth: true,
        autoHeight: true,
        //width: 400,
        //height: 200,
        frame: false,
      //  iconCls: ‘icon-grid‘,
        renderTo: renderId
    });

   /*  innerGrid.getEl().swallowEvent([
                ‘mousedown‘, ‘mouseup‘, ‘click‘,
                ‘contextmenu‘, ‘mouseover‘, ‘mouseout‘,
                ‘dblclick‘, ‘mousemove‘
            ]); */

}

  function destroyInnerGrid(record) {

    var parent = document.getElementById(record.get(‘id‘));
    var child = parent.firstChild;

    while (child) {
        child.parentNode.removeChild(child);
        child = child.nextSibling;
    }

}
grid_huizong.view.on(‘expandBody‘, function (rowNode, record, expandRow, eOpts) {
	//console.log(record.get(‘id‘));
        displayInnerGrid(record.get(‘id‘));
    });

    grid_huizong.view.on(‘collapsebody‘, function (rowNode, record, expandRow, eOpts) {
        destroyInnerGrid(record);
    });

以上代码为grid绑定事件。。详细代码啥意思应该能看懂

注意在定义grid的时候使用

plugins: [{
        ptype: ‘rowexpander‘,
        rowBodyTpl : [
                ‘<div id="{id}">‘,
                ‘</div>‘
            ]
		}],

这个是rowexpander插件。。网上有人说用的时候须要引用,可是我没引用什么也能够用了?

注意上面三段代码中关键的id,这个id你能够改,可是须要改成后台发过来的数据中fields中的第一项。。我这个样例后台发过来的fields第一项是id

最后给一个我參考的链接  这里

时间: 2024-10-10 02:37:06

ExtJS4 表格的嵌套 rowExpander的相关文章

ExtJS4.2实例:表格Grid嵌套(内部Grid)-MVC模式

前文ExtJS4.2 Grid嵌套实例中讲解了如何在表格Grid中嵌套Grid,即外部Grid中每行分别展现为不同的内部Grid,比如常见的费用报销业务,费用类别有往返车费和住宿费,其中往返车费需要填写往返类型.交通工具.费用日期.出发地.目的地和金额,住宿费只需填写入住日期.离开日期.单价和金额,在一个表格中包含多种费用类别,每个费用类别下又有多条明细,所需实现的业务场景图片如: 在线演示  /  示例代码 由于前文未采用MVC模式来组织代码,代码可读性不强,本文将在前文基础上按照MVC模式来

iOS中表格(UITableView)嵌套表格的简单实现

iOS中表格(UITableView)嵌套表格的简单实现 首先说一下思路:我们在一个控制器里面定义2个tableview,一个作为被嵌套的rootTable,一个作为嵌套的表格tableView1,那我们要实现UITableViewDelegate,UITableViewDataSource,的代理的时候,该怎么区分呢?其实很简单,有两种方法,一个是给定义的2个tableview设置tag值,另一个是直接写出来tableView == rootTable时实现他得代理,否则就实现tableVie

ExtJS4.2 Grid嵌套实例

ExtJS4.2 Grid嵌套实例,实现工作中常见的费用报销,费用类别:往返车费/出租车费/住宿费/出差补贴.这四种费用类别分别要录入不同的项目,如下图: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7919.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/nested-grid/nested-grid.html ExtJS4.2 Grid嵌套实例

bootstarp-table表格中嵌套多个BUTON按钮实现

bootstarp-table表格中嵌套多个BUTON按钮实现 有时我们需要在bootsharp-table表格中嵌套多个按钮,来实现不同的功能,大概界面如下: 实现功能如下: 1:构建表格 中间部分字段已删除. visible: false  该列隐藏,界面不显示 events: operateEvents :给按钮注册事件 formatter: operateFormatter:表格中增加按钮 1 $("#TbRoleList").bootstrapTable({ 2 url: &

[Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

本文将演示如何在表格中嵌套另一个表格并使Cell的高度自适应,创建更加强大的布局效果. 在项目文件夹[DemoApp]上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Touch Class]->[Next]-> [Class]:CustomizeUITableViewCell ,类名. [Subclass of]:UITableViewCell ,父类 [Language]:Swift ->[Next]->[Create]在项目导航区,打开刚刚创建的代码

表格table嵌套,边框合并问题

[问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题. [解决办法]: 外表格样式: <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;”> 内表格样式: <table border="1"

表格里嵌套表格

例如 tabale的格式是<table></table>成对出现的,表格内部要有<tr></tr>表示一行,<tr></tr>内要有<td></td>表示一列,因为有个行,所以列确定了就定下来那个格子.例如<table><tr><td> </td><td> </td></tr></table>就是个一行两列的表格,如

Dreamweaver表格的嵌套

来源:网络整理|作者:佚名更新时间:2008-4-7 在这个例子中,下面部分是一个大表格,这个表格共有三行两列,一些单元格中还插入了一个新的表格. 下面我们开始制作,先在第二个表格下插入一个三行两列,宽为590Pixels的表格. 先看看这条红线是怎么做出来的.在第一行第一个单元格内单击,然后向右拖动鼠标,将第一行的两个单元格选中,按下M键 ,选中的单元格被合并为一个单元格(图1). 图1 合并单元格 在属性面板中,设置此行高度H为1,背景颜色为红色. 再按下Ctrl+Tab键,调出HTML源代

Java 在Word中添加表格、嵌套表格

表格作为一种可视化交流模式及组织.整理数据的方法,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.嵌套表格.写入文字及格式化表格样式等.下面,将通过Java编程在Word文档中创建表格并实现格式化操作,包括设置字体.字号.字体颜色.字体粗细等,设置单元格对齐方式.单元格背景色.单元格合并/拆分.表格边框样式.插入图片等等. 使用工具:Free Spire.Doc for Java (免费版)Jar文件获取及导入:方法1:通过官网下载文件包.下载后,解压文