我正在使用jqgrid。我们正在用jquery构建仪表板功能。不同的应用程序只需要注册相应的应用程序页面,仪表板将呈现该页面。为了实现这一点,我们使用jqgrid作为jquery插件之一。下面是我的代码jqgrid将自定义格式化程序设置为动态列集合
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集合中看到它。Evrything工作正常不过,唯一的问题是何时到来,我们正试图自定义格式应用到列。这个问题来,只有当我们动态地分配“colModel”来的jqGrid。
欣赏帮助
在此先感谢