如何在jQuery-jTable插件中加载JSON数据

How to load JSON Data in jQuery-jTable plugin?

本文关键字：加载 JSON 数据 插件 jQuery-jTable      更新时间：2023-09-26

我正在使用jTable插件创建一个表格。它主要集中在ASP或PHP MVC，但我试图实现它与javascript/html和后台mongo。

我浏览了整个jTable API文档，我发现有可能将json模式API填充到表中，非常类似于flexigrid。

代码如下:

 $(document).ready(function () {
          $('#feeds-table').jtable({
              title: 'Accounts',
              pageSize: 15,
              ajaxSettings: {
                  type: 'GET',
                  dataType: 'json'
              },
              actions: {
              },
              fields: {
                  id: {
                      key: true,
                      list: false
                  },
                  username: {
                      title: 'Username',
                      width: '10%'
                  },
                  email: {
                      title: 'Email',
                      width: '10%'
                  },
                  applications: {
                      title: 'Applications',
                      width: '10%'
                  },
                  sites: {
                      title: 'Sites',
                      width: '10%'
                  },
                  verticals: {
                      title: 'Verticals',
                      width: '10%'
                  },
                  roles: {
                      title: 'Roles',
                      width: '10%'
                  },
                  profiles: {
                      title: 'Record date',
                      width: '30%',
                      type: 'date',
                      create: false,
                      edit: false
                  }
              }
          });
      });

如果有人可以帮助我找出我应该在哪里使用URL属性，或者在API引用中是否有任何其他方法来获取数据并在表中显示。请让我知道!

您可以通过将'listAction'设置为JSON文档来直接加载JSON数据。

的例子:

actions: {
  listAction: 'url/file.json',
},

您的JSON文件需要指定相同的字段和下一个结构:

{
 "Result":"OK",
   "Records":[
    {"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"'/Date(1320259705710)'/"},
    {"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"'/Date(1320259705710)'/"},
    {"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"'/Date(1320259705710)'/"},
    {"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"'/Date(1320259705710)'/"}
   ]
}

常见的方法是将'listAction'指向返回上述JSON对象的服务器端脚本(PHP,ASP.NET…)。

查看listAction API参考以获取更多信息:ApiReference-listAction

使用addRecord动作。它为您提供了指定clientOnly: true的选项，这将防止jtable在编辑行时进行服务器调用。更多信息- jtable.org-addRecord

相关文章：