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, sortable: true, align: 'left'},
					{display: description, name: 'description', width: 178, sortable: true, align: 'left'},
				]
			}
		);


	},

#powers对应的是table的id: powers。

下面的两个函数为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}'/>\",\"{1}\",\"{2}\"]}";
		if (checked) {
			return jQuery.validator.format(t2, power.name, power.zhName, power.zhDes);
		} else {
			return jQuery.validator.format(t1, power.name, power.zhName, 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);		
	},

buildDefaultPowerRows接收一个json格式的对象，然后创建flexigrid所需要的格式头，从{"page"开始。

中间每一行的值都通过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": "标题信息"
				}
			}
		]
	},