English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questa istanza di esempio ci offre un pacchetto semplificato di operazioni jQuery EasyUI per riferimento, i dettagli sono i seguenti
//confirm
function Confirm(msg, control) {
$.messager.confirm('Conferma', 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-mask-msg\"></div>").html("正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}
//display Load
function dispalyLoad() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
//弹出提醒框alert
function showMsg(title, msg, isAlert) {
if (isAlert !== undefined && isAlert) {
$.messager.alert(title, msg);
} else {
$.messager.show({
title: title,
msg: msg,
showType: 'show'
});
}
}
//删除确认confirm
function deleteConfirm() {
return showConfirm('温馨提示', '确定要删除吗?');
}
//弹出确认框confirm
function showConfirm(title, msg, callback) {
$.messager.confirm(title, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
}
});
}
//进度条
function showProcess(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
var win = $.messager.progress({}
title: title,
msg: msg
});
}
//弹出框体window
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
$('#myWindow').window({
title: title,
width: width === undefined ? 600 : width,
height: height === undefined ? 400 : height,
content: '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:98%;"></iframe>',
// href: href === undefined ? null : href,
modal: modal === undefined ? true : modal,
minimizable: minimizable === undefined ? false : minimizable,
maximizable: maximizable === undefined ? false : maximizable,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: '正在加载数据，请稍等片刻......'
});
}
//关闭弹出框体 window
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*清空指定表单中的内容，参数为目标表单的id。
*注意：在使用Jquery EasyUI的弹出窗口录入新增内容时，每次打开必须清空上次输入的历史。
*数据，此时通常采用的方法是对每个输入组件进行清空操作: $("#name").val(""),这样做，
*当输入组件比较多时会很繁琐，产生的js代码很长，这时可以将所有的输入组件放入一个表单中。
*在中文中，然后调用以下方法即可。
*
*@param formId L'ID del modulo da svuotare
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}
/**
*Aggiorna la lista del DataGrid (applicato a dataGrid di Jquery Easy Ui)
*Nota: Si consiglia di utilizzare questo metodo per aggiornare i dati della lista DataGrid (cioè ricaricare i dati), non si consiglia di utilizzare direttamente
*$('#dataTableId').datagrid('reload'); per aggiornare i dati della lista, perché se si utilizza l'ultimo, se in futuro
*Quando si modifica il progetto, devono essere eseguite altre operazioni in tutti i punti di aggiornamento del sistema, allora dovrai modificare tutti i punti di aggiornamento
*Il codice, questo lavoro è molto grande e facile da omissioni; ma se si utilizza questo metodo per aggiornare la lista, allora per questo tipo di
*Questa esigenza può essere soddisfatta facilmente, senza errori e senza omissioni.
*
*@param dataTableId L'ID della tabella elenco di destinazione per aggiornare i dati del DataGrid
*/
function flashTable(dataTableId) {
$('#' + dataTableId).datagrid('reload');
}
/**
*Deseleziona la selezione della riga nel DataGrid (applicato a dataGrid di Jquery Easy Ui)
*Attenzione: Risolto il problema di non essere in grado di deselezionare il checkbox "Seleziona tutto", ma è necessario che la lista sia visualizzata
*Metti il Table di cui dipende il DataGrid in modo più completo nell'html documento, almeno non ci sono
*Altri componenti checkbox.
*
*@param dataTableId L'ID della tabella elenco di destinazione da deselezionare
*/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//Deseleziona l'intera selezione nel DataGrid
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*Chiudi la finestra弹出窗口Jquery EasyUi (applied to Jquery Easy Ui)
*
* @param dialogId ID della finestra da chiudere
*/
function closeDialog(dialogId) {
$('#' + dialogId).dialog('close');
}
/**
* Gestione della larghezza della tabella adattiva (adatta per la larghezza delle colonne del dataGrid in jQuery Easy Ui),
* Nota: è possibile far variare la larghezza delle colonne della lista in base alla larghezza della finestra del browser, ovvero utilizzare questo metodo per impostare il DataGrid
* La larghezza delle colonne può adattarsi automaticamente alle diverse risoluzioni dei browser per soddisfare i requisiti delle diverse risoluzioni dei browser
* Metodo di utilizzo: (ad esempio: {field: 'ymName', title: 'Codice', width: fillsize(0.08), align: 'center'},)
*
* @param percent La percentuale di larghezza della colonna corrente rispetto alla larghezza della finestra totale (espresso come decimale, come 0.3 rappresenta il 30%)
*
* @return La larghezza specifica calcolata attraverso la finestra corrente e la percentuale corrispondente
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* Ottenere la riga di record selezionata (selezione singola)
*
* @param dataTableId ID della tabella della lista DataGrid di destinazione
* @param errorMessage Messaggio di avviso se non viene selezionata nessuna riga (cioè non viene selezionata o vengono selezionate più righe)
*
* @return L'oggetto della riga di record selezionata, se il valore di ritorno è null o "null" (a volte il browser trasforma null in una stringa "null") significa che non
* Selezionare una riga di record.
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert('Messaggio di avviso', errorMessage, 'info');
return null;
}
}
/**
* Ottenere l'id del record selezionato nel DataGrid, i vari id sono separati da virgola
* Nota: il presupposto dell'uso di questa funzione è che l'attributo idField del DataGrid deve corrispondere al nome del campo nel dati JSON della lista id
* @param dataTableId ID della tabella DataGrid della lista di record di destinazione
*
* @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中传入后台，后台
*可以使用该参数名从request对象中获取所有id值字符串，此时在组装sql或者hql语句时可以采用in
*关键字来处理，简介方便。
*另外，后台代码必须在操作完之后以ajax的形式返回Json格式的提示信息，提示的json格式信息中必须有一个
*message字段，存放本次删除操作成功与失败等一些提示操作用户的信息。
*
*@paramdataTableId 将要删除记录所在的列表table的id
*@paramrequestURL 与后台服务器进行交互，进行具体删除操作的请求路径
*@paramconfirmMessage 删除确认信息
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
confirmMessage = "确定删除所选记录?";
}
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert('Messaggio di avviso', 'Seleziona i record da eliminare!', 'info');
} else {
$.messager.confirm('Conferma', 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('Messaggio di avviso', data.message, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('Messaggio di avviso', 'Eliminazione fallita!', 'warning');
}
clearSelect(dataTableId);
});
}
});
}
}
$(function(){
/*************************Metodi di verifica direttamente chiamabili***************************/
/*
notNull('age','L'età non può essere vuota');
reapet('password','repassword','Le due inserzioni non sono identiche');
number('age','Deve essere un numero');
cellPhone('phone','Formato numero di cellulare non corretto');
phone('phone','Formato numero di telefono non corretto');
email('email','Formato email non corretto');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//funzione non vuota
notNull = function(id, msg){
$('#'+id).validatebox({
required: true,
missingMessage: msg
});
}
//funzione di ripetizione
reapet = function(id, re_id, msg){
id = '#'+id;
$('#'+re_id).validatebox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//numero
number = function(id, msg){
$('#'+id).validatebox({
validType: 'number["'+msg+'"]'
});
};
//numero di cellulare
cellPhone = function(id, msg){
$('#'+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//numero di telefono
phone = function(id, msg){
$('#'+id).validatebox({
validType: 'phone["'+msg+'"]'
});
};
//email
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+'"]'
});
};
/**
* Verifica unicità in background
* @param id: id dell'elemento di verifica, url: indirizzo di submission, paramName: nome del parametro del valore passato
*/
unique = function(id, url, paramName){
$('#'+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//Prevenire la submission se i dati sono invalidi
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
}
});
};
/*************************Verifica di non essere vuoto required="true"********************************/
//Inserisci required="true" nei tag HTML per eseguire la verifica di non essere vuoto
$("*").each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: 'Non può essere vuoto'
});
}
});
// Quando si utilizzano i tag struts, aggiungere l'attributo required="true" per implementare la verifica non vuota con il seguente codice
// Attenzione: i tag struts devono essere usati come label
$('span').each(function(){
// Eseguire il ciclo su tutti gli elementi span, verificare se è impostato class="required"
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: 'Non può essere vuoto'
});
}
});
/*************************Metodo personalizzato********************************/
/**
* Metodo di verifica personalizzato (verifica se le due password sono identiche)
* @param param è l'ID della casella di testo di input della password fornita
* @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}'
}
});
// Utilizzare l'espressione regolare per la verifica numerica
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/.test(value);
},
message: '{0}'
}
});
// Numero di cellulare
$.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}'
}
});
/**
* Numero di telefono
* Formato di corrispondenza: numero di cellulare di 11 cifre
* 3-4 cifre di prefisso, 7-8 cifre di numero diretto, 1-4 cifre di interno
* Ad esempio: 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 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 dell'unicità
$.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) // Il server restituisce true o false
return true;
});
return false;
},
message: 'Il nome utente esiste già'
}
});
});
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e ti preghiamo di supportare fortemente la guida urla.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.