jQuery EasyUI Data Grid - Custom Paging
Data Grid (cuadrícula de datos) construyó un bonito fichas de la función, la costumbre es bastante simple. En este tutorial, vamos a crear una cuadrícula de datos (cuadrícula de datos), y en la barra de herramientas pestaña para añadir algunos botones personalizados.
Creación de una cuadrícula de datos (DataGrid)
<Tabla de id = title = clase "tt" "Cargar datos" = estilo "easyui-cuadrícula de datos" = "width: 550px; altura: 250px" url = "data / datagrid_data.json" iconCls = "icono-save" paginación = "true"> <Culata en T> <Tr> <Campo Th = "Itemid" width = "80"> ID del elemento </ th> <Campo Th = "ProductID" width = "80"> Identificación del producto </ th> <Th Campo = "Precio de la lista" width = "80" align = "right"> Lista de Precios </ th> <Campo Th = "unitcost" width = "80" align = "right"> Costo unitario </ th> <= Th Campo anchura "attr1" = "100"> Atributo </ th> <Campo Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Culata en T> </ Table>
Recuerde, estableciendo la propiedad "paginación" es cierto, esto generará una barra de herramientas de paginación.
Barra de herramientas de paginación personalizada
var localizador = $ ( '# tt') cuadrícula de datos ( 'getPager') ;. // obtener el localizador de cuadrícula de datos pager.pagination ({ showPageList: falso, botones: [{ iconCls: 'icono de búsqueda', manejador: function () { alert ( 'buscar'); } }, { iconCls: 'icono-add', manejador: function () { alert ( 'añadir'); } }, { iconCls: 'icono-edit', manejador: function () { alert ( 'editar'); } }], onBeforeRefresh: function () { alert ( 'antes de refresco'); return true; } });
Como se puede ver, se obtiene la primera cuadrícula de datos (cuadrícula de datos) del objeto localizador, y luego volver a crear la página (paginación). Nos escondemos la lista de páginas, y añadimos tres nuevos botones.