English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 예제는 Jquery EasyUI를 사용하여 간소화된操作을 캡슐화한 것으로, 참고하시기 바랍니다. 구체적인 내용은 다음과 같습니다
//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-mask-msg\"></div>").html("진행 중입니다, 잠시 기다려 주세요。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height()} - 45) / 2 });
}
//표시 로드
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,
msg: msg,
showType: 'show'
});
}
}
//삭제 확인 confirm
function deleteConfirm() {
return showConfirm('추천 메시지', '삭제하시겠습니까?',63;');
}
//팝업 확인 창 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,
msg: msg
});
}
//팝업 창 window
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
$('#myWindow').window({
제목: title,
너비: width === undefined &63; 600 : 너비
높이: height === undefined &63; 400 : 높이
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: '데이터를 로드 중입니다. 잠시 기다려 주세요......'
});
}
//팝업 창을 닫기 window
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*지정된 양식의 내용을 비우기, 매개변수는 목표 양식의 id입니다
*주의: jQuery EasyUI의 팝업 창에서 새로운 내용을 입력할 때마다 이전 입력의 历史를 비우는 것이 필요합니다.
*데이터를 새로 고침할 때, 일반적으로 각 입력 구성 요소를 비우는 작업을 수행합니다: $("#name").val(""), 이렇게 하면,
*입력 구성 요소가 많을 때는 복잡해지며, 생성된 js 코드가 길어질 수 있습니다. 이 경우 모든 입력 구성 요소를 하나의 form 양식에 넣을 수 있습니다.
*이후 다음 메서드를 호출하면 됩니다.
*
*@param formId 내용을 비우려는 form 양식의 id
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}
/**
*DataGrid 목록 새로 고침(jQuery Easy Ui의 dataGrid에 적용됨)
*주의: DataGrid 목록 데이터를 새로 고침하는 방법(데이터를 다시 로드하는 것)을 권장하며, 직접 사용하는 명령어는 권장하지 않습니다.
*$('#dataTableId').datagrid('reload');을 사용하여 목록 데이터를 새로고침합니다. 그러나 이를 사용하면 미래
*프로젝트를 수정할 때, 시스템에서 모든 새로고침 위치에서 다른 일부 작업을 수행하려면, 시스템에서 모든 새로고침에 관련된 부분을 수정해야 합니다
*의 코드는 이 작업이 매우 크고, 오류가 발생할 가능성이 있지만; 이 메서드를 사용하여 목록을 새로고침하면 이러한 수정
*이 요구 사항은 쉽게 달성할 수 있으며, 오류가 발생하지 않습니다. 빠르게 완료됩니다
*
*@paramdataTableId 새로운 데이터를 새로고침할 DataGrid가 의존하는 table 목록 id
*/
function flashTable(dataTableId) {
$('#' + dataTableId).datagrid('reload');
}
/**
*DataGrid에서 행 선택을 취소합니다(주로 Jquery Easy Ui의 dataGrid에 적용)
*주의事项：'전체 선택 checkbox' 선택을 취소할 수 없는 문제를 해결했습니다. 그러나, 이를 위해 목록을 표시해야 합니다
*데이터의 DataGrid가 의존하는 Table을 html 문서의 가장 위에 넣습니다. 최소한 이 table 앞에는 없어야 합니다
*기타 checkbox 컴포넌트.
*
*@paramdataTableId 취소할 선택된 데이터 레코드의 목표 table 목록 id
*/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//DataGrid에서 전체 선택을 취소합니다
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*Jquery EasyUi의 팝업 창을 닫습니다(주로 Jquery Easy Ui에 적용)
*
*@paramdialogId 닫을 창의 id
*/
function closeDialog(dialogId) {
$('#' + dialogId).dialog('close');
}
/**
*자동 적응 테이블 너비 처리(주로 Jquery Easy Ui의 dataGrid 열 너비에 적용)
*주의事项：리스트의 각 열 너비가 브라우저 너비의 변화에 따라 변화하도록 설정할 수 있습니다. 즉, 이 방법으로 DataGrid를 설정합니다
*의 열 너비는 다른 해상도의 브라우저에서 자동으로 확장되어 다양한 해상도의 브라우저에 맞추어 줍니다
*사용 방법：(예:{field:'ymName',title:'번호',width:fillsize(0.08),align:'center'},)
*
*@param percent 현재 열의 열폭이 전체 창 너비의 퍼센트(소수점 형식으로 표현, 예: 0.)3을 의미합니다30%)
*
*@return 현재 창과 해당 퍼센트로 계산된 특정 너비
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* 선택된 기록 행을 가져옵니다(단일 선택)
*
* @param dataTableId 목표 기록이 있는 DataGrid 목록 테이블의 id
* @param errorMessage 선택된 행이 없는 경우(선택하지 않거나 여러 행을 선택한 경우) 표시할 메시지
*
* @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 데이터의 필드 이름으로 매칭되어야 합니다.
* @param dataTableId 목표 기록이 있는 DataGrid 목록 테이블의 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는 콤마로 구분합니다(예: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('알림 메시지', '삭제할 기록을 선택하세요!', 'info');
} else {
$.messager.confirm('확인', 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('알림 메시지', data.message, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('알림 메시지', '삭제 실패!', 'warning');
}
clearSelect(dataTableId);
});
}
});
}
}
$(function(){
/*************************직접 호출할 수 있는 검증 메서드***************************/
/*
notNull('age','연령을 입력해 주세요.');
reapet('password','repassword','두 번 입력된 값이 일치하지 않습니다.');
number('age','숫자만 입력할 수 있습니다.');
cellPhone('phone','휴대폰 번호 형식이 올바르지 않습니다.');
phone('phone','전화 번호 형식이 올바르지 않습니다.');
email('email','이메일 형식이 올바르지 않습니다.');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//비어 있지 않은 함수
notNull = function(id, msg){
$('#'+id).validatebox({
required: true,
missingMessage: msg
});
}
//반복 함수
reapet = function(id, re_id, msg){
id = '#'+id;
$('#'+re_id).validatebox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//숫자
number = function(id, msg){
$('#'+id).validatebox({
validType: 'number["'+msg+'"]'
});
};
//휴대폰 번호
cellPhone = function(id, msg){
$('#'+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//전화 번호
phone = function(id, msg){
$('#'+id).validatebox({
validType: 'phone["'+msg+'"]'
});
};
//이메일
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+'"]'
});
};
/**
* 뒤로 가기
* @param id: 요소의 id, url: 제출 주소, paramName: 전달된 값의 파라미터 이름
*/
unique = function(id, url, paramName){
$('#'+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//데이터가 유효하지 않을 때 제출을 차단하는 제출
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
}
});
};
/*************************비어 있지 않은 검증 required="true"********************************/
//HTML 태그에 required="true"을 추가하여 비어 있지 않은 검증을 수행할 수 있습니다
$("*}).each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: '비어 있을 수 없습니다'
});
}
});
//struts 태그를 사용할 때, required="true"属性을 추가하여 아래 코드를 통해 비어 있지 않은 검증을 수행할 수 있습니다
//주의: struts 태그는 label을 사용해야 합니다
$('span').each(function(){
//모든 span 태그를 순회하며 class="required"이 있는지 확인
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: '비어 있을 수 없습니다'
});
}
});
/*************************사용자 정의 메서드********************************/
/**
*사용자 정의 검증 메서드(두 번째 비밀번호가 같은지 검증)
* @param param은 첫 번째 입력 비밀번호 상자의 id를传入합니다.
* @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}
}
});
//정규 표현식을 사용하여 숫자 검증
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?/d+|/d{1,3}63;:,/d{3)+)(?/./d+)?/.test(value);
},
message: '{0}'
}
});
//휴대폰 번호
$.extend($.fn.validatebox.defaults.rules,{
cellPhone: {
validator: function(value, param){
return /^0{0,1}(134-9]|157-9]|15[0-2]|187-8}]-9}8}/.test(value);
},
message: '{0}'
}
});
/**
* 전화 번호
* 일치 형식:11휴대폰 번호
* 3-4지역 번호7-8실시간 번호1－4지점 번호
* 예를 들어: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}'
}
});
//ip 검증
$.extend($.fn.validatebox.defaults.rules,{
ip: {
validator: function(value, param){
return /^((2[0-4]/d|25[0-5]|[01]&63;/d/d&63;)/.){3}(2[0-4]/d|25[0-5]|[01]&63;/d/d&63;)$/.test(value);
},
message: '{0}'
}
});
//유일성 검증
$.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) //백엔드가 true 또는 false를 반환합니다
return true;
});
return false;
},
message: '사용자 이름이 이미 존재합니다'
}
});
});
이것이 본 문서의 모든 내용입니다. 여러분의 학습에 도움이 되길 바라며, 다시 한 번呐喊 강의를 많이 지지해 주셔서 감사합니다.
고지사항: 본 문서의 내용은 인터넷에서 가져왔으며, 원저자의 소유물입니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 본 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w 이메일로 신고해 주세요.3codebox.com에 대한 신고는 이메일로 보내시고 (#을 @으로 변경하여 보내세요) 관련 증거를 제공하시면, 신고가 확인되면 해당 내용이 즉시 삭제됩니다.