使用jTable上的listAction从json文件加载数据

时间:2014-08-21 09:19:37

标签: json jtable load

我是java中的新蜜蜂...... 不能解决它,我确信它很容易,所以我想知道是否有人可以帮助我,请... 所以,我想使用jTable pluging在html中查看我的json数据,请一些帮助 使用netbeans我的test.json文件格式为

 {
"Result": "OK",
"TotalRecordCount": 23,
"Records": [
    {
        "vEmail": "miad@gmail1.com",
        "vUserName": "admin",
        "nDepartmentId": "652",
        "nEnabled": "1",
        "department": 62,
        "vFatherName": "mixalis",
        "vSurname": "mixalis",
        "vAfm": "5678678",
        "vUsertype": "",
        "vName": "mixalis",
        "nId": "5651",
        "rolesDesc": ""
    },

依此类推我的代码使用listAction url和load方法但是我在这里缺少smthg ??它是什么?它是一个支架吗?它是一架飞机吗?它是一列火车吗?没有它的超人......(那个是个笑话), 我的代码                                                    

    <link rel="stylesheet" href="/test/css/template.css" type="text/css" />
  <!-- Include one of jTable styles. -->
    <link href="/test/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" /> 
  <!-- Include jTable script file. -->
    <script src="/test/jtable/jquery.jtable.min.js" type="text/javascript"></script>
  <script type="text/javascript">
$(document).ready(function () {
    $('#PersonTableContainer').jtable({
        title: 'Kyriakos Test with Table of Persons',
        actions: {
            listAction: '/test/test.json'               
        },
        fields: {
            PersonId: {
                key: true,
                list: false
            },
            vEmail: {
                title: 'Email',
                width: '8.3%'
            },
            vUserName: {
                title: 'User Name',
                width: '8.3%'
            },
            nDepartment: {
                title: 'Department',
                width: '8.3%'
                },
            nEnabled: {
                title: 'Enabled',
                width: '8.3%'
                },
            department: {
                title: 'Department',
                width: '8.3%'
                },
            vFatherName: {
                title: 'Father Name',
                width: '8.3%'
                },
            vSurname: {
                title: 'Surname',
                width: '8.3%'
                },
            vAfm: {
                title: 'Afm',
                width: '8.3%'
                },
            vUsertype: {
                title: 'User Type',
                width: '8.3%'
                 },
            vName: {
                title: 'Name',
                width: '8.3%'
                 },
            nId: {
                title: 'Id',
                width: '8.3%'
                 },
            rolesDesc: {
                title: 'Roles Desc',
                width: '8.3%'

          }

        }
      $('#PersonTableContainer').jtable('load');
   });
});

</head>
<body>
<div id="PersonTableContainer"></div>
</body>
</html>

是什么?哦,我很困惑......

1 个答案:

答案 0 :(得分:0)

       <html>
       <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <link href="/test/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
       <script src="/test/js/jquery.js" type="text/javascript" charset="utf-8"></script>
       <script src="/test/js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

       <link rel="stylesheet" href="/test/css/template.css" type="text/css" />
       <!-- Include one of jTable styles. -->
       <link href="/test/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" /> 
       <!-- Include jTable script file. -->
       <script src="/test/jtable/jquery.jtable.min.js" type="text/javascript"></script>
       <script type="text/javascript">
       $(document).ready(function () {
       $('#PersonTableContainer').jtable({
        title: 'Kyriakos Test with Table of Persons',
        actions: {
           listAction: '/test/test.json',
            createAction: '/GettingStarted/CreatePerson',
            updateAction: '/GettingStarted/UpdatePerson',
            deleteAction: '/GettingStarted/DeletePerson'           
        },
        fields: {
            PersonId: {
                key: true,
                list: false
            },
            vEmail: {
                title: 'Email',
                width: '8.3%'
            },
            vUserName: {
                title: 'User Name',
                width: '8.3%'
            },
            nDepartment: {
                title: 'Department',
                width: '8.3%'
                },
            nEnabled: {
                title: 'Enabled',
                width: '8.3%'
                },
            department: {
                title: 'Department',
                width: '8.3%'
                },
            vFatherName: {
                title: 'Father Name',
                width: '8.3%'
                },
            vSurname: {
                title: 'Surname',
                width: '8.3%'
                },
            vAfm: {
                title: 'Afm',
                width: '8.3%'
                },
            vUsertype: {
                title: 'User Type',
                width: '8.3%'
                 },
            vName: {
                title: 'Name',
                width: '8.3%'
                 },
            nId: {
                title: 'Id',
                width: '8.3%'
                 },
            rolesDesc: {
                title: 'Roles Desc',
                width: '8.3%'

          }

        }

      });
    $('#PersonTableContainer').jtable('load');
   });

   </script>     

   </head>
   <body>
   <div id="PersonTableContainer"></div>
   </body>
   </html>