jQuery EasyUI Data Grid - Benutzerdefinierte Paging
Data Grid (Datagrid) baute ein nettes Feature Tabs, benutzerdefinierte ganz einfach. In diesem Tutorial werden wir ein Datengitter (Datagrid) und auf der Registerkarte Symbolleiste hinzufügen einige benutzerdefinierte Schaltflächen erstellen.
Erstellen eines Data Grid (Datagrid)
<Table id = "tt" title = "Load Data" class = "easyui-Datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" iconCls = "icon-save" Paginierung = "true"> <Thead> <Tr> <Th Feld = "itemid" width = "80"> Item ID </ th> <Th Feld = "productid" width = "80"> Product ID </ th> <Th Feld = "gelisteter" width = "80" align = "right"> Listenpreis </ th> <Th Feld = "Unitcost" width = "80" align = "right"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "100"> Attribut </ th> <Th field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Denken Sie daran, das Setzen von "Paginierung" Eigenschaft true ist, wird dies eine Paging-Symbolleiste erzeugen.
Benutzerdefinierte Paging Toolbar
var Pager = $ ( '# tt') Datagrid ( 'getPager') ;. // erhalten die Pager von Datagrid pager.pagination ({ showPageList: false, Tasten: [{ iconCls: 'icon-Suche', Handler: function () { alert ( 'Suche'); } }, { iconCls: 'icon-Add' Handler: function () { alert ( 'Add'); } }, { iconCls: 'icon-edit', Handler: function () { alert ( 'bearbeiten'); } }], onBeforeRefresh: function () { alert ( 'vor Refresh'); return true; } });
Wie Sie sehen können, erhalten wir die erste Datengitter (Datagrid) des Pager-Objekt und dann auf die Seite (Paginierung) neu zu erstellen. Wir verstecken die Liste der Seiten, und drei neue Schaltflächen hinzufügen.