flexigridにcheckboxを追加します.


まず図を見てみます.checkboxが追加されているインターフェースはどうですか?
flexigridは本質的にはhtmlのテーブル要素を使っていますが、checkboxを追加すると実際にはtrごとにtdが追加されています.tdにはdivがあります.divにはinput type=checkboxというマークが含まれています.
JavaScriptに追加するのは簡単です.
まず、config関数を定義し、3つの列を作成しました.
	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'},
				]
			}
		);


	},
ヒドイパワーに対応するのはテーブルのid:パワーです.
下の二つの関数は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);		
	},
BildDefault PowerRowsは、json形式のオブジェクトを受信し、flexigridに必要なフォーマットヘッダを作成します.
中間の各行の値は、buildPowerRow関数によって生成される.
buildPowerRow関数は、チェックを付けたりしない文字列を生成するために2つの文字列テンプレートを使用しています.
コードは難しくないです.重要なのは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": "    "
				}
			}
		]
	},