Add checkbox to flexigrid

Let's take a picture to see how the checkbox interface is added?

In essence, flexigrid uses the table element of HTML. To add a checkbox, a td is added to each TR, and a DIV in TD contains a tag such as input type = checkbox.

Adding Javascript is simple:

First, I defined a Config function and created three columns:

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

# Powers corresponds to the table ID: powers.

The following two functions prepare data for 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);},

Builddefapowerpowerrows receives an object in JSON format, and then creates the format header required by flexigrid, starting with {"page.

The value of each row is generated by the buildpowerrow function.

The buildpowerrow function uses two string templates to generate a string that is checked or not checked.

The code is not difficult. The key is to know how to add the input tag to flexigrid. In the same way, we can add select. Later.

The following is an example of the original JSON data:

Allpowers: {"Powers": [{"Index": "0", "value": {"name": "message", "zhname": "Send message ", "zhdes": "sending information to business signs" }}, {"Index": "1", "value": {"name": "log", "zhname ": "Information log", "zhdes": "view sent information log" }}, {"Index": "2", "value": {"name ": "Group", "zhname": "Group Management", "zhdes": "group management" }}, {"Index": "3", "value ": {"name": "Config", "zhname": "Device Configuration", "zhdes": "Device Configuration" }}, {"Index": "4 ", "value": {"name": "Account", "zhname": "Account Management", "zhdes": "Create a new account and assign Permissions "}}, {"Index": "5", "value": {"name": "title", "zhname": "title information", "zhdes ": "title information" }}]},