Dynamic Population of JQGrid colModel and data
I am trying to create the grid dynamically. My objective is to create a sort of dynamic front end to show some of the database tables. So I need to add / remove columns dynamically. I need to change the datatypes of the columns dynamically.
I used the script provided as answer in a similar question.
I get my grid constructed it shows my columns. But no data gets loaded in the grid. Firebug shows the request getting fired. Proper json data returned. In fact grid also fires gridComplete event. But no data is shown :-(
Has anyone faced this issue? I spent entire day tweaking the jsonReader and colModel to no avail
My sample html file:
<!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>
&开发者_StackOverflow社区lt;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>
My json data:
{"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}
It seems to me that you forget to include {} as a contain of gridModel. Currently the data looks like
{
"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
}
instead of
{
"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
}
}
The usage of "jsonmap" seems me also not really needed.
Thanks a lot Oleg.
After modifying structure of my json as suggested by you and then debugging a little to fix some attribs( like root), I was able to get it to work. Here is final json and 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
}
}
加载中,请稍侯......
精彩评论