Jquery EasyUI datagrid 数据表格后台数据呈现及分页

最新推荐文章于 2019-04-23 11:08:32 发布

请干了这碗鸡汤

最新推荐文章于 2019-04-23 11:08:32 发布

阅读量506

点赞数

本文链接：https://blog.csdn.net/qq_23296327/article/details/84964894

版权

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>

这是从一个大哥那抄的。