<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" href="lib/ext2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext2.2/ext-base.js"></script>
<script type="text/javascript" src="lib/ext2.2/ext-all.js"></script>
<script type="text/javascript" src="lib/ext2.2/ext-lang-zh_CN.js"></script>
</head>
<body>
<script>
/**
*
* @param {Object} value 是当前单元格的值
* @param {Object} cellmeta 里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式
* @param {Object} record 是这行的所有数据，你想要什么，record.data["id"]这样就获得
* @param {Object} rowIndex 是行号，不是从头往下数的意思，而是计算了分页以后的结果
* @param {Object} columnIndex 列号太简单了
* @param {Object} store 这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了
*/
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' οnclick='alert(/"" +
"这个单元格的值是：" + value + "//n" +
"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}//n" +
"这个单元格对应行的record是：" + record + "，一行的数据都在里边//n" +
"这是第" + rowIndex + "行//n" +
"这是第" + columnIndex + "列//n" +
"这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
"/")'>";
return str;
}
function renderAge(value){
if (value>=60){
return "老人";
} else if (value<18) {
return "未成年"
} else {
return "成年人"
}
}
var sm = new Ext.grid.CheckboxSelectionModel(); // 生成 checkBox 控件
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
// 自动加上行号 1.X 中的实现
{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
return rowIndex + 1; //不指定dataIndex，而是直接根据renderer返回rowIndex + 1，因为它是从0开始的，所以加个一。
}},
new Ext.grid.RowNumberer(), // 自动加上行号 2.X 中的实现,是简单了许多
sm, //生成checkbox
{header:'编号',dataIndex:'id',sortable:true},
{header:'性别',dataIndex:'sex',renderer:function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}},
{header:'年龄',dataIndex:'age',renderer:renderAge},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','male','10','name1','descn1'],
['2','female','18','name2','descn2'],
['3','male','40','name3','descn3'],
['4','female','80','name4','descn4'],
['5','male','60','name5','descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'age'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm, //生成checkbox
height:200,
bbar: new Ext.PagingToolbar({
pageSize: 10, // 是每页显示几条数据
store: ds,
displayInfo: true, // 跟下面的配置有关，如果是false就不会显示提示信息
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', // 只有在displayInfo:true的时候才有效，用来显示有数据的时候的提示信息，中国人应该看得懂汉语，到时候{0},{1},{2}会自动变成对应的数据，咱们只需要想办法把话说通就行了
emptyMsg: "没有记录" // 要是没数据就显示这个，jack实在太贴心了，连这些小处都考虑得如此精细
})
});
grid.render();
});
</script>
<div id="grid" ></div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
