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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16418613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 04:34:54  来源:igfitidea点击:

How to load JSON Data in jQuery-jTable plugin?

javascriptjqueryhtmlajaxjquery-jtable

提问by Shobhit Sharma

I am working on creating a table form using jTableplugin. It mainly focus for ASP or PHP MVC but I'm trying to implement it with javascript/html and mongo backend.

我正在使用jTable插件创建表格表单。它主要针对 ASP 或 PHP MVC,但我正在尝试使用 javascript/html 和 mongo 后端来实现它。

I went through entire jTable API documentationand I found out there is possibility of populating json schema api into table, quite similiar in flexigrid.

我浏览了整个jTable API 文档,发现有可能将 json 模式 api 填充到表中,这在 flexigrid 中非常相似。

The code looks like:

代码如下:

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

If anyone can help me to find out where should I use URL property or is there any other method in the API reference to GET the data and display in table. Please let me know!

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

采纳答案by izazueta

You can directly load JSON data by setting the 'listAction' to a JSON document .

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

Example:

例子:

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

Your JSON file needs to have the same fields specified and the next structure:

您的 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)\/"}
   ]
}

The common way is to point the 'listAction' to a server side script (PHP,ASP.NET...) that return the above JSON object.

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

Check the listActionAPI reference for more information: ApiReference-listAction

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

回答by user2916183

Use the addRecordaction. It gives you the option to specify clientOnly: truewhich will prevent jtable from making a server call when you edit a row. More Information - jtable.org-addRecord

使用addRecord动作。它使您可以选择clientOnly: true在编辑行时指定哪个将阻止 jtable 进行服务器调用。更多信息 - jtable.org-addRecord