Динамическое население JQGrid colModel и данные

Я пытаюсь создать сетку динамически. Моя цель - создать своего рода динамический интерфейс для отображения некоторых таблиц базы данных. Поэтому мне нужно динамически добавлять/удалять столбцы. Мне нужно динамически изменять типы данных столбцов.Динамическое население JQGrid colModel и данные

Я использовал сценарий, предоставленный в качестве ответа в a similar question.

Я получаю, что моя сетка построена, она показывает мои столбцы. Но данные не загружаются в сетку. Firebug показывает запрос на увольнение. Вернулись правильные данные json. На самом деле сетка также запускает событие gridComplete. Но никакие данные не показаны :-(

Кто-нибудь сталкивался с этой проблемы я провел весь день донастроить jsonReader и colModel без толку

Мой образец HTML файл:

<!doctype html> 
<html> 
<link href="../styles/layout.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-1.4.2.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-ui.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.form.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.subscribe.js"></script> 
<link rel="stylesheet" href="../themes/showcase/jquery-ui.css" 
type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.jqGrid.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/struts2/jquery.struts2.js"></script> 
<script type="text/javascript" src="../js/refData.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery.struts2_jquery.debug = true; 
jQuery.struts2_jquery.loadAtOnce = true; 
    jQuery.scriptPath = "/struts2-jquery-grid-showcase/struts/"; 
jQuery.struts2_jquery.minSuffix = ""; 
jQuery.ajaxSettings.traditional = true; 

jQuery.ajaxSetup ({ 
    cache: false 
}); 
$.ajax(
     { 
     type: "POST", 
     url: "/struts2-jquery-grid-showcase/refData-table.action", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
       colD = result.gridModel; 
       colN = result.colNames; 
       colM = result.colModel; 

       jQuery("#refData").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, 
        loadComplete: function(data){alert('loaded');}, 
        loadError: function(xhr,status,error){alert('error');} 
       }) 
     }, 
     error: function(x, e) 
     { 
       alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
     }); 
    setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500); 
}); 
</script> 
<h2>Maintain Reference Data</h2> 
<table id="refData"> 
<tr> 
    <td /> 
</tr> 
</table> 
<div id="pager"></div> 
</html>

Мои данные в формате JSON:

{"JSON":"success","colModel":[{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}],"colNames":["UserInfo ID","User ID"],"gridModel":[{"userID":"SMI","userInfoId":5},{"userID":"ABC","userInfoId":7},{"userID":"PQR","userInfoId":8},{"userID":"FUR","userInfoId":10},{"userID":"COO","userInfoId":13}],"page":1,"records":56,"rows":15,"sidx":null,"sord":"asc","total":0}

источник

2010-10-05 VJ.

мне кажется, что вы забыли включить {} как содержат в gridModel. в настоящее время данные выглядит

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "sidx": null, 
    "sord": "asc", 
    "total": 0 
}

вместо

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": { [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "total": 0 
    } 
}

Использование "jsonmap" кажется мне тоже не очень нужен.

источник

2010-10-05 23:32:04 Oleg

Ты требовалось совсем близко .. Дальнейшие изменения .. как массив записей было имеют имя для правильного json. поэтому {"dataatet": [..], ...}. Другой элемент, который я отсутствовал, устанавливал repeatitem в false и давал правильный корень. –

Большое спасибо Олегу.

После изменения структуры моего json, как было предложено вами, а затем немного отладки, чтобы исправить некоторые атрибуты (например, root), я смог заставить его работать. Вот окончательный JSON и HTML:

Html:

$.ajax(
    { 
     type: "POST", 
     url: "refData-table.json", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
      colD = result.gridModel; 
      colN = result.colNames; 
      colM = result.colModel; 

      jQuery("#refData").jqGrid({ 
       jsonReader : { 
        repeatitems: false, 
        root:"dataset", 
        cell: "", 
        id: "0" 
       }, 
       url: 'SomeUrl/Getdata', 
       datatype: 'jsonstring', 
       mtype: 'POST', 
       datastr : colD, 
       colNames:colN, 
       colModel :colM, 
       pager: jQuery('#pager2'), 
       rowNum: 5, 
       rowList: [5, 10, 20, 50], 
       viewrecords: true, 
       loadComplete: function(data){alert('loaded');}, 
       loadError: function(xhr,status,error){alert('error');} 
      }) 
     }, 
     error: function(x, e) 
     { 
      alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
    }); 
    setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);

JSON:

{ 
"JSON":"success", 
"colModel":[ 
    {"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300}, 
    {"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300} 
    ], 
"colNames":["UserInfo ID","User ID"], 
"gridModel":{ 
    "dataset":[ 
     {"userID":"SMI","userInfoId":5}, 
     {"userID":"ABC","userInfoId":7}, 
     {"userID":"PQR","userInfoId":8}, 
     {"userID":"FUR","userInfoId":10}, 
     {"userID":"COO","userInfoId":13} 
     ], 
    "page":1, 
    "records":56, 
    "rows":15, 
    "sidx":null, 
    "sord":"asc", 
    "total":0 
    } 
}

источник

2010-10-06 15:10:06

Ваш набор данных можно дополнительно оптимизировать, отправив только массив значений и указав repeatitems: true (в jsonReader) – msanjay

Динамическое население JQGrid colModel и данные

ответ

Смежные вопросы