ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧

简介:

这里藏的配置确实多。。

慢慢实践吧。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<! DOCTYPE html>
< html >
< head >
     < title >ExtJs</ title >
         < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
         < script type="text/javascript" src="ExtJs/ext-all.js"></ script >
         < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >
         < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >
 
     < style type="text/css">
       #uses the following css:
       .red-row{ background-color: #F5C0C0 !important; }
       .yellow-row{ background-color: #FBF8BF !important; }
       .green-row{ background-color: #99CC99 !important; }
     </ style >
 
     < script type="text/javascript">
     Ext.onReady(function(){
       function rendererDescn(value, cellmeta, record, rowIndex, columnIndex, store){
         var str = "< input type='button' value='查看详细信息' onclick='alert(\"" +
         "这个单元格的值为: " + value + "\\n" +
         "这个单元格的配置是: {cellID" + cellmeta.cellID + ", id: " + cellmeta.id + ", css: " + cellmeta.css + "}\\n" +
         "这个单元格对应的record是: " + record + ", 一行里的数据都在里边\\n" +
         "这是第" + rowIndex + "行\\n" +
         "这是第" + columnIndex + "列\\n" +
         "这个表格对应的Ext.data.Store在这里: " + store + ", 随便用吧." +
         "\")'>"
         return str;
       }
 
       var sm = new Ext.selection.CheckboxModel({stringSelect: true});
 
 
       var columns =[
         new Ext.grid.RowNumberer(),
         {header: '编号', dataIndex: 'id', width:80, sortable: false},
         {header: '名称', dataIndex: 'name', editor: {allowBlank: false}, width:180},
         {header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
 
       ];
 
       var store = new Ext.data.ArrayStore({
         proxy: {
           type: 'ajax',
           url: 'source.html',
           reader: {
             type: 'json',
             totalProperty: 'totalProperty',
             root: 'root',
             idProperty: 'id'
           }
         },
         groupField: 'id',
         sorter: [{property: 'id', direction: 'ASC'}],
         fields: [
           {name: 'id'},
           {name: 'name'},
           {name: 'descn'}
         ]
       });
 
 
       var grid = new Ext.grid.GridPanel({
         enableColumnMove: false,
         enableColumnResize: true,
         stripeRows: true,
         autoHeight: true,
         loadMask:true,
         forceFit: true,
         renderTo: 'grid',
         store: store,
         columns: columns,
         selModel: sm,
         features: [{ftype: 'grouping'}],
         plugins: [
           Ext.create('Ext.grid.plugin.CellEditing', {
             clicksToEdit: 1
           })
         ],
         tbar: ['-',{
           text: '增加一行',
           handler: function(){
             var p = {
               id: '',
               name: '',
               descn: '',
             };
             store.insert(0, p);
           }
         }, '-', {
           text: '删除一行',
           handler: function() {
             Ext.Msg.confirm('notice', 'are you sure delete?', function(btn){
               if(btn == 'yes'){
                 var sm = grid.getSelectionModel();
                 var record = sm.getSelection()[0];
                 store.remove(record);
               }
             });
           }
         }, '-'],
         bbar: new Ext.PagingToolbar({
           pageSize: 30,
           store: store,
           displayInfo: true,
           displayMsg: '显示第{0} 条到 {1}条记录, 一共{2}条',
           emptyMsg: '没有记录'
         })
       });
       store.load();
 
       var grid2 = new Ext.grid.PropertyGrid({
         title: '属性表格',
         autoHeight: true,
         width:300,
         renderTo: 'grid2',
         viewConfig: {
           forceFit: true
         },
         source: {
           '名字': '不告诉你',
           '创建时间': new Date(),
           '是否有效': false,
           '版本号': .01,
           '描述': '嗯,我也没啥可描述的'
         }
       });
     });
     </ script >
</ head >
< body style="margin: 20px">
   < div id='grid' style="width: 800px"></ div >
   < div id='grid2' style="width: 800px"></ div >
</ body >
</ html >

  

目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
36 0
|
2天前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
6月前
|
JavaScript
jqGrid数据列表和表单的列隐藏/显示
jqGrid数据列表和表单的列隐藏/显示
|
6月前
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法
152 0
|
7月前
|
JavaScript 前端开发 Java
71jqGrid 分组表头 - 没有合并列的样式
71jqGrid 分组表头 - 没有合并列的样式
16 0
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
555 0
Element-ui 表格 (Table) 组件中动态合并单元格
|
JavaScript 测试技术 Python
Easyui datagrid 实现表格记录拖拽
Easyui datagrid 实现表格记录拖拽
135 0
|
存储 前端开发 数据库
el-table表格拖动列记住列宽度功能(刷新页面还在)
el-table表格拖动列记住列宽度功能(刷新页面还在)
284 0
PyQt5 技术篇-QTableWidget表格组件的行选择与列选择实例演示,表格组件的双击事件捕获,获取表格选中单元格的值
PyQt5 技术篇-QTableWidget表格组件的行选择与列选择实例演示,表格组件的双击事件捕获,获取表格选中单元格的值
1065 0
PyQt5 技术篇-QTableWidget表格组件的行选择与列选择实例演示,表格组件的双击事件捕获,获取表格选中单元格的值
|
JavaScript 前端开发 数据格式
ExtJS 6 gridPanel绘制表格并填充数据的例子
Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:View + Store + Model使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI View部分的代码 Ext.
3032 0