EasyUI 自定义DataGrid分页-白红宇

EasyUI 自定义DataGrid分页

阅读量：6884 次

发布时间：2019-06-27

本文共 1250 字，大约阅读时间需要 4 分钟。

DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

标记

创建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页，然后重新构建页面。我们隐藏页列表然后添加新按钮

转载地址：http://uanbl.baihongyu.com/

你可能感兴趣的文章

SAP HANA中SQLscript的数据类型

查看>>

一個傳統的C2C網站的用戶充值的过程

查看>>

hihoCoder #1142 : 三分求极值

查看>>

GET和POST的区别及get和post关于请求的编解码的问题

查看>>

一个大数运算类