Jquery EasyUI datagrid 數據表格後臺數據呈現及分頁

Jquery EasyUI datagrid 數據表格後臺數據呈現及分頁

這裏就不貼完整的代碼了。

<div data-options="region:'center',title:'用戶列表'">
        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"
        >
            <thead>
            <tr>
                <th data-options="field:'sno',align:'center',width:'9%'"></th>
                <th data-options="field:'sname',align:'center',width:'9%'"></th>
                <th data-options="field:'password',align:'center',width:'9%'"></th>
                <th data-options="field:'tno',align:'center',width:'11%'"></th>
                <th data-options="field:'tname',align:'center',width:'9%'"></th>
                <th data-options="field:'tgrade',align:'center',width:'9%'"></th>
            </tr>
            </thead>
        </table>
        <div id="dgtoolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUsers()">添加用戶</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removeUsers()">刪除用戶</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="editUsers()">修改信息</a>
        </div>

    </div>

Jquery代碼

<script type="text/javascript">
    $("#datagrid").datagrid({
        url:'/stuinforlist',
        toolbar:"#dgtoolbar",
        pagination:true,
        columns:[[
             {field:'sno',title:'學號',width:100,hidden:false},
             {field:'sname',title:'姓名',width:100},
             {field:'password',title:'密碼',width:100},
             {field:'tno',title:'課程號',width:100},
            {field:'tname',title:'課程名',width:100},
            {field:'tgrade',title:'成績',width:100}
    ]],
        pageSize:25,
        pageList:[25,15,10],
        rownumbers:false,
        singleSelect:true
    });
</script>

以上是我的demo裏面需要的分頁和數據顯示更全的屬性設置也貼一下吧

<script type="text/javascript">
19       $('#mytb').datagrid({
20           title: '武俠小說人物',  //表格名稱
21           iconCls: 'icon-edit',  //圖標
22           width:480,   //表格寬度
23           height:'auto',   //表格高度，可指定高度，可自動
24           border:true,  //表格是否顯示邊框
25           url:'datagrid.php',   //獲取表格數據時請求的地址
26           columns:[[
27             {field:'id',title:'編號',width:100,hidden:false},
28             {field:'name',title:'姓名',width:100},
29             {field:'age',title:'年齡',width:100},
30             {field:'school',title:'江湖流派',width:100}
31           ]],
32           pagination:true,//如果表格需要支持分頁，必須設置該選項爲true
33           pageSize:5,   //表格中每頁顯示的行數
34           pageList:[5,10,15],
35           rownumbers:true,   //是否顯示行號
36           nowrap: false,   
37           striped: true,  //奇偶行是否使用不同的顏色
38           method:'get',   //表格數據獲取方式,請求地址是上面定義的url
39           sortName: 'ID',  //按照ID列的值排序
40           sortOrder: 'desc',  //使用倒序排序
41           idField: 'id',
42           loadMsg:'數據正在努力加載，請稍後...',   //加載數據時顯示提示信息
43           frozenColumns: [[  //固定在表格左側的欄
44                       {field: 'ck', checkbox: true},
45                     ]],
46           toolbar: [{
47                     text: '添加',
48                     iconCls: 'icon-add',
49                     handler: function() {
50                         getSelectIds('mytb','沒有選擇');
51                     }
52                 }, '-', {
53                     text: '刪除',
54                     iconCls: 'icon-cut',
55                     handler: function() {
56                       getSelectIds('mytb','沒有選擇');
57                     }
58                 }, '-', {
59                     text: '修改',
60                     iconCls: 'icon-save',
61                     handler: function() {
62                         getSelectIds('mytb','沒有選擇');
63                     }
64                 }]
65         });
66       </script>

這是從一個大哥那抄的。