jQuery 从 JSON 获取数据到 jqGrid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23764580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get data from JSON to jqGrid
提问by Mark C.
I'm trying to get datafrom:
我试图data从：
jQuery(document).ready(function() {
var mydata;
$.getJSON('@Url.Action("GetJsonData", "Home")', function(data) {
datatype: 'json',
mydata = data;
// alert(mydata);
});
To my jqGrid:
给我的jqGrid：
$("#grid").jqGrid({
datastr: data,
datatype: 'json',
width: '100%',
colNames: ["Seq ID", "Fund ID", "Name", "Fund", "Bonus", "Allocation", "Blank", "Begin", "End"],
colModel: [
{
name: 'seqid',
index: 'seqid',
editable: true,
}, {
name: 'fund id',
index: 'fund id',
editable: true,
}, {
name: 'name',
index: 'name',
editable: true,
}, {
name: 'fund',
index: 'fund',
editable: true,
}, {
name: 'bonus',
index: 'bonus',
editable: true,
}, {
name: 'allocation',
index: 'allocation',
editable: true,
}, {
name: 'blank',
index: 'blank',
editable: true,
}, {
name: 'begin',
index: 'begin',
editable: true,
}, {
name: 'end',
index: 'end',
editable: true,
}
],
pager: '#pager',
'cellEdit': true,
'cellsubmit': 'clientArray',
editurl: 'clientArray'
});
Data looks like:
数据看起来像：
{
"FUND_SEQ_ID": 1.0,
"FUND_ID": 23,
"FUND_NM": "INSTITUTIONAL",
"FUND_TICKER_NM": "TINXX",
"FUND_SALARY_IND": "A",
"FUND_BONUS_IND": "N",
"FUND_ALCTN_IND": "\u0000", <- This should be null
"BEG_DT": "20140101",
"END_DT": "24000101"
},
I tried: datatype: jsonstring, datastr: data, data: data.. all give me nothing or p.colModel is null or not an object.
我试过：datatype: jsonstring, datastr: data, data: data.. all 什么都不给我或者p.colModel is null or not an object。
The data in the getJSONmethod is there. Just not sure how to pass it.
getJSON方法中的数据就在那里。只是不知道如何通过它。
Update: Here's how I got it to work using a DataTablein MVC 4 Razor.
更新：这是我DataTable在 MVC 4 Razor 中使用 a 使其工作的方法。
In HomeController.csI have a method:
在HomeController.cs我有一个方法：
public string GetAssociateFromDb()
{
DataTable dt = new DataTable();
string jsonData;
string connString = ConfigurationManager.ConnectionStrings["DEFCOMP"].ConnectionString;
using (SqlConnection connection = new SqlConnection())
{
connection.ConnectionString = connString;
using (var cmd = new SqlCommand("SELECT * FROM FUND", connection))
{
connection.Open();
SqlDataAdapter myAdapter = new SqlDataAdapter(cmd);
myAdapter.Fill(dt);
return JsonConvert.SerializeObject(dt); // Converted to JSON string
}
}
}
In my view (Index.cshtml), I call that method in the urlof jQGrid.
在我看来 ( Index.cshtml)，我在urlof 中调用该方法jQGrid。
$(document).ready(function() {
jQuery("#grid").jqGrid({
url: '@Url.Action("GetAssociateFromDb", "Home")',
datatype: "json",
width: '100%',
colNames: ["Seq ID", "Fund ID", "Name", "Fund", "Salary", "Bonus", "Allocation", "Begin", "End"],
colModel: [
{ name: "FUND_SEQ_ID" },
{ name: "FUND_ID" },
{ name: "FUND_NM" },
{ name: "FUND_TICKER_NM" },
{ name: "FUND_SALARY_IND" },
{ name: "FUND_BONUS_IND" },
{ name: "FUND_ALCTN_IND" },
{ name: "BEG_DT" },
{ name: "END_DT" }
],
cmTemplate: { editable: true },
// data: JSON.parse(data), // Load Data
rowNum: 10, // Total records to show at a time by default
loadonce: true,
rowList: [10, 20], // For Paging
pager: '#pager',
jsonReader: {
repeatitems: false,
page: function () { return 1; }, // This was necessary.
root: function (obj) { return obj; },
records: function (obj) { return obj.length; }
},
viewrecords: true,
gridview: true,
autowidth: true,
height: 'auto',
hoverrows: true,
caption: "List of Funds"
});
});
采纳答案by Oleg
The main problem which I see is the naming of columns not the same as in the input JSON data. Try to replace colModelto the following:
我看到的主要问题是列的命名与输入 JSON 数据中的不同。尝试替换colModel为以下内容：
colModel: [
{ name: "FUND_SEQ_ID" },
{ name: "FUND_ID" },
{ name: "FUND_NM" },
{ name: "FUND_TICKER_NM" },
{ name: "FUND_SALARY_IND" },
{ name: "FUND_BONUS_IND" },
{ name: "FUND_ALCTN_IND" },
{ name: "BEG_DT" },
{ name: "END_DT" }
],
cmTemplate: {editable: true},
The option cmTemplateallows you to set commonproperties in colModel. I recommend you also use gridview: trueand autoencode: truein all your grids.
该选项cmTemplate允许您设置共同的属性colModel。我建议您也在所有网格中使用gridview: true和autoencode: true。
Additionally you can use
此外，您可以使用
url: '@Url.Action("GetJsonData", "Home")',
datatype: "json",
loadonce: true
instead of usage of $.getJSON.
而不是$.getJSON.
回答by Aqib
loadonce: true,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return grid.jqGrid('getGridParam', 'page'); },
total: function (obj) { return Math.ceil(obj.length /
grid.jqGrid('getGridParam', 'rowNum')); },
records: function (obj) { return obj.length; }
},
add this aswell in your $("#grid").jqGrid call.
在你的 $("#grid").jqGrid 调用中添加这个。
回答by lucasdc
Based on what @Oleg said, you should remove your function on jQuery(document).readyand set this options on jqGrid:
根据@Oleg 所说的，您应该删除您的功能jQuery(document).ready并在 jqGrid上设置此选项：
$("#grid").jqGrid({
url: '@Url.Action("GetJsonData", "Home")',
datatype: "json",
width: '100%',
// and so on
...
});
回答by ItayB
Is your data format can be changed? The best way will be to get it from the server as needed, for example:
你的数据格式是可以改变的吗？最好的方法是根据需要从服务器获取它，例如：
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["1.0", "23", "INSTITUTIONAL MONEY MARKET FUND", ...]},
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
if you can't - you still can change your data to some 'new_data' so it will be in the above format (taken from jqgrid wiki1
如果你不能 - 你仍然可以将你的数据更改为一些“new_data”，因此它将采用上述格式（取自jqgrid wiki1
if you still choose to stay with your code - consider the following:
如果您仍然选择保留代码 - 请考虑以下事项：
datastr - The string of data when datatype parameter is set to xmlstring or jsonstring
datastr - 当 datatype 参数设置为 xmlstring 或 jsonstring 时的数据字符串
(taken from jqgrid wiki2) and your datatype is 'json' hope thats will help you..
（取自jqgrid wiki2）并且您的数据类型是 'json' 希望这对您有所帮助..
