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() |