The NinjaGrid display a list of objects as a data grid table.
NinjaGrid
Sample 1 - Basic sample
REFERENCES
To use NinjaCombo plugin, add those references into your website:
And the plugin files:
Call ninjaGrid method to initialize the plugin:
$(document).ready(function(){
$("#myGrid").ninjaGrid({options});
});
OPTIONS
.ninjaGrid({
url: null, //-- set the url to the ajax call. This property overrides the "dataSource" option.
type: "GET", //-- set the type of ajax call ["GET","POST"]
model: {}, //-- model used to send as parameter to ajax call
dataSource: null, //-- an array of objects to be used as datasource instead of an ajax call.
keyColumn: null,
columns: null, //-- an array og objetcs representing all the column configuration
//-- [{
//-- header: "" //-- set the column header text
//-- property: "" //-- set the property of your object to be displayed
//-- width: 0, //-- column size width
//-- align: "left", //-- column content alignment
//-- css: "", //-- set custom css to the column
//-- sort: false, //-- set if it is sortable or not
//-- format: null, //-- set a function(vl, obj, td, tr){ } to customize the cell content or a mask name from ninjaCore settings
//-- customFormat: null, //-- set the name of a customized format function. [customFormat] function has priority over [format] functions
//-- totalize: { //-- set if this column should be totalized at the end
//-- condition: null, //-- set a function to define a condition to be totalized
//-- type: "count", //-- set the totalize type ["count", "sum", "avg"]
//-- align: "left", //-- set the totalize cell's text alignment
//-- format: null //-- set a function to customize the cell content
//-- }
//-- }],
//-- isCheckbox: false, //-- set if this column will be displayed as a checkbox, boolean type.
//-- autoCheck: false, //-- set if this column will be checked/unchecked automatically at row's click
//-- onChange: function(obj, td, tr){ }, //-- set a function to be called when the checkbox values is changed
//-- disabled: false, //-- set if the checkbox should be displayed as disabled
//-- readonly: false //-- set if the checkbox should be displayed as readonly
width: "100%", //-- set the grid width
minHeight: 150, //-- set the grid min-height
maxHeight: 0, //-- set the grid max-height.
pageNumber: 1, //-- set the initial page number
pageSize: 15, //-- set the initial page size
sortColumn: null, //-- set the initial sort column
sortOrder: "asc", //-- set the initial sort order
autoLoad: true, //-- set if the grid will load the datasource when initializated
multiSelect: false, //-- allow the user to select more than one row
showPages: true, //-- set the pagination buttons visibility
showRefresh: true, //-- set refresh button visibility
showTotal: true, //-- set the label total visibility
showFooter: true, //-- set the footer bar visibility
lblFooterPages: "Page {0} of {1}",
lblFooterTotal: "{0} records",
lblFooterFirstPage: "First",
lblFooterLastPage: "Last",
lblFooterNextPage: "Next",
lblFooterPrevPage: "Previous",
lblLoading: " loading...",
lblTotalizeRow: "Total",
onCallback: null, //-- set a function to be fired when the grid is loaded
onRowClick: function (tr, obj) { }, //-- set a function to be fired on row click
onRowCreated: function (tr, obj) { }, //-- set a function to be fired when a row is created
customFormat: { //-- set N custom functions to be used to format cells
"myCustomFunctionName": (vl, obj, td, tr) { }
},
buttons: {
"edit": {
text: '', //-- set the button text
css: 'nc-btn fa fa-pencil' //-- set the button css
},
"delete": {
text: "",
css: "nc-btn fa fa-trash"
}
},
roles: function (name, item) { //-- set a role function to check if a button should be displayed or not
return true;
},
events: {
"edit": function (item, e) { console.error("function event not implemented."); },
"delete": function (item, e) { console.error("function event not implemented."); }
},
customize: function () {
}
});
METHODS
Name |
Description |
Sample |
|---|---|---|
ninjaGrid({options}) |
Initialize the plugin to the specified selector. |
$("#myGrid").ninjaGrid() |
ninjaGridUpdate() |
Refresh the grid. |
$("#myGrid").ninjaGridUpdate() |
ninjaGridAdd({object}) |
Add a new line in the grid. |
$("#myGrid").ninjaGridAdd() |
ninjaGridGetSelectedRows() |
Get a list with all selected rows data. |
$("#myGrid").ninjaGridGetSelectedRows() |
ninjaGridTotalize() |
Refresh the totalization row. |
$("#myGrid").ninjaGridTotalize() |