Aplicações jQuery EasyUI - Criando um aplicativo CRUD

A coleta de dados e gestão adequada dos dados é um aplicativo de rede comum necessário. CRUD nos permite gerar uma lista de páginas e editar registros de banco de dados. Este tutorial mostra como usar o framework jQuery EasyUI para implementar um CRUD DataGrid.

Usaremos os seguintes plug-ins:

• datagrid: Apresentar uma lista dos dados para o usuário.
• de diálogo: Criar ou editar uma única informação do usuário.
• formulário: formulário para apresentação de dados.
• messager: mostra algumas informações operacionais.

Passo 1: Prepare Banco de Dados

Vamos usar banco de dados MySQL para armazenar informações do usuário. Criação de um banco de dados e tabela 'utilizadores'.

Passo 2: Criar um DataGrid para exibir informações do usuário

Criado sem javascript DataGrid código.

<Table id = "dg" title = "meus usuários" class = "easyui-datagrid" style = "width: 550px; height: 250px"
		url = "get_users.php"
		toolbar = "# barra de ferramentas"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<Thead>
		<Tr>
			<Th campo = "nome" width = "50"> Nome </ th>
			<Field Th = "sobrenome" width = "50"> Apelido </ th>
			<Field Th = "telefone" width = "50"> Telefone </ th>
			<Th field = "email" width = "50"> E-mail </ th>
		</ Tr>
	</ Thead>
</ Table>
<Div id = "barra de ferramentas">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> New </a> Usuário
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> </a> Editar usuário
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"> Remover usuário </a>
</ Div>

Nós não precisa escrever qualquer código javascript que pode ser exibido para a lista de usuários, como mostrado abaixo:

DataGrid usando a propriedade 'url' e atribuiu o "get_users.php ', usado para recuperar dados a partir do servidor.

arquivo de código get_users.php

$ Rs = mysql_query ( "SELECT * FROM usuários ');
$ Resultado = array ();
while ($ linha = mysql_fetch_object ($ rs)) {
	array_push ($ result, $ row);
}

json_encode echo ($ resultado);

Passo 3: caixa de diálogo Formulário Criar

Nós usamos a mesma caixa de diálogo para criar ou editar um usuário.

<Div id = "dlg" class = "-de diálogo easyui" style = "width: 400px; height: 280px; padding: 10px 20px"
		fechados = "true" botões = "# DLG-botões">
	<Div class = "ftitle"> Informação do usuário </ div>
	<Form id = "fm" method = "post">
		<Div class = "fitem">
			<Label> Nome: </ label>
			<Input name = "nome" class = "easyui-validatebox" required = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Sobrenome: </ label>
			<Input name = "sobrenome" class = "easyui-validatebox" required = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Telefone: </ label>
			<Input name = "telefone">
		</ Div>
		<Div class = "fitem">
			<Label> E-mail: </ label>
			<Input name = "email" class = "easyui-validatebox" VALIDTYPE = "email">
		</ Div>
	</ Form>
</ Div>
<id = "DLG-botões" div>
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"> Salvar </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> Anular </a>
</ Div>

Este diálogo foi criado, nem qualquer código javascript:

Passo 4: Criar e editar usuário alcançar

Ao criar um usuário abre uma caixa de diálogo e limpar os dados do formulário.

funcionar newuser () {
	$ ( "# Dlg ') de diálogo (" aberto ") de diálogo (" setTitle', 'Novo Usuário') ..;
	. Forma $ ( "# Fm ') (' clear ');
	url = 'save_user.php';
}

Ao editar um usuário, uma caixa de diálogo abre e carrega os dados do formulário da linha selecionada na grade de dados.

var row = $ ( '# dg') datagrid ( 'getSelected') .;
if (row) {
	$ ( "# Dlg ') de diálogo (" aberto ") de diálogo (" setTitle', 'Edit User') ..;
	. $ ( '# Fm') forma ( 'load', linha);
	url = 'id = update_user.php?' + row.id;
}

formulário de devolução 'Url' é armazenado quando os dados do usuário é salvo endereço de URL.

Passo 5: Guardar os dados do usuário

Nós usamos o seguinte código para salvar os dados do usuário:

saveUser function () {
	$ ( 'Fm #'). Form ( "enviar", {
		url: url,
		onSubmit: function () {
			return $ (this) .form ( 'validar');
		},
		success: function (result) {
			var resultado = eval ( '(' + resultar + ')');
			Se (result.errorMsg) {
				$ .messager.show ({
					Título: 'Erro',
					msg: result.errorMsg
				});
			} Else {
				$ ( "# Dlg ') de diálogo (' close ') ;. // Fecha a caixa de diálogo
				$ ( "# DG») datagrid ( 'reload') ;. // Atualizar os dados do usuário
			}
		}
	});
}

Antes de enviar o formulário, a função 'onSubmit' é chamado, a função é usada para verificar os valores de campo de formulário. Quando os valores de campo de formulário enviado com sucesso, fechar o diálogo e recarregar os dados DataGrid.

Passo 6: Remover um usuário

Nós usamos o código a seguir para remover um usuário:

destroyUser function () {
	var row = $ ( '# dg') datagrid ( 'getSelected') .;
	if (row) {
		$ .messager.confirm ( 'Confirmar', 'Tem certeza de que quer destruir este utilizador?', Function (r) {
			se (R) {
				$ .post ( "Destroy_user.php ', {id: row.id}, function (result) {
					Se (result.success) {
						$ ( "# DG») datagrid ( 'reload') ;. // Atualizar os dados do usuário
					} Else {
						$ .messager.show ({// Mensagem de erro Mostrar
							Título: 'Erro',
							msg: result.errorMsg
						});
					}
				}, 'Json');
			}
		});
	}
}

Antes de remover uma linha, vamos exibir uma caixa de diálogo de confirmação que permite ao usuário decidir se deseja realmente remover as linhas de dados. Depois que os dados foi removido com sucesso, chamar o método 'reload' para atualizar os dados DataGrid.

Passo 7: executar o código

Abrir MySQL, executar o código no navegador.

Baixar exemplos jQuery EasyUI

jeasyui-app-crud1.zip