| GridPanel基本表格 |
| 2008-04-17 | |
|
主要介绍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> 运行以上代码，将有如下效果： |
| < 上一篇 | 下一篇 > |
|---|