jsgrid与mvc数据绑定

Question

我正在尝试将 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);
}

或

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

如果是 json，我的网页只显示原始 json 字符串，如果我返回学生对象列表，其他所有内容都在页面上但没有网格。

我做错了什么？

顺便说一句，我可以像在标记中那样将此网格与@Model 绑定吗？

Answer 1

我最近遇到了一个类似的问题，无法操作 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 中的行号（这可能有助于稍后格式化），我利用这种格式在 item 上调用我自己的键。我希望这会有所帮助！