码迷,mamicode.com
首页 > 其他好文 > 详细

easyUI dataGrid使用

时间:2014-06-25 14:00:30      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:分页控件   style   class   blog   code   ext   

前台js

//加载数据表格
    $("#tab_user").datagrid({
        title:"用户表",
        iconCls:‘icon-edit‘,//图标 
        url:"getAllUserInfo",
        fitColumns:"true",
        striped:"true",
        nowrap:"true",
        loadMsg:"正在努力加载",
        pagination:"true",
        rownumbers:"true",
        showHeader:"true",
        toolbar: [{  
            text: ‘添加‘,  
            iconCls: ‘icon-add‘,  
            handler: function() {
                $("#add").dialog("open").dialog(‘添加信息‘, ‘New User‘); 
            }  
        }, ‘-‘, {  
            text: ‘修改‘,  
            iconCls: ‘icon-edit‘, 
            id:"",
            handler: function() {  
                
            }  
        }, ‘-‘,{  
            text: ‘删除‘,  
            iconCls: ‘icon-remove‘,  
            handler: function(){  
                $("#dd").show();
            }  
        }], 
    });    
    
     //设置分页控件  
    var p = $(‘#tab_user‘).datagrid(‘getPager‘);  
    
    $(p).pagination({  
        pageSize: 10,//每页显示的记录条数,默认为10  
        pageList: [5,10,15],//可以设置每页记录条数的列表  
        beforePageText: ‘第‘,//页数文本框前显示的汉字  
        afterPageText: ‘页    共 {pages} 页‘,  
        displayMsg: ‘当前显示 {from} - {to} 条记录   共 {total} 条记录‘,  
        
    });

注意事项:编辑器会自动向后台传入两个个参数
1 rows 每页显示多少行
2 page 当前显示的页数 后台需要向前台返回json字符串
字符串格式为
{
    "total": 15,//代表总行数
    "rows": [//每一页的单独数据
        {
            "u_id": 1,
            "u_name": "张杰",
            "u_role": 1
        },
        {
            "u_id": 2,
            "u_name": "aa",
            "u_role": 2
        },
        {
            "u_id": 3,
            "u_name": "bb",
            "u_role": 3
        },
        {
            "u_id": 4,
            "u_name": "cc",
            "u_role": 4
        },
        {
            "u_id": 5,
            "u_name": "dd",
            "u_role": 5
        },
        {
            "u_id": 6,
            "u_name": "ee",
            "u_role": 6
        },
        {
            "u_id": 7,
            "u_name": "ff",
            "u_role": 7
        },
        {
            "u_id": 8,
            "u_name": "gg",
            "u_role": 8
        },
        {
            "u_id": 9,
            "u_name": "hh",
            "u_role": 9
        },
        {
            "u_id": 10,
            "u_name": "ii",
            "u_role": 10
        }
    ]
}

 


 

easyUI dataGrid使用,布布扣,bubuko.com

easyUI dataGrid使用

标签:分页控件   style   class   blog   code   ext   

原文地址:http://www.cnblogs.com/zhangjie9142/p/3806635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!