JSGrid Smart Control Field
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 clients = [
{
"Name": "Otto Clay",
"Age": 61,
"Address": "Ap #897-1459 Quam Avenue",
"Deletable": true
},
{
"Name": "Connor Johnston",
"Age": 73,
"Address": "Ap #370-4647 Dis Av.",
"Deletable": true,
"Editable": true
},
{
"Name": "Lacey Hess",
"Age": 29,
"Address": "Ap #365-8835 Integer St.",
"Editable": true
},
{
"Name": "Timothy Henson",
"Age": 78,
"Address": "911-5143 Luctus Ave"
},
{
"Name": "Ramona Benton",
"Age": 43,
"Address": "Ap #614-689 Vehicula Street",
"Editable": true
}
];
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
filtering: true,
editing: true,
autoload: true,
deleteConfirm: "Do you really want to delete the client?",
controller: {
loadData: function() {
return clients;
}
},
fields: [
{ name: "Name", type: "textarea", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{
type: "control",
itemTemplate: function(index,value, item) {
var $result = $([]);
if(item.Editable) {
$result = $result.add(this._createEditButton(item));
}
if(item.Deletable) {
$result = $result.add(this._createDeleteButton(item));
alert(index);
}
return $result;
}
}
]
});