flexigridにcheckboxを追加します.
まず図を見てみます.checkboxが追加されているインターフェースはどうですか?
flexigridは本質的にはhtmlのテーブル要素を使っていますが、checkboxを追加すると実際にはtrごとにtdが追加されています.tdにはdivがあります.divにはinput type=checkboxというマークが含まれています.
JavaScriptに追加するのは簡単です.
まず、config関数を定義し、3つの列を作成しました.
下の二つの関数はflexigridのためのデータを準備します.
中間の各行の値は、buildPowerRow関数によって生成される.
buildPowerRow関数は、チェックを付けたりしない文字列を生成するために2つの文字列テンプレートを使用しています.
コードは難しくないです.重要なのはinputマークをflexigridにどうやって追加するかを知ることです.同じ方法で、私達はselectを入れられます.後で紹介します.
オリジナルのjsonデータは以下の例があります.
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": " "
}
}
]
},