2013-05-07 52 views
2

我正在使用jTable插件創建表格窗體。它主要關注ASP或PHP MVC,但我試圖用javascript/html和mongo後端來實現它。如何在jQuery-jTable插件中加載JSON數據?

我經歷了整個jTable API documentation,我發現有可能將json schema 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參考來獲取數據並顯示在表中的任何其他方法。請告訴我!

回答

1

您可以通過將'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」指向服務器端腳本(PHP,ASP.NET ...),它返回上面的JSON對象。

檢查以瞭解更多信息listAction API參考: ApiReference-listAction

0

使用addRecord行動。它提供了指定clientOnly: true的選項,這將防止jtable在編輯行時發起服務器調用。更多信息 - jtable.org-addRecord