1. Home
  2. jQuery EasyUI Data Grid - criar barras de ferramentas complexas

O melhor tutorial jQuery EasyUI Data Grid - criar barras de ferramentas complexas em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,

jQuery EasyUI Data Grid - criar barras de ferramentas complexas

Data Grid (grade de dados) da barra de ferramentas (barra de ferramentas) podem conter botões e outros componentes. Você pode passar um um tags DIV existentes facilmente layout de barra de ferramentas personalizada, a tag DIV irá tornar-se o conteúdo da barra de ferramentas grade de dados (datagrid). Este tutorial irá mostrar-lhe como criar barra de ferramentas componentes (datagrid) complexas da grade de dados.

Criar uma barra de ferramentas (Toolbar) 

	<Div id = "tb" style = "padding: 5px; height: auto">
		<Div style = "margin-bottom: 5px">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"> </a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"> </a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"> </a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"> </a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"> </a>
		</ Div>
		<Div>
			Data de: <input class = "easyui-datebox" style = "width: 80px">
			Para: <input class = "easyui-datebox" style = "width: 80px">
			idioma: 
			<Input class = "easyui-combobox" style = "width: 100px"
					url = "Dados / combobox_data.json"
					ValueField = "id" textField = "text">
			<a href="#" class="easyui-linkbutton" iconCls="icon-search"> Pesquisa </a>
		</ Div>
	</ Div>

Criando uma grade de dados (DataGrid) 

	<Tabela class = "easyui-datagrid" style = "width: 600px; height: 250px"
			url = "Dados / datagrid_data.json" 
			title = "DataGrid - Toolbar Complex" toolbar = "# tb"
			singleSelect = "true" fitColumns = "true">
		<Thead>
			<Tr>
				<Field Th = "ItemId" width = "60"> Item ID </ th>
				<Field Th = "ProductID" width = "80"> ID do produto </ th>
				<Th campo = "ListPrice" align = largura "direito" = "70"> Listar preço </ th>
				<Field Th = "unitcost" align = largura "direito" = "70"> Custo Unitário </ th>
				<Th campo = "attr1" width = "200"> Endereço </ th>
				<Field Th = "status" width = "50"> Estado </ th>
			</ Tr>
		</ Thead>
	</ Table>

Como você pode ver, a caixa de grade de dados (datagrid) barra de ferramentas Campos de diálogo (de diálogo) similar. Nós não precisa escrever qualquer código javascript, você pode criar uma barra de ferramentas com grade de dados complexos (datagrid).

Baixar exemplos jQuery EasyUI

jeasyui-datagrid-datagrid19.zip

Tutoriais quentes

Contact US

jQuery EasyUI Data Grid - criar barras de ferramentas complexas
10/30