ExtJS中实现嵌套表格
来源:互联网 发布:学校网络机房管理制度 编辑:程序博客网 时间:2024/06/16 06:03
先看效果:
代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>test</title>
- <script type="text/javascript">
- </script>
- <link rel="stylesheet" type="text/css" href="Lib/ExtJs/2_2/resources/css/ext-all.css" />
- <script type="text/javascript" src="Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="Lib/ExtJs/2_2/ext-all-debug.js"></script>
- <script type="text/javascript" src="Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" src="Lib/ExtJs/plus/RowExpander.js"></script>
- <script type="text/javascript">
- Ext.onReady(function(){
- var testData=[
- ["lugreen","男",26,[["数学",100],["语文",150]]]
- ,["lisi","男",25,[["数学",100],["语文",150]]]
- ,["zhangsan","男",27,[["数学",120],["语文",158]]]
- ];
- //
- storeTest= new Ext.data.SimpleStore({
- fields: ["name","sex","age","grade"]
- ,data: testData
- });
- var expander = new Ext.grid.RowExpander({
- tpl : new Ext.XTemplate(
- '<div class="detailData">',
- '',
- '</div>'
- )
- });
- expander.on("expand",function(expander,r,body,rowIndex){
- //查找 grid
- window.testEle=body;
- //alert(body.id);
- if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
- //alert("a");
- var data=r.json[3];
- var store=new Ext.data.SimpleStore({
- fields: ["class","degrade"]
- ,data:data
- });
- var cm = new Ext.grid.ColumnModel([
- {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
- ,{header: "成绩",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}
- ]);
- Ext.DomQuery.select("div.detailData")[0];
- var grid = new Ext.grid.GridPanel(
- {
- store:store,
- cm:cm,
- renderTo:Ext.DomQuery.select("div.detailData",body)[0],
- autoWidth:true,
- autoHeight:true
- }
- );
- }
- });
- //var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
- var cm = new Ext.grid.ColumnModel([
- expander
- ,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false}
- ,{header: "性别",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
- ,{header: "年龄",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
- ]);
- var grid = new Ext.grid.GridPanel(
- {
- id:'testgrid',
- store:storeTest,
- cm:cm,
- renderTo:"grid1",
- width:780,
- autoHeight:false,
- height:300,
- listeners:{},
- plugins:[expander]
- }
- );
- });
- </script>
- <style type="text/css">
- #div2 h2 {
- font-weight:200;
- font-size:12px;
- }
- .c1 h2 {
- font-weight:200;
- }
- </style>
- </head>
- <body>
- <div id="grid1">
- </div>
- <div id="grid2">
- </div>
- </body>
- </html>
其中使用到的"RowExpander.js"为extjs官方示例中自带的。
实现这个嵌套表格要注意两点技巧:
1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。
- var testData=[
- ["lugreen","男",26,[["数学",100],["语文",150]]]
- ,["lisi","男",25,[["数学",100],["语文",150]]]
- ,["zhangsan","男",27,[["数学",120],["语文",158]]]
- ];
使用数组集中record对象的json属性来获取以细节区数据
var data=r.json[3];
2 在rowExpander的 expand事件中添加嵌套表格.
- ExtJS中实现嵌套表格
- extjs在表格中嵌套combox下拉框
- iOS中表格(UITableView)嵌套表格的简单实现
- ExtJs 表格的实现
- 使用ExtJS5 GridPanel实现表格嵌套SubGrid(基于ExtJS MVC模式)
- 表格嵌套时,即表格中插入表格,边框重叠的两种实现方式
- bootstarp-table表格中嵌套多个BUTON按钮实现
- 表格中嵌套progressbar源码
- extjs 中嵌套iframe 刷新jsp
- EXTJs 实现表格数据显示-----JSON
- 实现类似EXTJS表格插件 Flexgrid.js GridView中使用的记录
- html+css实现多层表格嵌套
- jquery easyui datagrid 实现嵌套表格
- 修改extjs中表格的默认高度
- ExtJs中表格用例代码
- ExtJs表格
- extjs表格
- Extjs中实现分页
- Cookie和Session专题
- admin的下载与安装
- 判断表达式左右括号是否匹配(栈)
- 详解SQL注入
- ERP功能测试
- ExtJS中实现嵌套表格
- WINCE快捷方式详解
- Javascript中的函数,数组和对象
- 关于peekmessage和getmessage
- 今天开始我的CSDN博客生活
- 关于scrclr()和system("clr")
- 配置server.xml指定虚拟目录
- According to TLD or attribute directive in tag file, attribute items does not accep t any expressions
- html中 style 显示属性: display 和 visibility的区别