flexigrid 添加checkbox

先来一张图，看看添加了checkbox的界面是怎么样的？

flexigrid本质上用的是html的table元素，添加checkbox实际上就是每个tr里面添加一个td,td里面有一个div,div里面包含了input type=checkbox 这样的标记。

在JavaScript添加很简单：

首先我定义了一个config函数，创建了三个列：

	config : function (description) {
		'use strict';

		$("#powers").flexigrid(
			{
				dataType: 'json',width: 281,height: 320,singleSelect: true,colModel : [
					{display: '',name: 'select',width: 15,sortable: true,align: 'left'},{display: '权限',name: 'power',width: 50,{display: description,name: 'description',width: 178,]
			}
		);


	},

下面的两个函数为flexigrid准备数据：

	buildPowerRow: function (power,checked) {
		'use strict';
		var t1,t2;
		t1 = "{"cell":["<input id='{0}' class='checkbox_class' type='checkbox' value='{0}'/>","{1}","{2}"]}"
		t2 = "{"cell":["<input id='{0}' class='checkbox_class' type='checkbox' checked="checked" value='{0}'/>","{2}"]}";
		if (checked) {
			return jQuery.validator.format(t2,power.name,power.zhName,power.zhDes);
		} else {
			return jQuery.validator.format(t1,power.zhDes);			
		}
	},buildDefaultPowerRows: function (powers) {
		'use strict';
		var length,value;
		length = powers.length;
		value = "{"page": 1,"total": 40,"rows":[";
		for (i = 0; i < length; (i += 1)) {
			str = accounts.buildPowerRow(powers[i].value,false);
			value += str;
			if (i !== (length - 1)) {
				value += ",";
			}
		}
		value += "]}";
		return jQuery.parseJSON(value);		
	},

中间每一行的值都通过buildPowerRow函数生成。

buildPowerRow函数用了两个字符串模板，用于生成打勾或者不打勾的字符串。

代码并不难，关键是要知道怎么将input 标记添加进flexigrid，同样的方法，我们可以将select也加入进来。以后介绍。

原始的json数据下面有个例子：

	allPowers : {
		"powers":
		[
			{
				"index":"0","value": {
					"name": "message","zhName": "发送信息","zhDes": "发送信息到Business Signs"
				}
			},{
				"index":"1","value": {
					"name": "log","zhName": "信息日志","zhDes": "查看发送信息的日志"
				}
			},{
				"index":"2","value": {
					"name": "group","zhName": "分组管理","zhDes": "分组管理"
				}
			},{
				"index":"3","value": {
					"name": "config","zhName": "装置配置","zhDes": "装置配置"
				}
			},{
				"index":"4","value": {
					"name": "account","zhName": "账户管理","zhDes": "创建新账户并分配权限"
				}
			},{
				"index":"5","value": {
					"name": "title","zhName": "标题信息","zhDes": "标题信息"
				}
			}
		]
	},