1. Home
  2. jQuery EasyUI Data Grid - costume de paginação

O melhor tutorial jQuery EasyUI Data Grid - costume de paginação em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,

jQuery EasyUI Data Grid - costume de paginação

Data Grid (grade de dados) construiu um agradável guias da função, costume é bastante simples. Neste tutorial, vamos criar uma grade de dados (datagrid), e na barra de ferramentas guia para adicionar alguns botões personalizados.

Criando uma grade de dados (DataGrid) 

	<Id Tabela = "tt" title = class "Carga de Dados" = "easyui-datagrid" style = "width: 550px; height: 250px"
			url = "Dados / datagrid_data.json"
			iconCls = "icon-salvar" paginação = "true">
		<Thead>
			<Tr>
				<Field Th = "ItemId" width = "80"> Item ID </ th>
				<Field Th = "ProductID" width = "80"> ID do produto </ th>
				<Th campo = "ListPrice" width = "80" align = "right"> Listar preço </ th>
				<Field Th = "unitcost" width = "80" align = "right"> Custo Unitário </ th>
				<Th campo = largura "attr1" = "100"> Atributo </ th>
				<Field Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Lembre-se, definindo a propriedade 'paginação' é verdade, isso vai gerar uma barra de ferramentas paginação.

Barra de ferramentas de paginação personalizada 

	var pager = $ ( '# tt') datagrid ( 'getPager') ;. // obter o pager de datagrid
	pager.pagination ({
		showPageList: false,
		botões: [{
			iconCls: 'icon-search',
			handler: function () {
				alert ( 'search');
			}
		}, {
			iconCls: 'icon-add',
			handler: function () {
				alert ( 'add');
			}
		}, {
			iconCls: 'icon-edit',
			handler: function () {
				alert ( 'editar');
			}
		}],
		onBeforeRefresh: function () {
			alert ( 'antes refresh');
			return true;
		}
	});

Como você pode ver, temos a primeira grade de dados (datagrid) do objeto pager, e então re-criar a página (paginação). Nós ocultar a lista de páginas, e adicionar três novos botões.

Baixar exemplos jQuery EasyUI

jeasyui-datagrid-datagrid11.zip

Tutoriais quentes

Contact US

jQuery EasyUI Data Grid - costume de paginação
10/30