我正在使用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。
欣賞幫助
在此先感謝