从JSON获取数据到jqGrid

时间:2014-05-20 15:50:56

标签: jquery json jqgrid

我试图从data获取:

 jQuery(document).ready(function() {

 var mydata;
        $.getJSON('@Url.Action("GetJsonData", "Home")', function(data) {

            datatype: 'json',
                mydata = data;
            // alert(mydata);

        });

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'
        });

数据如下:

{
    "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"
  },

我试过了:datatype: jsonstringdatastr: datadata: data ..所有都没有给我任何内容或 p.colModel为null或不是对象

getJSON方法中的数据就在那里。只是不确定如何通过它。

更新:以下是我在MVC 4 Razor中使用DataTable工作的方式。

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
            }
        }

    }

在我看来(Index.cshtml),我在url的{​​{1}}中调用该方法。

jQGrid

4 个答案:

答案 0 :(得分:2)

我看到的主要问题是列的命名与输入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},

选项cmTemplate允许您在colModel中设置常用属性。我建议您在所有网格中使用gridview: trueautoencode: true

此外,您可以使用

url: '@Url.Action("GetJsonData", "Home")',
datatype: "json",
loadonce: true

而不是使用$.getJSON

答案 1 :(得分:0)

根据@Oleg的说法,您应该删除jQuery(document).ready上的函数并在jqGrid上设置此选项:

$("#grid").jqGrid({
    url: '@Url.Action("GetJsonData", "Home")',
    datatype: "json",
    width: '100%',
    // and so on
...
});

答案 2 :(得分:0)

您的数据格式是否可以更改?最好的方法是根据需要从服务器获取它,例如:

  { 
  "totalpages": "xxx", 
  "currpage": "yyy",
  "totalrecords": "zzz",
  "invdata" : [
    {"id" :"1", "cell" :["1.0", "23", "INSTITUTIONAL MONEY MARKET FUND", ...]},
    {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
      ...
  ]
}

如果你不能 - 你仍然可以将数据更改为某个'new_data',因此它将采用上述格式(取自jqgrid wiki1

如果您仍然选择使用代码 - 请考虑以下事项:

  

datastr - datatype参数设置为xmlstring或jsonstring时的数据字符串

(摘自jqgrid wiki2) 你的数据类型是'json' 希望这会帮助你..

答案 3 :(得分:0)

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; }
},

在你的$(&#34;#grid&#34;)。jqGrid call中添加它。