JSGrid Button 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 data = [
{ "Name": "Otto Clay" },
{ "Name": "Connor Johnston" },
{ "Name": "Lacey Hess" },
{ "Name": "Timothy Henson" },
{ "Name": "Ramona Benton" },
{ "Name": "Ezra Tillman" },
{ "Name": "Dante Carter" },
{ "Name": "Christopher Mcclure" }
];
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
autoload: true,
controller: {
loadData: function() {
return data;
}
},
fields: [
{ name: "Name", type: "text", width: 150 },
{ title: "aaa",
itemTemplate: function(_, item) {
var $result = $("<div>");
var $a= $("<button>").text("Click Me")
.on("click", function() {
alert(item.Name);
});
return $result.add($a);
}
}
]
});