Cómo utilizar jQuery EasyUI para crear programas web

Busque "jQuery EasyUI" en el motor de búsqueda de Baidu, como se muestra en la siguiente figura.

2

Visite el sitio web chino de JQuery EasyUI, como se muestra en la siguiente figura.

3

Haga clic en el hipervínculo de descarga de JQuery EasyUI en la barra de navegación para acceder a la página de descarga de JQuery EasyUI, como se muestra en la siguiente figura.

4

Seleccione la versión GPL y haga clic en el botón de descarga oficial a continuación, como se muestra en la siguiente figura.

5

Descomprima la versión GPL de JQuery EasyUI. El directorio del proyecto se muestra a continuación.

6

A continuación se muestra un ejemplo de una aplicación CRUD básica (aplicación básica Agregar/Quitar/Auditar) para introducir el uso de JQuery EasyUI.

lt;! DOCTYPE htmlgt;

lt; htmlgt;

lt;

lt; > lt;titlegt;Aplicación CRUD básica - jQuery EasyUI CRUD Demolt;/titlegt;

lt;link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui .css"gt;

lt; enlace rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"gt;

lt; enlace rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"gt;

lt; enlace rel="stylesheet" type="/text/css" href="/easyui/themes/color.css"gt;

lt; enlace rel="stylesheet" type="text/css" href="/easyui/demo/demo.css"gt;

lt; tipo de script="text/javascript" src="/jquery-1.6.min.js"gt;/scriptgt;

lt; /javascript" src="/easyui/jquery. easyui.min.js"gt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;h2gt;Aplicación CRUD básicalt;/h2gt;

lt;h2gt;Aplicación CRUD básicalt;/h2gt;

lt;pgt;Haga clic en los botones de la barra de herramientas de la cuadrícula de datos para realizar acciones crudas.lt;/pgt;

lt;table id="dg" title="Mi usuario" class="easyuii-datagrid" style="ancho: 700px; alto: 250px"

url="get_users.php"

toolbar="#toolbar" pagination="true"

rownumbers="true" fitColumns="true" singleSelect = "verdadero"gt;

lt;theadgt;

lt;trgt;

lt;th field="firstname" width="50"gt; Nombrelt;/thgt;

lt;ésimo campo="apellido" ancho="50"gt; Apellidolt;/thgt;

lt;ésimo campo="teléfono"

width="50"gt;Phonelt;/thgt;

lt.th field="email" width="50" gt;Emaillt;/thgt;

lt;/trgt ;

lt;/theadgt;

lt;/tablegt;

lt;div id="toolbar"gt;

lt ;a href="javascript：void(0)" class="easyuii-linkbutton"

iconCls="icon-add" Plain="true" onclick="newUser()"gt;Nuevo p>

userlt;/agt;

lt;a href="javascript:void(0)"

class="easyuii-linkbutton" iconCls="icon - editar" Plain="true"

onclick="editUser()"gt;Editar usuariolt;/agt;

lt;a

href=" javascript ：void(0)" class="easyuii-linkbutton"

iconCls=" icon-remove" Plain="true" onclick="destroyUser()"gt;Eliminar

Userlt ;/agt;

lt;/divgt;

lt;div id="dlg" class="easyuii-dialog" style="ancho: 400px; alto: 280px; relleno :10px 20px"

cerrado="true" botones="#dlg-buttons"gt;

lt;div class="ftitle"gt;Información del usuariolt;/divgt;

lt; formulario id="fm" método="post" novalidategt;

lt; div class="fitem"gt; Nombre:

lt; input name="firstname" class="easyui-textbox" require="true"gt

lt;/divgt; > lt;div class="fitem"gt;

lt;div class="fitem"gt;

lt;labelgt;Apellido: lt;/labelgt;

lt ;nombre de entrada="apellido" clase="easyui-textbox" requerido ="true"gt;

lt;/divgt;

lt;div class="fitem"gt ;

lt; labelgt; Teléfono: lt /labelgt;

lt; nombre de entrada="teléfono" class="easyui-textbox" class="easyui-textbox"

" requerido class="easyui-textbox"gt;

lt; /divgt;

lt; div class="fitem"gt;

lt; labelgt ;Correo electrónico:

lt; input name="email" class="easyui-textbox" validType="email"gt;

lt;/divgt;

lt;/formgt;

lt;/divgt;

lt;div id="dlg-buttons"gt;

lt;a href=" javascript：void(0)" class="easyuii-linkbutton c6"

iconCls="icon-ok" onclick="saveUser() "

style="ancho: 90px" gt; /agt;

lt; a

href="javascript:void(0)" class="easyuii-linkbutton"

iconCls= " icon-cancel" onclick="javascript:$('#dlg').dialog('close')"

style="width: 90px"gt;Cancellt;/agt;

lt;/divgt;

lt;script type="text/javascript"gt;

var url;

función nuevoUsuario(){

$('#dlg').dialog('open').dialog('center').setTitle','Nuevo usuario');

$('#fm' ).form('clear');

url = 'save_user.php';

}

función editarUsuario(){

var fila = $(' #dg').datagrid('getSelected');

if (fila){

$('#dlg').dialog('open ').dialog('center').dialog('setTitle', 'Editar usuario');

$('#fm').form('load', fila);

url = 'update_user.php?id=' fila.id

}

}

función saveUser(){

$('#fm').form( 'enviar', {

url: url,

onSubmit: function(){

return $ (this).form('validar');

},

éxito: función(resultado) {

var resultado = eval('(' resultado ')');

if (resultado.errorMsg

){

$.messager.show({

título: 'Error',

msg: resultado.dialog('cerrar'); // Cerrar Cuadro de diálogo

$('#dg').datagrid('reload'); // Recargar datos del usuario

}

}

});

}

función destroyUser(){

var fila = $('#dg').datagrid('getSelected');

if (row){

$.

$.messager.confirm('Confirmar', '¿Estás seguro de que quieres destruir a este usuario? ' , función(r){

if (r){

$.post('destroy_user.php' , {id: fila.id}, función(resultado){< / p>

if (result.success){

$('#dg').datagrid('reload'); // recargar los datos del usuario

} else {

$.messager.show({ // Mostrar mensaje de error

título: 'Error',

msg: result.errorMsg

});

}

}, 'json');

}

} p> }); p> }

}

lt;/scriptgt;

lt;style type="text/css"gt;

# fm{

margen: 0;

relleno: 10px 30px <

}

.ftitle{