我正在尝试动态创建网格。我的目标是创建一种动态前端来显示一些数据库表。所以我需要动态添加/删除列。我需要动态更改列的数据类型。
我使用了在 a similar question 中作为答案提供的脚本.
我构建了我的网格，它显示了我的列。但是没有数据被加载到网格中。 Firebug 显示请求被触发。返回正确的 json 数据。事实上 grid 也会触发 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}
最佳答案
在我看来，您忘记包含 {} 作为 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"的用法看来我也不是真的需要。
关于jquery - JQGrid colModel 和数据的动态填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3867459/