您的位置：首页 > 其它

Ext教程连载 - GridPanel基本表格

2009-09-29 08:02 555 查看

主要介绍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>

运行以上代码，将有如下效果：

下一节将带上分页效果，另外，可编辑的表格放在实例分析中讲解。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航