JSGrid Checkbox with Saved state
HTML
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>
JavaScript
var data = [
{
"Name": "Otto Clay",
"Married": false
},
{
"Name": "Connor Johnston",
"Married": false
},
{
"Name": "Lacey Hess",
"Married": false
},
{
"Name": "Timothy Henson",
"Married": false
}
];
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
autoload: true,
pageSize: 2,
controller: {
loadData: function() {
return data;
}
},
fields: [
{ name: "Name", type: "textarea", width: 150, visible: "true" },
{ name: "Married", title: "Is Married", align: "center",
itemTemplate: function(value, item) {
return $("<input>").attr("type", "checkbox")
.attr("checked", value || item.Checked)
.on("change", function() {
item.Checked = $(this).is(":checked");
});
}
},
{ type: "control" }
]
});
$("#jsGrid").jsGrid("Name", "Otto Clay", "visible", false);