jqGrid и динамическая привязка столбцов
Как динамически связать jqGrid? Столбцы не доступны во время разработки, но будут доступны только во время выполнения.
В текущем проекте jqGrid необходимо правильно заполнить colmodels и другие свойства, чтобы сетка работала правильно.
Любой вклад в этом направлении приветствуется.
11 ответов
Попробуйте это в document.ready:
$.ajax(
{
type: "POST",
url: "SomeUrl/GetColumnsAndData",
data: "",
dataType: "json",
success: function(result)
{
colD = result.colData;
colN = result.colNames;
colM = result.colModel;
jQuery("#list").jqGrid({
jsonReader : {
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);
эта работа хорошо для меня.
Мое решение вроде той же идеи, что и отличный ответ Теомана Шипахи от августа 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 перед их отображением в сетке, а не загружали только одну страницу данных за раз. Это может быть проблемой, если у вас есть огромное количество данных.
Если кто-то хочет реализовать эту функцию с помощью mvc, то http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ является более хорошим решением.
Возможно ли воссоздать сетку каждый раз, когда добавляется столбец? Вы можете хранить данные локально и просто каждый раз выгружать / восстанавливать сетку, используя динамическую модель столбца.
Вы также можете посмотреть некоторые демонстрации, которые показывают / скрывают столбцы динамически. В зависимости от того, сколько у вас столбцов, вы можете использовать одну и ту же концепцию в своем приложении.
Это помогает?
function columnsData(Data) {
var str = "[";
for (var i = 0; i < Data.length; i++) {
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
Еще одно решение;
$("#datagrid").jqGrid({
//url: "user.json",
//datatype: "json",
datatype: "local",
data: dataArray,
colNames:getColNames(dataArray[0]),
colModel:getColModels(dataArray[0]),
rowNum:100,
loadonce: true,
pager: '#navGrid',
sortname: 'SongId',
sortorder: "asc",
height: "auto", //210,
width:"auto",
viewrecords: true,
caption:"JQ GRID"
});
function getColNames(data) {
var keys = [];
for(var key in data) {
if (data.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}
function getColModels(data) {
var colNames= getColNames(data);
var colModelsArray = [];
for (var i = 0; i < colNames.length; i++) {
var str;
if (i === 0) {
str = {
name: colNames[i],
index:colNames[i],
key:true,
editable:true
};
} else {
str = {
name: colNames[i],
index:colNames[i],
editable:true
};
}
colModelsArray.push(str);
}
return colModelsArray;
}
Если вы делаете это с помощью функции импорта, вы все равно можете использовать функции подкачки jqGrid. Убедитесь, что "GetColumnsAndData" возвращает обычные данные сетки как "данные", а конфигурацию как "сетка" (или измените эти значения в "jsonGrid").
РЕДАКТИРОВАТЬ: также убедитесь, что один из параметров "сетки" возвращается "URL" (со значением URL, чтобы получить только данные).
$('#grid').jqGridImport({
imptype: 'json',
impurl: 'SomeUrl/GetColumnsAndData',
mtype: 'POST',
impData: {
'_search': 'false',
'sidx': 'loc_short_name',
'sord': 'asc',
'page': '1',
'rows': '25',
'searchField': '',
'searchOper': '',
'searchString': ''
// Add any additional, custom criteria
},
jsonGrid: {
config: 'grid',
data: 'data'
}
});
**Dynamic JQGrid From Data Table**
$(document).ready(function () {
var ColN, ColM, ColD, capEN;
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
//alert(sPage);
$.ajax({
url: sPage+'?method=getGridHeadData',
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (data, st) {
if (st == "success") {
ColN = data.rowsHead;//jqgrid heading data
ColM = data.rowsM; // its column model
ColD = data.rows; // Data
createGrid();
}
},
error: function () {
alert("Error with AJAX callback");
}
});
function createGrid() {
jQuery("#AccountingCodesGrid").jqGrid({
datatype: 'json',
url: sPage+'?method=getGridData',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
//data: ColD,
colNames: ColN,
colModel: ColM,
loadonce: true,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
}
jQuery("#AccountingCodesGrid").jqGrid('navGrid', '#Pager', { edit: false, add: false, del: false }, null, null, true, { multipleSearch: true });
var height = $(window).height();
});
the code behind
**In page load..................................................................**
if (Request.QueryString["method"] == "getGridData")
{
Request.InputStream.Position = 0;
StreamReader ipStRdr = new StreamReader(Request.InputStream);
string json = ipStRdr.ReadToEnd();
JavaScriptSerializer jser = new JavaScriptSerializer();
Dictionary<string,> dict = jser.Deserialize<dictionary><string,>>(json);
getGridData(int.Parse(dict["page"].ToString()), int.Parse(dict["rows"].ToString()), bool.Parse(dict["_search"].ToString()), dict["sord"].ToString());
Response.End();
}
else if (Request.QueryString["method"] == "getGridHeadData")
{
getGridHeadData();
Response.End();
}
**Method to get data in json form----------------------------------------------------**
public void getGridData(int page, int rows, bool _search, string sord)
{
DataTable dtRecords = dtSource;// Data Table
int recordsCount = dtRecords.Rows.Count;
JqGridData objJqGrid = new JqGridData();
objJqGrid.page = page;
objJqGrid.total = ((recordsCount + rows - 1) / rows);
objJqGrid.records = recordsCount;
objJqGrid.rows = ConvertDT(dtRecords);
List<string> liob = new List<string>();
foreach (DataColumn column in dtRecords.Columns)
{
liob.Add(column.ColumnName);
}
objJqGrid.rowsHead = liob;
List<object> colcontetn = new List<object>();
foreach (var item in liob)
{
JqGridDataHeading obj = new JqGridDataHeading();
obj.name = item.ToString();
obj.index = item.ToString();
colcontetn.Add(obj);
}
objJqGrid.rowsM = colcontetn;
JavaScriptSerializer jser = new JavaScriptSerializer();
Response.Write(jser.Serialize(objJqGrid));
}
Я бы предложил выполнить $("#list").jqGrid('setGridParam',{datatype:'json'}); на loadComplete событие сетки - таким образом, сетка будет существовать наверняка. Итак, просто добавьте следующее в определение сетки вместо setTimeout(...):
loadComplete : function () {
$ ("#list").jqGrid('setGridParam',{datatype:'json'});
}
Работал на меня!
Я пробовал решение, предложенное bruno как с типом возврата данных json, так и с типом jsonstring, оно работает НО
если опция datastr: colD
существует - дальнейшие запросы данных не выполняются, хотя фильтр работает с первыми извлеченными данными
не существует - двойной запрос данных о загрузке сетки
Попробуй это на
$.ajax(
{
type: "POST",
url: "SomeUrl/GetColumnsAndData",
data: "",
dataType: "json",
success: function(result)
{
colD = result.colData;
colN = result.colNames;
colM = result.colModel;
jQuery("#list").jqGrid({
jsonReader : {
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);