Я использую jqgrid. Мы создаем функциональность панели мониторинга с помощью jquery. Различные приложения просто должны зарегистрировать соответствующую страницу приложения, и панель инструментов будет отображать эту страницу. Для достижения этого мы используем jqgrid в качестве одного из плагинов jquery. Ниже мой код
var ph = '#' + placeHolder;
var _prevSort;
$.ajax({
url: dataUrl,
dataType: "json",
async: true,
success: function(json) {
pager = $('#' + pager);
if (json.showPager === "false") {
pager = eval(json.showPager);
}
dataUrl += "&jqSession=true";
$(ph).jqGrid({
url: dataUrl,
datatype: "json",
sortclass: "grid_sort",
colNames: JSON.parse(json.colNames),
colModel: JSON.parse(json.colModel),
forceFit: true,
rowNum: json.rowNum,
rowList: JSON.parse(json.rowList),
pager: pager,
sortname: json.sortName,
caption: json.caption,
viewrecords: true,
viewsortcols: true,
sortorder: json.sortOrder,
footerrow: summaryFooter,
userDataOnFooter: summaryFooter,
jsonReader: {
root: "rows",
row: "row",
repeatitems: false,
id: json.sortName
},
gridComplete: function() {
if (showFooter) {
$(ph).append("<tr class=\"ui-widget-content jqgrow\"><td style=\"overflow:visible; text-align:left;width:100%;font-weight:bold;\" class=\"ui-jqgrid- title\" colspan=\"" + json.colNum + "\">" + json.footerRow + "</td></tr>");
}
if (json.additionalContent != null) {
$("#" + xContID).html(json.additionalContent);
}
$("ui-icon-asc").append("IMG");
var _rows = $(".jqgrow");
if (json.rows.length > 0) {
for (var i = 1; i < _rows.length; i += 1) {
_rows[i].attributes["class"].value = _rows[i].attributes["class"].value.replace(" ui-jqgrid-altrow", "");
if (i % 2 == 1) {
_rows[i].attributes["class"].value += " ui-jqgrid-altrow";
}
}
var gMaxHeight = getGridMaxHeight();
var gHeight = ($(ph + " tr").length + 1) * ($($(".jqgrow") [0]).height());
if (gHeight <= gMaxHeight) {
$(ph).parent().height(gHeight);
}
else {
$(ph).parent().height(gMaxHeight);
}
}
else {
$(ph).prepend("<tr class=\"ui-widget-content jqgrow\"><td style=\"overflow:visible; text-align:center;width:100%;font-weight:bold;\" class=\"ui- jqgrid-title\" colspan=\"" + json.colNum + "\">" + gridNoDataMsg + "</td></tr>");
$(ph).parent().height(60);
}
},
onSortCol: function(index, iCol, sortorder) {
dataUrl = dataUrl.replace("&jqSession=true", "");
$(ph).jqGrid().setGridParam({ url: dataUrl }).trigger("reloadGrid");
var _colName = "#jqgh_" + index;
// $(_prevSort).parent().removeClass("ui-jqgrid-sorted");
// $(_prevSort).parent().addClass("ui-state-default");
// $(_colName).parent().addClass("ui-jqgrid-sorted");
// $(_colName).parent().removeClass("ui-state-default");
_prevSort = _colName;
var _rows = $(".jqgrow");
for (var i = 1; i < _rows.length; i += 1) {
_rows[i].attributes["class"].value = _rows[i].attributes["class"].value.replace(" ui-jqgrid-altrow", "");
if (i % 2 == 1) {
_rows[i].attributes["class"].value += " ui-jqgrid-altrow";
}
}
}
}).navGrid('#' + pager, { search: false, sort: false, edit: false, add: false, del: false, refresh: false }); // end of grid
$("#" + loadid).empty();
gGridIds[gGridIds.length] = placeHolder;
SetGridSizes();
},
error: function() {
$("#" + loadid).html(loadingErr);
}
});
Как вы можете видеть из кода, я получаю коллекцию столбцов динамически (страница приложения, которую я вызываю, даст мне JSON в ответе и будет иметь коллекцию colNames. пытаются применить пользовательский форматер к столбцу. Эта проблема возникает только тогда, когда мы динамически назначаем "colModel" для jqgrid.
Ценю помощь
Заранее спасибо