使用extjs做的一个简单grid

最新推荐文章于 2024-05-24 13:39:19 发布

chesui1874

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量58

点赞数

文章标签： javascript java ViewUI

原文链接：https://my.oschina.net/u/3724493/blog/1570353

版权

 1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <title>grid</title>
 6 <link rel="stylesheet" type="text/css" href="/ext/system/resources/css/ext-all.css" />
 7 <script type="text/javascript" src="/ext/system/ext-all.js"> </script>
 8 </head>
 9 <body>
10 <div id="grid"></div>
11 <script type="text/javascript">
12 Ext.onReady(function(){
13     // 定义列
14     var columns = [
15         {header:'编号',dataIndex:'id',sortable:false}, // sortable:true 默认
16         {header:'名称',dataIndex:'name',renderer:function(value){
17             if (value == '张三' || value == '李四') {
18                 return '<span style="color:green;font-weight:bold;">好人</span>';
19             } else {
20                 return '<span style="color:red;font-weight:bold;">坏人</span>';
21             }
22         }},
23         {header:'描述',dataIndex:'desc',renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
24             var str="<input type='button' value='查询详细信息' onclick='alert(\"" +
25                 "这个单元格的值是："+value +"n"+
26                 "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+
27                 "这个单元格对应行的record是："+record +",一行的数据都在里面n"+
28                 "这是第"+rowIndex+"行n"+
29                 "这是第"+columnIndex +"列n"+
30                 "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"\")' />";
31             // var str="<input type='button' value='查询详细信息' onclick='alert(\"234\")'/>";
32             return str;
33         }}
34     ];
35     // 定义数据
36     var data = [
37         ['1','张三','desc1'],
38         ['2','李四','desc2'],
39         ['3','王五','desc3'],
40         ['4','陈群','desc4']
41     ];
42     // 转换原始数据为ext可以显示的数据
43     var store = new Ext.data.ArrayStore({
44         data:data,
45         fields:[
46             {name:'id'}, //mapping:0 这样可以指定列显示的位置，0代表第一列，可以随意设置列显示的位置
47             {name:'name'},
48             {name:'desc'}
49         ]
50     });
51     // 加载数据
52     store.load({
53         callback: function() {
54             //Ext.Msg.alert("title","数据加载完成");
55         }
56     });
57     
58     //创建表格
59     var grid = new Ext.grid.GridPanel({
60         renderTo:'grid', // 渲染位置
61         store:store, // 转换后的数据
62         columns:columns, // 显示列
63         stripeRows:true, //斑马线效果
64         enableColumnMove: false, // 禁止拖放列
65         enableColumnResize: false, // 禁止改变列宽度
66         loadMask: true, // 显示遮罩和提示功能，即加载loading。。。
67         forceFit: true // 自动填满表格
68     });
69 })
70 </script>
71 </body>
72 </html>

效果图

转载于:https://my.oschina.net/u/3724493/blog/1570353

chesui1874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用extjs做的一个简单grid

1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html> 3 <html> 4 &...
复制链接

扫一扫