使用easyui將json資料產生資料表格

標籤：lag   分享   使用   bsp   屬性   username   姓名   enter   頁面   

     1.首先需要用script引入jquery和easyui檔案。：

    2.html版面設定如下：

data-options裡面設定的屬性可根據需要自己定義，是否單選，是否設定分頁等等。

   3.引入easyui的css樣式。

   4.用ajax方法載入出資料。

注意：在成功以後的回呼函數中給頁面id為dg的盒子綁定資料。

   5.配置datagrid方法：

function fLoadTable(){
        $(‘#dg‘).datagrid({
             title: ‘使用者列表‘,
            width: 700,
            height: 300,
           fitColumns: true,

//對應json資料中的每一列
           columns : [ [ {
                 field : ‘id‘, //每一列的名字
                 width : ‘100‘,
                 title:‘ID‘,
                checkbox:true
             },{
               field : ‘flag‘,
               title : ‘職位‘,
               width : ‘100‘,
               align : ‘center‘
            }, {
               field : ‘userName‘,
               title : ‘姓名‘,
               width : ‘100‘,
              align : ‘center‘,
           },{
               field : ‘gender‘,
               title : ‘性別‘,
               width : ‘100‘,
               align : ‘center‘,
          },{
              field : ‘email‘,
              title : ‘郵箱‘,
              width : ‘100‘,
              align : ‘center‘,
           }
        ] ],
     idField:‘id‘,
     loadMsg:‘Processing, please wait …‘,
     pagination:true
});
}

  6.最後調用這兩個函數。

 

  7.效果

下面是我的json資料：

 

使用easyui將json資料產生資料表格