您的位置：首页 > Web前端 > JavaScript
使用extjs做的一个简单grid

2017-11-09 00:00 489 查看
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>
效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航