Мое решение вроде той же идеи, что и отличный ответ Теомана Шипахи с августа 2015 года.
У меня есть веб-сервис, который возвращает набор данных JSON, но фактические столбцы могут меняться со временем.
То, что я хотел сделать, было скрыть некоторые столбцы JSON в моей jqGrid и установить ширину некоторых столбцов на основе того, было ли это конкретное поле JSON одним из важных полей (в этом кейс, SegmentName).
Вот что я придумал:
$(function () {
// Load the JSON data we'll need to populate our jqGrid
// ID of a [Segment_Set] record in our database (which our web service will load the data for.
var SegmentSetId = 12345;
$.ajax(
{
type: "GET",
url: "/Service1.svc/LoadSegmentAttributes/" + SegmentSetId,
dataType: "json",
success: function (JSONdata) {
//
// Work through our JSON data, and create the two arrays needed by jqGrid
// to display this dynamic data.
//
var listOfColumnModels = [];
var listOfColumnNames = [];
for (var prop in JSONdata[0]) {
if (JSONdata[0].hasOwnProperty(prop)) {
// We have found one property (field) in our JSON data.
// Add a column to the list of Columns which we want our jqGrid to display
listOfColumnNames.push(prop);
// How do we want this field to be displayed in our jqGrid ?
var bHidden = (prop == "SegmentID") || (prop == "SegmentSequenceInx");
var columnWidth = (prop == "SegmentName") ? 200 : 50;
listOfColumnModels.push({
name: prop,
width: columnWidth,
sortable: true,
hidden: bHidden
});
}
}
// Now we have our JSON data, and list of Column Headings and Models, we can create our jqGrid.
CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames);
}
});
});
А вот функция, которая создает jqGrid:
function CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames) {
// After loading the JSON data from our webservice, and establishing the list of
// Column Names & Models, we can call this function to create the jqGrid.
$("#SegmentRulesGrid").jqGrid({
datatype: "local",
data: JSONdata,
localReader: {
id: "SegmentID", // The Primary Key field in our JSONdata
repeatitems: false
},
mtype: "GET",
colNames: listOfColumnNames,
colModel: listOfColumnModels,
rowNum: 15,
loadonce: true,
gridview: true,
autowidth: true,
height: 350,
pager: '#pager',
rowList: [15, 30, 100, 300],
rownumbers: true,
viewrecords: true,
caption: 'Segment Rules',
});
}
Надеюсь, это поможет.
Очевидно, что одним из недостатков моего решения является то, что оно настаивает на том, чтобы вы загружали все своих данных JSON перед их отображением в сетке, а не загружали только одну страницу данных за раз. Это может быть проблемой, если у вас огромное количество данных.