English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este ejemplo práctico encapsula Jquery EasyUI para simplificar las operaciones, á fin de que pueda hacer uso de él, los detalles son los siguientes
//confirm
function Confirm(msg, control) {
$.messager.confirm('Confirmar', msg, function (r) {
if (r) {
eval(control.toString().slice(11));
};
});
return false;
};
//load
function Load() {
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
$("<div class=\"datagrid-máscara-msg\"></div>").html("Están ejecutando, por favor espere un momento... ").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height()} - 45) / 2 });
};
//mostrar Carga
function dispalyLoad() {
$(".datagrid-máscara").remove();
$(".datagrid-máscara-msg").remove();
};
//ventana emergente de alertaalert
function showMsg(título, msg, isAlert) {
if (isAlert !== undefined && isAlert) {
$.messager.alert(título, msg);
} else {
$.messager.show({
title: title,
msg: msg,
showType: 'show'
});
};
};
//confirmación de eliminaciónconfirm
function deleteConfirm() {
return showConfirm('Advertencia', '¿Está seguro de que desea eliminar?',63;');
};
//ventana emergente de confirmaciónconfirm
function showConfirm(título, msg, callback) {
$.messager.confirm(título, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
};
});
};
//barra de progreso
function showProcess(isShow, título, msg) {
if (!isShow) {
$.messager.progress('close');
return;
};
var win = $.messager.progress({
title: title,
msg: msg
});
};
//ventana emergente de cuerpo
function showMyWindow(título, href, anchura, altura, modal, minimizable, maximizable) {
$('#myWindow').window({
title: title,
anchura: anchura === undefined & #63; 600 : anchura,
altura: altura === undefined & #63; 400 : altura,
content: '<iframe scrolling="yes" frameborder="0" src="' + href + " style="width:100%;height:98;"></iframe>',
// href: href === undefined &63; null : href,
modal: modal === undefined &63; true : modal,
minimizable: minimizable === undefined &63; false : minimizable,
maximizable: maximizable === undefined &63; false : maximizable,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: 'Cargando datos, por favor espere un momento......'
});
};
//Cerrar la ventana emergente de la ventana
function closeMyWindow() {
$('#myWindow').window('close');
};
/**
*Vaciar el contenido de un formulario específico, el parámetro es el id del formulario objetivo
*Nota: Al usar la ventana emergente de entrada de contenido de Jquery EasyUI, debe vaciar el historial de entrada anterior cada vez que se abra
*Los datos, en este caso, generalmente se utiliza el método de vaciar cada componente de entrada: $("#name").val(""), de esta manera,
*Cuando hay muchos componentes de entrada, puede ser tedioso, el código js resultante es largo, en este caso, puede poner todos los componentes de entrada en un formulario
*Luego, llame a los siguientes métodos.
*
*@param formId El id del formulario que se va a vaciar
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
};
};
/**
*Actualizar la lista del DataGrid (aplicable a dataGrid en Jquery Easy Ui)
*Nota: Se recomienda utilizar este método para actualizar los datos de la lista del DataGrid (es decir, recargar los datos), no se recomienda usar la sentencia directamente
*$('#dataTableId').datagrid('reload'); para actualizar los datos de la lista, ya que al usar el último, si en el futuro}}
*Al modificar el proyecto, si se deben realizar otras operaciones en todos los puntos de actualización del sistema, entonces se modificará todos los puntos de
*El código, la cantidad de trabajo es muy grande y fácil de omitir; pero si se utiliza este método para actualizar la lista, entonces para este tipo de
*Este requisito se puede lograr fácilmente, sin errores y sin omitir.
*
*@paramdataTableId El id de la lista de tabla que se actualizará los datos del DataGrid
*/
function flashTable(dataTableId) {
$('# + dataTableId).datagrid('reload');
};
/**
*Deshabilitar la selección de filas en DataGrid (aplicable al dataGrid de Jquery Easy Ui)
*Nota: Se ha resuelto el problema de no poder deseleccionar el checkbox "seleccionar todo", pero, como condición previa, es necesario que se muestre la lista
*Coloque la tabla que depende de DataGrid en el documento html en su totalidad, al menos antes de la tabla no hay
*otros componentes de checkbox.
*
*@paramdataTableId El id de la lista de tabla objetivo que se cancelará la selección de datos
*/
function clearSelect(dataTableId) {
$('# + dataTableId).datagrid('clearSelections');
//Deshabilitar la selección de todos los elementos en DataGrid
$("input[type='checkbox']").eq(0).attr("checked", false);
};
/**
*Cerrar la ventana emergente de Jquery EasyUi (aplicable a Jquery Easy Ui)
*
*@paramdialogId El id de la ventana que se cerrará
*/
function closeDialog(dialogId) {
$('# + dialogId).dialog('close');
};
/**
*Tratamiento de ancho de tabla adaptable (aplicable al ancho de columna de dataGrid en Jquery Easy Ui),
*Nota: Se puede lograr que el ancho de las columnas de la lista siga el cambio del ancho de la ventana del navegador, es decir, se utiliza este método para configurar DataGrid
*El ancho de las columnas puede ajustarse automáticamente en navegadores con diferentes resoluciones para satisfacer los requisitos de diferentes navegadores.
*Métodos de uso: (por ejemplo: {field:'ymName',title:'Código',width:fillsize(0.08),align:'center'},)
*
*@parampercent El porcentaje de anchura de la columna en la anchura total de la ventana (en forma decimal, como 0.)3representa30%)
*
*@return La anchura específica calculada a través de la ventana actual y el porcentaje correspondiente
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
};
/**
* Obtener la fila de registro seleccionada (selección única)
*
* @paramdataTableId El id de la lista de DataGrid donde se encuentra el registro objetivo
* @paramerrorMessage Mensaje de advertencia si no se selecciona una fila (es decir, no se selecciona o se seleccionan múltiples filas)
*
* @return El objeto de la fila de registro seleccionada, si el valor de retorno es null o "null" (a veces el navegador convierte null en la cadena "null") indica que no
*Seleccionar una fila de registro.
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert('Mensaje de advertencia', errorMessage, 'info');
return null;
};
};
/**
* Obtener los ids de los registros seleccionados en DataGrid, los múltiples ids se separan por comas
* Nota: Este método se utiliza bajo el supuesto de que el atributo idField de DataGrid debe coincidir con el nombre del campo en los datos Json de la lista
* @paramdataTableId El id de la lista de DataGrid donde se encuentra el registro objetivo
*
* @return La cadena de ids de los registros seleccionados (los múltiples ids se separan por comas)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
if (null != noOneSelectMessage) $.messager.alert('Mensaje de advertencia', noOneSelectMessage, 'info');
return null;
} else {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
};
};
return ids;
};
};
/**
*Eliminar los registros seleccionados (aplicable a dataGrid de Jquery Easy Ui) (el campo de base para la eliminación es id)
*Nota: Este método convertirá automáticamente los ids de los registros seleccionados (el atributo idField de DataGrid debe coincidir con el nombre del campo en los datos Json de la lista)
*Se ensambla dinámicamente en una cadena, los múltiples ids se separan por comas (por ejemplo:)1,2,3,8,10Luego se almacena en la variable ids y se transmite al backend
*Se puede usar este nombre de parámetro para obtener todas las cadenas de valores de id del objeto request, y al armar la sentencia sql o hql, se puede usar in
*palabra clave para manejar, lo que facilita.
*Además, el código backend debe devolver información de sugerencia en formato Json mediante ajax después de completar la operación, y la información de sugerencia en formato Json debe tener un
*el campo message, que almacena información de éxito o fracaso de la operación de eliminación y otros mensajes de operación para el usuario.
*
*@paramdataTableId ID de la lista table donde se encuentran los registros que se van a eliminar
*@paramrequestURL Ruta de solicitud de interacción con el servidor backend para realizar la operación de eliminación específica
*@paramconfirmMessage Mensaje de confirmación de eliminación
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
confirmMessage = "¿Está seguro de eliminar los registros seleccionados?"63;";
};
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert('Mensaje de advertencia', 'Por favor, seleccione los registros que desea eliminar!', 'info');
} else {
$.messager.confirm('Confirmación', confirmMessage, function (r) {
if (r) {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
};
};
$.getJSON(requestURL, { "ids": ids }, function (data) {
if (null != data && null != data.mensaje && "" != data.mensaje) {
$.messager.alert('提示 mensaje', data.mensaje, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('mensaje de提示', '¡Fallo al eliminar!', 'warning');
};
clearSelect(dataTableId);
});
};
});
};
};
$(function(){
/*************************métodos de verificación可直接调用***************************/
/*
notNull('age','la edad no puede estar vacía');
reapet('password','repassword','las dos entradas no son iguales');
number('age','solo puede ser un número');
cellPhone('phone','el formato del número de teléfono móvil no es correcto');
phone('phone','el formato del número de teléfono no es correcto');
email('email','el formato de correo electrónico no es correcto');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//función de no estar vacío
notNull = function(id, msg){
$('#+id).validatebox({
required: true,
missingMessage: msg
});
};
//función de repetición
reapet = function(id, re_id, msg){
id = '#'+id;
$('#+re_id).validatebox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//número
number = function(id, msg){
$('#+id).validatebox({
validType: 'number["'+msg+'"]'
});
};
//número de teléfono móvil
cellPhone = function(id, msg){
$('#+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//Número de teléfono
phone = function(id, msg){
$('#+id).validatebox({
validType: 'phone["'+msg+'"]'
});
};
//correo electrónico
email = function(id,msg){
$('#+id).validatebox({
validType: 'email',
invalidMessage: msg
});
};
//url
url = function(id, msg){
$('#+id).validatebox({
validType: 'url',
invalidMessage: msg
});
};
//ip
ip = function(id, msg){
$('#+id).validatebox({
validType: 'ip["'+msg+'"]'
});
};
/**
* enviar al servidor para la verificación de unicidad
* @param id: verificación del elemento de id, url: dirección de presentación, paramName: nombre del parámetro de entrada
*/
unique = function(id, url, paramName){
$('#+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//Submit, impide el envío de datos inválidos
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
};
});
};
/*************************Validación no vacío required="true"********************************/
//Agregar required="true" en las etiquetas HTML permite la validación de no estar vacío
$("*").each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: 'No puede estar vacío'
});
};
});
//Cuando se usa el tag struts, agregar el atributo required="true" puede realizarse la validación de no estar vacío con el siguiente código
//Atención: los tags struts deben usar label
$('span').each(function(){
//Revisa todos los elementos span, verifica si tiene class="required"
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: 'No puede estar vacío'
});
};
});
/*************************Método personalizado********************************/
/**
*Método de validación personalizado (comparación de contraseñas ingresadas dos veces)
* @param param es el ID del cuadro de entrada de contraseña proporcionado
* @call repeat['#id']
*/
$.extend($.fn.validatebox.defaults.rules,{
reapet: {
validator: function(value, param){
var pwd = $(param[0]).attr('value');
if(pwd != value){
return false;
};
return true;
},
message: '{1}
};
});
//Validación de números mediante expresiones regulares
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?:/d+|/d{1,3}63;:,/d{3)+)(?:/./d+)?/.test(value);
},
message: '{0}'
};
});
//número de teléfono
$.extend($.fn.validatebox.defaults.rules,{
cellPhone: {
validator: function(value, param){
return /^0{0,1}("13[4-9]|15[7-9]|15[0-2]|18[7-8}])[0-9]{8}$/.test(value);
},
message: '{0}'
};
});
/**
* Número de teléfono
* Formato de coincidencia:11Número de teléfono móvil,
* 3-4Número de área,7-8Número de teléfono en vivo,1-4Número de extensión
* Por ejemplo:12345678901、1234-12345678-1234
*/
$.extend($.fn.validatebox.defaults.rules,{
phone: {
validator: function(value, param){
return /(/d{11})|^("/d{7,8})|(/d{4|/d{3)-(/d{7,8})|(/d{4|/d{3)-(/d{7,8)-(/d{4|/d{3|/d{2|/d{1})|(/d{7,8)-(/d{4|/d{3|/d{2|/d{1})$/.test(value);
},
message: '{0}'
};
});
//Verificación de IP
$.extend($.fn.validatebox.defaults.rules,{
ip: {
validator: function(value, param){
return /^("2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}("2[0-4]/d|25[0-5]|[01]?/d/d?)$/.test(value);
},
message: '{0}'
};
});
//Verificación de unicidad
$.extend($.fn.validatebox.defaults.rules,{
unique: {
validator: function(value, param){
value = $('#+param[1]).attr('value');
$('#+param[1]).load(param[0]+"?"+param[2]+"="+value,
function(responseText, textStatus, XMLHttpRequest){
if(responseText) //El servidor devuelve true o false
return true;
});
return false;
},
message: 'El nombre de usuario ya existe'
};
});
});
Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos los que apoyen el tutorial griten más.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume responsabilidad alguna por las leyes. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione pruebas relevantes. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)