jsgrid vuejs
var app = new Vue({
el: '#app',
data: function() {
let tableData = []
/*generate junk data*/
for (let i=0; i< 100; i++) {
tableData.push({ "Name": "Client " + i, "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false });
}
let dataObj = {
message: 'Hello Vue!',
clients: tableData,
countries: [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
grid: null
}
return dataObj;
},
mounted: function() {
this.grid = $('#jsGrid');
this.grid.jsGrid({
//filtering: true,
width: "100%",
height: "400px",
selecting: true,
inserting: false,
editing: true,
sorting: true,
paging: true,
data: this.clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
})
}
})
HTML
<div id="app">
<div id="jsGrid"></div>
</div>