jsgrid与mvc数据绑定

时间:2017-05-30 01:46:53

标签: json asp.net-mvc jsgrid

我正在尝试将jsGrid与json数据或对象列表绑定..无论什么是可能的..

$("#mapsDiv").jsGrid({
        height: "auto",
        width: "100%",

        sorting: true,
        paging: false,
        autoload: true,
        data: students,
        controller: {
            loadData: function () {
                var d = $.Deferred();

                $.ajax({
                    url: '@Url.Action("About", "Home")',
                    dataType: "json"
                }).done(function (response) {
                    d.resolve(response.value);
                });

                return d.promise();
            }
        },

        fields: [
            { name: "firstname", type: "text" },
            { name: "surname", type: "text"},
            {
                name: "birthdate", type: "text"
            },
            {
                name: "classname", type: "text"
            }
        ]
    });

的HomeController

public ActionResult About(){
...
return Json(students, JsonRequestBehavior.AllowGet);
}

OR

public ActionResult About(){
...
return View(students);
}

在json的情况下,我的网页只显示一个原始的json字符串,如果我返回一个学生对象列表,其他一切都在页面上但没有网格。

我做错了什么?

另外,我可以像使用标记一样将此网格与@Model绑定吗?

1 个答案:

答案 0 :(得分:0)

我最近遇到了一个类似的问题,即无法操纵json数据并且无法将静态数据传递给我的数据字典。

在查看http://js-grid.com/docs/之后,这是我如何使用自定义rowRenderer(您可以轻松嵌入逻辑)来处理jsGrid数据的示例

我的JS jsgrid代码看起来像这样

$("#jsGrid").jsGrid({

data : [{ 'name' : 'Louise' , 'duties' : ['pranks', 'busing tables'] }, 
        { 'name' : 'Linda' , 'duties' : ['waiting tables', 'singing', 'comedic relief'] }],

rowRenderer: function(item, itemIndex) {
     var newRow = $('<tr>'); // create a new, empty HTML tr element

     let nameCell = $('<td>');
     let dutiesCell = $('<td>');
     let summaryCell = $('<td>');

     let nameCellData = item['name']
     let dutiesCellData = item['duties']
     let summaryCellData = 'This is row ' + itemIndex + ' of this grid. The name of the employee that this row is about is ' + item['name'] + ' and she has ' + item['duties'].length + ' duties at the family restaurant!';


     $(nameCell).append(document.createTextNode(nameCellData));
     $(dutiesCell).append(document.createTextNode(dutiesCellData));
     $(summaryCell).append(document.createTextNode(summaryCellData));


     $(newRow).append(nameCell);
     $(newRow).append(dutiesCell);
     $(newRow).append(summaryCell);

     return newRow;
},

.....(在这里插入jsgrid配置的其余部分)

主要的拯救恩典是被忽视的rowRenderer。从文档中,函数可以使用 item ,用于迭代我的示例数组中的字典, itemIndex 是jsGrid中的行号(这可能对稍后格式化),我利用这种格式在项目上调用我自己的键。我希望这有帮助!