jqGrid и динамическое связывание столбцов

Как связать jqGrid динамически ?. Столбцы недоступны во время разработки, но доступны только во время выполнения.

В текущем проекте jqGrid для работы сетки должны быть предварительно заполнены колмодели и другие свойства.

Любой вход в этом направлении очень ценится.

Попробуйте это в 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 года.

У меня есть веб-служба, которая возвращает dataset 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/ – лучшее решение.

Возможно ли воссоздать сетку каждый раз при добавлении столбца? Вы можете хранить данные локально и просто разгружать / воссоздавать сетку каждый раз, используя динамическую модель столбца.

Вы также можете посмотреть некоторые из демонстраций, которые динамически отображают / скрывают столбцы. В зависимости от того, сколько столбцов у вас есть, вы можете использовать одну и ту же концепцию в своем приложении.

Это помогает?

Еще одно решение;

  $("#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; } 
 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; } 

Я пробовал решение, предлагаемое bruno как с возвратом данных json, так и jsonstring, оно работает, НО
если опция datastr: colD
существует – дальнейшие запросы на данные не выполняются, хотя фильтр действительно работает с первыми полученными данными
не существует – двойной запрос данных о загрузке сетки

Я бы предложил выполнить $("#list").jqGrid('setGridParam',{datatype:'json'}); на loadComplete событие сетки – таким образом grid будет существовать наверняка. Итак, просто добавьте следующее в определение сетки вместо setTimeout(...) :

 loadComplete : function () { $ ("#list").jqGrid('setGridParam',{datatype:'json'}); } 

Работал для меня!

Если вы сделаете это с помощью функции импорта, вы все равно сможете использовать пейджинговые функции jqGrid. Убедитесь, что «GetColumnsAndData» возвращает нормальные данные сетки как «данные» и конфигурацию как «сетку» (или изменить эти значения в «jsonGrid»).

EDIT: Также убедитесь, что одна из настроек сетки – «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 dict = jser.Deserialize>(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 liob = new List(); foreach (DataColumn column in dtRecords.Columns) { liob.Add(column.ColumnName); } objJqGrid.rowsHead = liob; List colcontetn = new List(); 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)); } 

попробуйте это

 $.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); 
  • jquery form.serialize и другие параметры
  • загрузить json в переменную
  • jQuery Ajax дождитесь загрузки всех изображений
  • Запрос JQuery Ajax внутри запроса Ajax
  • Нажмите строки таблицы, чтобы выбрать флажок, используя jQuery
  • Как вы работаете с массивом jQuery Deferreds?
  • Вкладки Google Maps и jQuery
  • Ошибка Catch, если iframe src не загружается. Ошибка: - «Отказано для отображения» http://www.google.co.in/ «в кадре».
  • Как я могу выбрать элемент по ID с помощью jQuery с помощью regex?
  • Сортируемые списки JQuery и фиксированные / заблокированные элементы
  • Проблема отправки JSON-данных из JQuery в метод REST WCF
  • Давайте будем гением компьютера.