Json 与mvc数据绑定的jsgrid

我试图用json数据或对象列表绑定jsGrid..尽可能

$("#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);
}

或

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

我做错了什么

---

另一方面，我可以像在标记中那样用@Model绑定这个网格吗？

我最近遇到了一个类似的问题，即无法操作json数据，并且无法通过向数据字典应用密钥来传递静态数据

环顾四周后，这是一个我如何使用自定义行渲染器（您可以轻松地将逻辑嵌入其中）来处理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”）.jsGrid({
数据：[{'name'：'Louise'，'duffices'：['pranks'，'busing tables']}，
{‘姓名’：‘琳达’，‘职责’：[‘等候台’、‘唱歌’、‘喜剧救济’]}，
rowRenderer:函数（项、项索引）{
var newRow=$（''）；//创建一个新的空HTML tr元素
设nameCell=$（''）；
让dutiesCell=$（''）；
设summaryCell=$（''）；
让nameCellData=item['name']
让dutiesCellData=项目[“职责”]
设summaryCellData='这是此网格的行'+itemIndex+'。这一行涉及的员工的姓名是'+item['name']+'，她有'+item['Duffices']'。长度+'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）；
返回新行；
},

…（在此处插入jsgrid配置的其余部分）

---

主要的保存优势是忽略的行渲染器。从文档中，函数可以使用item，它用于迭代我的示例数组中的字典，itemIndex是jsGrid中的行号（这可能有助于以后的格式化），我利用这种格式在项上调用我自己的键。

我希望这有帮助！

在网络中检查您得到的响应。检查模型属性的大小写。关于“侧注”是的，您可以。将数据绑定到表后，只需在该表上调用jqgird函数。我尝试使用var values=@Html.Raw（Json.Encode）（模范学生），成功了！！现在我如何定义一个模板，使其能够在上述4列的基础上动态添加x个列？您需要手动添加。@Samra不确定我的答案是否有帮助我停止使用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;
},