jquery jqGrid rxjs
▌Introduction
jqGrid
is a powerful jquery grid plugin. In this article, I will create a local data
sample for the starter of jqGrid.
▌Environment
l jQuery 3.1.1
l jqGrid 4.6.0
▌Sample codes
▌Implement
▋Install packages
▋HTML
<div>
<table id="myGrid"></table>
</div>
<div id="pager"></div>
|
▋JS
var base = [];
$(function () {
$("#myGrid").jqGrid({
//Display Column Titles
colNames:
["Id", "Month", "Income", "Payout", "Payout(%)"],
//model name and settings
colModel:
[
{
name: "id", hidden: true },
{
name: "month", width: 130 },
{
name: "income",
editable: true,
summaryTpl: "{0}",
summaryType: function (value, name, record) {
value = value || 0;
var fieldData =
parseFloat(record[name]);
return (+value + +fieldData).toFixed(1);
}
},
{
name: "payout",
editable: true,
summaryTpl: "{0}",
summaryType: function (value, name, record) {
value = value || 0;
var fieldData =
parseFloat(record[name]);
return (+value + +fieldData).toFixed(1);
}
},
{
name: "payoutPercentage",
formatter: "currency",
formatoptions: { suffix: "
%" }
}
],
pager: "#pager",
autowidth: true,
multiselect: false,
onSelectRow: editRow,
datatype:
"local",
grouping: true,
groupingView: {
groupField: ["month"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
//groupOrder: ["asc"],
groupSummary: [true],
groupCollapse: false
},
loadComplete: function () {
//Read all rows from jqGrid
//var rows = grid.jqGrid('getGridParam', 'data'); //var
rows = grid.getGridParam('data');
let grid = $("#myGrid");
let indexes =
grid.jqGrid("getGridParam", "_index");
let rowid;
for (rowid in indexes) {
if
(indexes.hasOwnProperty(rowid)) {
console.log(grid.jqGrid("getCell", rowid, "id"));
}
}
}
});
//Start main codes here .....
createBase();
updateBase();
renderGrid(base).then(() => {
//Do something...
});
});
|
u Use summaryTpl and summaryType on any of colModel
to create a summary cell on footer.
Simply set summaryType:"sum" or use the custom summary
function like the above codes.
u grouping and groupingView
are used for grouping.
▋Create local
data for jqGrid
function createBase() {
base =
JSON.parse(JSON.stringify(jsonData)); //Deep clone a new array
}
/* JSON foo data */
let jsonData = [
{
id: 1,
month: "2017/03",
income:
1234.55,
payout:
234.46
}, …
];
|
▋Update the
local data (optional)
function updateBase() {
base.forEach(x => {
x.payoutPercentage = (x.payout / x.income * 100).toFixed(2);
});
}
|
▋Render local
data to jqGrid
function
renderGrid(data) {
var deferred =
$.Deferred();
var grid = $("#myGrid");
grid
.jqGrid("setGridParam", {
datatype: "local",
data:
data
})
.trigger("reloadGrid");
$("#myGrid").jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: false,
search: false,
refresh: false,
view: true
});
deferred.resolve();
return
deferred.promise();
}
|
▋Demo
▌Reference
沒有留言:
張貼留言