主要介绍ext基本表格的使用。Ext的表格是我见过最强悍的,无论是界面美观性,功能多样性都非常出色,包括列排序,支持ctrl键,shift键多选,自定义列函数,ajax分页(下一节讲)等看下面的代码:
- 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body> <script> Ext.onReady(function(){ //定义数据二维数组 var data=[ ['列1内容1', '列2内容1','列3内容1'], ['列1内容2', '列2内容2','列3内容2'], ['列1内容3', '列2内容3','列3内容3'], ['列1内容4', '列2内容4','列3内容4'] ];
//自定义列 function check(value) { if (value=='列1内容2') { return '<span style="color:red;font-weight:bold;">自定义列</span>'; } else { return value; } }
//整理数据定义3列的索引为con1,con2,con3 var store=new Ext.data.SimpleStore({ data:data,fields:['con1','con2','con3'] });
//定义勾选框,不需要可不必定义 var sm = new Ext.grid.CheckboxSelectionModel();
//定义列 var colM=new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//增加自动编号,不需要可不必定义 sm,//勾选框,不需要可不必定义 {header:'列1',dataIndex:'con1',width:170,sortable:true,renderer:check},// 生成列,sortable为列排序,不需要设置为false,默认false,renderer为该列增加自定义函数 {header:'列2',dataIndex:'con2',width:170,sortable:true}, {header:'列3',dataIndex:'con3',width:170} ]);
//生成表格 var grid = new Ext.grid.GridPanel({ renderTo:'show', title:"我的表格", height:200, width:600, cm:colM, sm:sm, store:store });
}); </script> <div id="show"></div> </body> </html> 运行以上代码,将有如下效果: 下一节将带上分页效果,另外,可编辑的表格放在实例分析中讲解。 |