使用extjs做的一个简单grid
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>
效果图