HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Data Grid (datagrid) built a nice feature tabs, custom is quite simple. In this tutorial, we will create a data grid (datagrid), and on the tab toolbar to add some custom buttons.
<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>
Remember, setting 'pagination' property is true, this will generate a paging toolbar.
var pager = $ ( '# tt') datagrid ( 'getPager');. // get the pager of 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; } });
As you can see, we get the first data grid (datagrid) of the pager object, and then re-create the page (pagination). We hide the list of pages, and add three new buttons.