EasyUI 自定义DataGrid分页

谁借莪１个温暖的怀抱￠ 2022-03-27 05:43 317阅读 0赞

DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。  
![\\][20120708094955555.png]  
标记  
<table id="tt"></table>  
创建DataGrid

$('#tt').datagrid({
       
    
        title:'Load Data',
    
        iconCls:'icon-save',
    
        width:550,
    
        height:250,
    
        pagination:true,
    
        url:'datagrid_data.json',
    
        columns:[[
    
            {field:'itemid',title:'Item ID',width:80},
    
            {field:'productid',title:'Product ID',width:80},
    
            {field:'listprice',title:'List Price',width:80,align:'right'},
    
            {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
    
            {field:'attr1',title:'Attribute',width:100},
    
            {field:'status',title:'Status',width:60}
    
        ]]
    
    });

记住设置pagination属性为true产生页面工具栏。  
自定义页面工具栏

var pager = $('#tt').datagrid('getPager');    //得到DataGrid页面
    
    pager.pagination({
       
    
        showPageList:false,
    
        buttons:[{
       
    
            iconCls:'icon-search',
    
            handler:function(){
       
    
                alert('search');
    
            }
    
        },{
       
    
            iconCls:'icon-add',
    
            handler:function(){
       
    
                alert('add');
    
            }
    
        },{
       
    
            iconCls:'icon-edit',
    
            handler:function(){
       
    
                alert('edit');
    
            }
    
        }],
    
        onBeforeRefresh:function(){
       
    
            alert('before refresh');
    
            return true;
    
        }
    
    });

我们得到DataGrid页，然后重新构建页面。我们隐藏页列表然后添加新按钮

[20120708094955555.png]: http://www.glphp.com/uploadfile/2012/0708/20120708094955555.png