jQuery EasyUI Data Grid - Personnalisé Paging
Data Grid (DataGrid) construit une belle onglets de la fonction, la coutume est assez simple. Dans ce tutoriel, nous allons créer une grille de données (DataGrid), et la barre d'outils de tabulation pour ajouter des boutons personnalisés.
Création d'une grille de données (DataGrid)
<Table id = "tt" title = classe "Load Data" style = "easyui-datagrid" = "width: 550px; height: 250px" url = "data / datagrid_data.json" iconCls = "icon-save" pagination = "true"> <Thead> <Tr> <Field Th = "itemid" width = "80"> ID de l'article </ th> <Field Th = "ProductID" width = "80"> ID de produit </ th> <Th field = largeur "ListPrice" = "80" align = "right"> Prix </ th> <Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th> <Field Th = largeur "de attr1" = "100"> Attribut </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Rappelez-vous, définissant la propriété 'Pagination' est vrai, cela va générer une barre d'outils de pagination.
Barre d'outils personnalisée Paging
var pager = $ ( '# tt') datagrid ( 'getPager') ;. // obtenir le pager de datagrid pager.pagination ({ showPageList: false, boutons: [{ iconCls: «icon-recherche», gestionnaire: function () { alert ( 'search'); } }, { iconCls: 'icône ajoutée », gestionnaire: function () { alert ( 'ajouter'); } }, { iconCls: «icon-edit ', gestionnaire: function () { alert ( 'edit'); } }], onBeforeRefresh: function () { alert ( 'avant refresh'); return true; } });
Comme vous pouvez le voir, nous obtenons la première grille de données (DataGrid) de l'objet de téléavertisseur, puis re-créer la page (pagination). Nous cachons la liste des pages, et d'ajouter trois nouveaux boutons.