ligerUI总结—— grid表格(基础篇

一、配置column
表格显示了多少个列,列宽，列单元格要显示的内容都是由columns属性配置，下面是column的配置参数：
代码如下:

{ 
display: '序号', //表头列显示的文本,支持html 
	//表头内容自定义函数 
	headerRender: function (column) { 
		return "<b>" + column.display + "</b>"; 
	}, 
name: 'id', //单元格映射的行数据属性 
align: 'center', //单元格内容对齐方式:left/center/right 
hide: false, //是否隐藏 
width: 100, //列的宽度 
minWidth: 50, //列的最小宽度 
isSort: true, //是否允许此列排序,默认为允许排序 
isAllowHide: true, //是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】 
type: 'string', //类型,用于排序 
//自定义单元格渲染器 
render : function (record, rowindex, value, column) { 
	//this 这里指向grid 
	//record 行数据 
	//rowindex 行索引 
	//value 当前的值，对应record[column.name] 
	//column 列信息 
return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织) 
}, 
//列汇总 
totalSummary: { 
	align: 'center', //汇总单元格内容对齐方式:left/center/right 
	type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型 
	render: function (e) { //汇总渲染器，返回html加载到单元格 
		//e 汇总Object(包括sum,max,min,avg,count) 
		return "<div>总数：" + e.count + "</div>"; 
	} 
}, 
//单元格编辑器 
editor: { 
	type: 'text' 
}, 
//多表头支持 
columns: null 
},

表格的列提供了很完整的接口可以扩展。无论是内容单元格或者是表头单元格都可以对内容、布局、大小进行自定义。

1、自定义表头 
比如表头，我们可以把display直接设置一段html: 
代码如下:

{ 
display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html 
name: 'name', 
align: 'left' 
}, 
或者使用headerRender： 
复制代码 代码如下:
//表头内容自定义函数 
headerRender: function (column) { 
	return "<b>" + column.display + "</b>"; 
}, 


2、自定义单元格： 
column的name是定义单元格链接到行数据哪一个属性。比如说上面例子的第一行，把name配置为id，那么显示出来应该就是 "01"，如果配置成name，那么显示出来就是 "部门01"。还有align参数，是确定单元格的对齐方式。 
如果没有配置render，那么单元格显示的内容将由name确定。 
代码如下:
{ name: 'id', display: '序号', width: 200 }, 
{ name: 'name', display: '名称', width: 300 }  



上面介绍的是单元格的默认显示方式。除了这种方式，还可以用格式器和自定义函数。 

单元格内容的显示规则： 
$.如果配置了render，使用render 
$.如果column的type参数扩展了对应的格式化器，那么使用格式化器进行渲染。比如定义了货币格式的格式化器 
$.最后才是使用默认显示方式 
 
2.1 格式化器：
通过扩展$.ligerDefaults.Grid.formatters['columntype']来实现，columntype是column配置的type参数。比如现在要格式化一个货币格式的： 
代码如下:
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) { 
//num 当前的值 
//column 列信息 
if (!num) return "$0.00"; 
num = num.toString().replace(/\$|\,/g, ''); 

if (isNaN(num)) 
{
	num = "0.00"; 
	sign = (num == (num = Math.abs(num))); 
	num = Math.floor(num * 100 + 0.50000000001); 
	cents = num % 100; 
	num = Math.floor(num / 100).toString(); 
}


if (cents < 10) 
	cents = "0" + cents; 

for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) 
{
	num = num.substring(0, num.length - (4 * i + 3)) + ',' + 
	num.substring(num.length - (4 * i + 3)); 
}


return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents); 
}; 
 


这样只要column的type配置为currency。都会使用这个函数来自定义单元格内容 
代码如下:
{ display: '单价', name: 'UnitPrice', align: 'right' ,type:'currency' }  

2.2 自定义单元格函数 ：
自定义单元格函数是指配置column的render。我们可以组织任意的html。 
代码如下:
var grid = $("#maingrid").ligerGrid({ 
columns: [ 
{ name: 'id', display: '序号', width: 100, 
render: function (record, rowindex, value, column) { 
//this 这里指向grid 
//record 行数据 
//rowindex 行索引 
//value 当前的值，对应record[column.name] 
//column 列信息 
return "<a href='edit.htm?id=" + value + "'>编辑</a>"; 
} 
}, 
{ name: 'id', display: '序号', width: 120, 
render: function (record, rowindex, value, column) { 
return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>'; 
} 
}, 
{ name: 'name', display: '名称', width: 300 } 
], 
data: { Rows: griddata } 
}); 
 


2.3单元格编辑器 ：
所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors，比如 
editor: { type: 'spinner' } 
将会使用$.ligerDefaults.Grid.editors['spinner'] 进行创建编辑器进行构建。 
ligerGrid内置提供了 复选框、文本框、日期、数字调整器、下拉框 等编辑器。 
column的参数很多,这里不作一一列举，只介绍了几个常用的参数 
更多的可以查看api: http://api.ligerui.com