0

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

家庭控制器

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

或者

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

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

我究竟做错了什么？

附带说明一下，我可以像在标记中那样将此网格与@Model 绑定吗？

4

1 回答 1

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 中的行号（这可能有助于稍后格式化），我利用这种格式来调用我自己的项目钥匙。我希望这有帮助！

于 2017-07-04T19:31:12.697 回答