Encapsulamento e simplificação de operações com jQuery EasyUI

Este exemplo encapsula operações simplificadas do Jquery EasyUI para referência, detalhes específicos conforme a seguir

//confirm 
function Confirm(msg, control) {
 $.messager.confirm('确认', 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("正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height()} - 45) / 2 });
};
//exibir Carga
function dispalyLoad() {
 $(".datagrid-máscara").remove();
 $(".datagrid-máscara-msg").remove();
};
//caixa de diálogo de aviso alert
function showMsg(title, msg, isAlert) {
 if (isAlert !== undefined && isAlert) {
 $.messager.alert(title, msg);
 } else {
 $.messager.show({
  title: title,
  msg: msg,
  showType: 'show'
 });
 };
};
//confirmação de exclusão confirm
function deleteConfirm() {
 return showConfirm('Aviso', 'Tem certeza de que deseja excluir?&63;');
};
//caixa de diálogo de confirmação confirm
function showConfirm(title, msg, callback) {
 $.messager.confirm(title, msg, function (r) {
 if (r) {
  if (jQuery.isFunction(callback))
  callback.call();
 };
 });
};
//barra de progresso
function showProcess(isShow, title, msg) {
 if (!isShow) {
 $.messager.progress('close');
 return;
 };
 var win = $.messager.progress({
 title: title,
 msg: msg
 });
};
//caixa de diálogo window
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
 $('#myWindow').window({
 title: title,
 largura: largura === undefined &63; 600 : largura,
 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: '正在加载数据，请稍等片刻......'
 });
};
//Fechar a janela de popup window
function closeMyWindow() {
 $('#myWindow').window('close');
};
/**
*Esvaziar o conteúdo do formulário especificado, o parâmetro é o id do formulário alvo
*Nota: Ao usar a janela de entrada pop-up do Jquery EasyUI, é necessário limpar o histórico de entrada da vez anterior a cada abertura
*Operar os dados, neste caso, geralmente a operação é limpar cada componente de entrada: $("#name").val(""), desta forma,
*Quando há muitos componentes de entrada, pode ser muito tedioso, e o código js gerado pode ser muito longo, neste caso, você pode colocar todos os componentes de entrada em um formulário.
*Depois disso, chame o seguinte método.
*
*@param formId O id do formulário form que será esvaziado
*/
function resetContent(formId) {
 var clearForm = document.getElementById(formId);
 if (null != clearForm && typeof (clearForm) != "undefined") {
 clearForm.reset();
 };
};
/**
*Atualizar a lista DataGrid (aplicável ao dataGrid do Jquery Easy Ui)
*Nota: Recomenda-se usar este método para atualizar os dados da lista DataGrid (ou seja, recarregar os dados), não é recomendável usar a instrução diretamente
*$('#dataTableId').datagrid('reload'); para atualizar os dados da lista, porque usando o último, se no futuro}}
*Ao modificar o projeto, você precisará fazer outras operações em todos os pontos de atualização do sistema, então você precisará modificar todos os pontos de atualização envolvidos no sistema
*do código, este trabalho é muito grande e fácil de omitir; mas se usar este método para atualizar a lista, então para esse tipo de correção
*Este requisito pode ser facilmente realizado, sem erros e sem omitir.
*
*@paramdataTableId O ID da lista de tabelas que o DataGrid depende para atualizar os dados
*/
function flashTable(dataTableId) {
 $('# + dataTableId).datagrid('reload');
};
/**
*Cancelar a seleção de linhas no DataGrid (aplicável ao dataGrid do Jquery Easy Ui)
*Nota: Solucionado o problema de não ser possível cancelar a seleção do "checkbox de seleção total", mas, como pré-requisito, é necessário exibir a lista
*Coloque a tabela que o DataGrid depende em uma parte mais completa do documento HTML, pelo menos antes dessa tabela não há
*Outros componentes de checkbox.
*
*@paramdataTableId O ID da lista de tabelas alvo que terá seus itens selecionados cancelados
*/
function clearSelect(dataTableId) {
 $('# + dataTableId).datagrid('clearSelections');
 //Deselecionar todos os itens do DataGrid
 $("input[type='checkbox']").eq(0).attr("checked", false);
};
/**
*Fechar a janela popup do Jquery EasyUi (aplicável ao Jquery Easy Ui)
*
*@paramdialogId O ID da janela que será fechada
*/
function closeDialog(dialogId) {
 $('# + dialogId).dialog('close');
};
/**
*Tratamento de largura da tabela adaptativa (aplicável à largura das colunas do dataGrid do Jquery Easy Ui),
*Nota: É possível que as larguras das colunas da lista sejam ajustadas conforme a largura da janela do navegador, ou seja, usar este método para configurar o DataGrid
*A largura das colunas pode se esticar automaticamente em navegadores de diferentes resoluções para atender aos requisitos de diferentes resoluções de navegador
*Método de uso: (por exemplo: {field:'ymName',title:'Número',width:fillsize(0.08),align:'center'},)
*
*@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现，如0.3代表30%)
*
*@return通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent) {
 var bodyWidth = document.body.clientWidth;
 return (bodyWidth - 90) * percent;
};
/**
* 获取所选记录行(单选)
*
* @paramdataTableId目标记录所在的DataGrid列表的table的id
* @paramerrorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
*
* @return 所选记录行对象，如果返回值为null,或者"null"(有时浏览器将null转换成了字符串"null")说明没有
*选择一行记录。
*/
function getSingleSelectRow(dataTableId, errorMessage) {
 var rows = $('#' + dataTableId).datagrid('getSelections');
 var num = rows.length;
 if (num == 1) {
 return rows[0];
 } else {
 $.messager.alert('提示消息', errorMessage, 'info');
 return null;
 };
};
/**
* 在DataGrid中获取所选记录的id,多个id用逗号分隔
* 注：该方法使用的前提是：DataGrid的idField属性对应到列表Json数据中的字段名必须为id
* @paramdataTableId目标记录所在的DataGrid列表table的id
*
* @return 所选记录的id字符串(多个id用逗号隔开)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
 var rows = $('#' + dataTableId).datagrid('getSelections');
 var num = rows.length;
 var ids = null;
 if (num < 1) {
 if (null != noOneSelectMessage) $.messager.alert('提示消息', 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;
 };
};
/**
*删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)
*注：该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
*动态组装成字符串，多个id使用逗号隔开(如：1,2,3,8,10)，然后存放入变量ids中传入后台，后台
*Pode usar este nome de parâmetro para obter todos os valores de string de id do objeto request, e pode usar o in ao montar a instrução sql ou hql.
*palavra-chave para tratamento, facilitando.
*Além disso, o código backend deve retornar informações de aviso no formato Json via ajax após a operação, e a informação Json de aviso deve conter um
*campo message, que armazena informações de sucesso ou falha da operação de exclusão, entre outros, para informar o usuário.
*
*@paramdataTableId ID da tabela de lista onde estão os registros a serem excluídos
*@paramrequestURL Caminho de solicitação para interagir com o servidor backend, para operações de exclusão específicas
*@paramconfirmMessage Mensagem de confirmação de exclusão
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
 if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
 confirmMessage = "Tem certeza de que deseja excluir os registros selecionados?\n\n"63;";
 };
 var rows = $('#' + dataTableId).datagrid('getSelections');
 var num = rows.length;
 var ids = null;
 if (num < 1) {
 $.messager.alert('Mensagem de Alerta', 'Por favor, selecione os registros que você deseja excluir!', 'info');
 } else {
 $.messager.confirm('Confirmação', 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.message && "" != data.message) {
   $.messager.alert('Mensagem de Alerta', data.message, 'info');
   flashTable(dataTableId);
   } else {
   $.messager.alert('Mensagem de aviso', 'Falha ao excluir!', 'aviso');
   };
   clearSelect(dataTableId);
  });
  };
 });
 };
}; 
$(function(){ 
 /*************************Métodos de validação diretamente chamáveis***************************/ 
 /*
 notNull('age','A idade não pode ser vazia'); 
 reapet('password','repassword','As duas entradas não são iguais'); 
 number('age','Só pode ser número'); 
 cellPhone('phone','Formato de número de telefone celular incorreto'); 
 phone('phone','Formato de número de telefone incorreto'); 
 email('email','Formato de e-mail incorreto'); 
 unique('username','unique.html','nome'); 
 form('form','user_regist.html'); 
 */
 //Função de não nulo 
 notNull = function(id, msg){ 
 $('#+id).validatebox({ 
  required: true, 
  missingMessage: msg 
 }); 
 }; 
 //Função de repetição 
 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 telefone celular 
 cellPhone = function(id, msg){ 
 $('#+id).validatebox({ 
  validType: 'cellPhone["'+msg+'"]' 
 }); 
 }; 
 //Número de telefone 
 phone = function(id, msg){ 
 $('#+id).validatebox({ 
  validType: 'phone["'+msg+'"]' 
 }); 
 }; 
 //E-mail 
 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 para a validação de unicidade no backend 
 * @param id: Verificar o ID do elemento, url: Endereço de envio, paramName: Nome do parâmetro de entrada 
 */ 
 unique = function(id, url, paramName){ 
 $('#+id).validatebox({ 
  validType: 'unique["'+url+'","'+id+'","'+paramName+'"]' 
 }); 
 }; 
 //enviar, bloquear envio se os dados forem inválidos 
 form = function(id, url){ 
  $("#"+id).form({ 
  url: url, 
  onSubmit: function(){ 
  return $(this).form('validate'); 
  }, 
  success: function(data){ 
  alert(data); 
  }; 
 }); 
 }; 
 /*************************não estar vazio validação required="true"********************************/ 
 //adicionar required="true" no tag HTML pode realizar validação de não estar vazio 
 $("*}).each(function(){ 
 if($(this).attr('required')){ 
  $(this).validatebox({ 
  required: true, 
  missingMessage: 'não pode estar vazio' 
  }); 
 }; 
 }); 
 //ao usar tags struts, adicionar atributo required="true" pode ser implementado pela seguinte código para validação de não estar vazio 
 //atenção: os tags struts precisam de label 
 $('span').each(function(){ 
 //percorrer todos os span tags, verificar se há class="required" 
 if($(this).attr('class')=='required'){ 
  $("#"+$(this).parent().attr('for')).validatebox({ 
  required: true, 
  missingMessage: 'não pode estar vazio' 
  }); 
 }; 
 }); 
 /*************************método personalizado********************************/ 
 /** 
 *método de validação personalizado (validação de duas senhas iguais) 
 * @param param é o id da caixa de entrada de senha fornecida 
 * @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} 
 }; 
 }); 
 //validação de número usando expressão regular 
 $.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 telefone 
 $.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 telefone 
 * Formato de correspondência:11Número de telefone celular 
 * 3-4Número de área7-8Número de telefone ao vivo1－4Número de ramal 
 * Por exemplo: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}' 
 }; 
 }); 
 //Verificação 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}' 
 }; 
 }); 
 //Verificação de Unicidade 
 $.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) //O backend retorna true ou false 
   return true; 
  }); 
  return false; 
  }, 
  message: 'O nome de usuário já existe' 
 }; 
 }); 
}); 

Isso é o conteúdo completo deste artigo. Esperamos que ajude no seu aprendizado e que você apoie o Tutorial de Grito.

Aviso: O conteúdo deste artigo é extraído da internet, pertencendo ao autor original. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja verificado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)