easyUI自定义DataGrid分页栏

最新推荐文章于 2023-04-29 08:13:56 发布

iteye_6233

最新推荐文章于 2023-04-29 08:13:56 发布

阅读量176

点赞数

文章标签： javascript json ViewUI

本文介绍如何使用DataGrid实现分页功能，并通过自定义工具栏添加搜索、添加及编辑按钮，增强交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

datagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个datagrid 和添加一些自定义按钮在分页工具栏.

查看 Demo

创建 DataGrid

<table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px"  
        url="data/datagrid_data.json"  
        iconCls="icon-save" pagination="true">  
    <thead>  
        <tr>  
            <th field="itemid" width="80">Item ID</th>  
            <th field="productid" width="80">Product ID</th>  
            <th field="listprice" width="80" align="right">List Price</th>  
            <th field="unitcost" width="80" align="right">Unit Cost</th>  
            <th field="attr1" width="100">Attribute</th>  
            <th field="status" width="60" align="center">Stauts</th>  
        </tr>  
    </thead>  
</table>

切记设置 pagination属性为true才会生成工具栏.

自定义工具栏

var pager = $('#tt').datagrid('getPager');    // 得到datagrid的pager对象
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的 pager 对象,然后重新创建pagination,我们隐藏pageList和添加三个新的按钮.