English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This example encapsulates Jquery EasyUI to simplify operations for reference, the specific content is as follows
//confirm
function Confirm(msg, control) {
$.messager.confirm('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-$(".datagrid mask").remove();-msg\"></div>").html("Running, please wait...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}
//, top: ($(window).height()}
)
function dispalyLoad() {-display Load
function dispalyLoad() {-$(".datagrid mask").remove();-mask
}
//msg).remove();
Popup reminder box alert
function showMsg(title, msg, isAlert) {
if (isAlert !== undefined && isAlert) {
} else {
$.messager.alert(title, msg);
title: title
$.messager.show({
msg: msg
});
}
}
//showType: 'show'
Delete confirmation confirm
function deleteConfirm() {63;');
}
//Popup confirmation box confirm
function showConfirm(title, msg, callback) {
$.messager.confirm(title, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
}
});
}
//Progress bar
function showProcess(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
var win = $.messager.progress({
title: title
msg: msg
});
}
//Popup window body
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
$('#myWindow').window({
title: title
width: width === undefined &&63; 600 : width
height: height === undefined &&63; 400 : height
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: 'Loading data, please wait a moment......'
});
}
//Close the popup window body window
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*Clear the content in the specified form, the parameter is the id of the target form
*Note: When using Jquery EasyUI's popup window to enter new content, the history of the previous input must be cleared each time it is opened
*Data, at this time, the method usually adopted is to set each input component to empty: $("#name").val(""), in this way,
*When there are many input components, it can be cumbersome, and the generated js code can be very long. In this case, all input components can be placed in a form form
*After that, call the following method.
*
*@param formId The id of the form to be cleared of content
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}
/**
*Refresh the DataGrid list (for use in Jquery Easy Ui's dataGrid)
*Note: It is recommended to use this method to refresh the DataGrid list data (i.e., to reload the data), and it is not recommended to use the statement directly
*$('#dataTableId').datagrid('reload'); to refresh the list data, because using the latter, if in the future}}
*When modifying a project, if you need to perform other operations at all refresh points in the system, then you will need to modify all the refresh
*of the code, this is a very large amount of work and easy to omit; however, if you use this method to refresh the list, then for this kind of modification
*This requirement can be easily achieved without any errors or omissions.
*
*@param dataTableId The ID of the table list that the DataGrid depends on to refresh the data
*/
function flashTable(dataTableId) {
$('# + dataTableId).datagrid('reload');
}
/**
*Deselect row selection in the DataGrid (for dataGrid in Jquery Easy Ui)
*Note: Solved the problem of being unable to deselect the 'Select All checkbox', but it is a prerequisite that the list must be displayed
*Place the table that the DataGrid depends on at the beginning of the html document, at least the table before it should not have
*Other checkbox components.
*
*@param dataTableId The ID of the target table list where the selected data records will be cleared
*/
function clearSelect(dataTableId) {
$('# + dataTableId).datagrid('clearSelections');
//Deselect all checkboxes in the DataGrid
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*Close the pop-up window of Jquery EasyUi (for Jquery Easy Ui)
*
*@param dialogId The ID of the window to be closed
*/
$('# + dialogId).dialog('close');
}
/**
*Adaptive table width handling (for column width of dataGrid in Jquery Easy Ui),
*Note: This can make the widths of each column in the list change with the browser width, i.e., use this method to set the DataGrid
*The column width can automatically adjust in browsers of different resolutions to meet the requirements of various resolutions
*Usage: (e.g., {field:'ymName',title:'Number',width:fillsize(0.08),align:'center'},)
*
*@parampercent The percentage of the column width of the current column to the total window width (in decimal form, such as 0.)3represents30%)
*
*@return The specific width calculated by the current window and the corresponding percentage
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* Get the selected record row (single selection)
*
* @paramdataTableId The id of the DataGrid list table where the target record is located
* @paramerrorMessage Prompt information if no row is selected (i.e., no selection or multiple rows are selected)
*
* @return The object of the selected record row, if the returned value is null or "null" (sometimes the browser converts null to the string "null") it means that there is no
*Select a single record.
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert('Prompt Message', errorMessage, 'info');
return null;
}
}
/**
* Get the selected record's id in DataGrid, multiple ids separated by commas
* Note: The premise of using this method is that the idField attribute of DataGrid corresponds to the field name in the list Json data must be id
* @paramdataTableId The id of the DataGrid list table where the target record is located
*
* @return The string of selected record's id (multiple ids separated by commas)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
if (null != noOneSelectMessage) $.messager.alert('Prompt Message', 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;
}
}
/**
*Delete the selected records (for Jquery Easy Ui's dataGrid) (the deletion field is id)
*Note: This method will automatically convert the selected record's id (the idField attribute of DataGrid corresponds to the field name in the list Json data must be id)
*Assemble dynamically into a string, multiple ids are separated by commas (e.g.:1,2,3,8,10Then store it in the variable ids and pass it to the background.
*You can use this parameter name to obtain all id value strings from the request object, and you can use the 'in' operator when assembling sql or hql statements.
*keyword to handle it, which is convenient.
*Additionally, the backend code must return a Json format prompt message in the form of ajax after the operation is completed, and there must be a
*The 'message' field stores some information about the success or failure of the current deletion operation that needs to be displayed to the user.
*
*@paramdataTableId The id of the list table where the records to be deleted are located
*@paramrequestURL The request path for interacting with the backend server to perform specific deletion operations
*@paramconfirmMessage Confirmation message for deletion
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
confirmMessage = "Are you sure you want to delete the selected records?"63;";
}
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert('Prompt Message', 'Please select the records you want to delete!', 'info');
} else {
$.messager.confirm('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('Prompt Message', data.message, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('Prompt message', 'Deletion failed!', 'warning');
}
clearSelect(dataTableId);
});
}
});
}
}
$(function(){
/*************************Directly callable validation methods***************************/
/*
notNull('age','Age cannot be empty');
reapet('password','repassword','The two inputs are not the same');
number('age','Only numbers are allowed');
cellPhone('phone','Mobile number format is incorrect');
phone('phone','Phone number format is incorrect');
email('email','Email format is incorrect');
unique('username','unique.html','name');
form('form','user_regist.html');
*/
//Non-empty function
notNull = function(id, msg){
$('#+id).validatebox({
required: true,
missingMessage: msg
});
}
//Repeat function
reapet = function(id, re_id, msg){
id = '#'+id;
$('#+re_id).validatebox({
validType: "reapet['"+id+"','"+msg+"']"
});
};
//Number
number = function(id, msg){
$('#+id).validatebox({
validType: 'number["'+msg+'"]'
});
};
//Mobile phone number
cellPhone = function(id, msg){
$('#+id).validatebox({
validType: 'cellPhone["'+msg+'"]'
});
};
//Phone number
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+'"]'
});
};
/**
* Submit to the background for uniqueness verification
* @param id: Verify the element's id, url: The submission address, paramName: The parameter name of the input value
*/
unique = function(id, url, paramName){
$('#+id).validatebox({
validType: 'unique["'+url+'","'+id+'","'+paramName+'"]'
});
};
//Submit, prevent submission if the data is invalid
form = function(id, url){
$("#"+id).form({
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
alert(data);
}
});
};
/*************************Non-empty validation required="true"********************************/
//Adding required="true" in HTML tags can perform non-empty validation
$("*").each(function(){
if($(this).attr('required')){
$(this).validatebox({
required: true,
missingMessage: 'Cannot be empty'
});
}
});
//When using struts tags, adding the attribute required="true" can achieve the non-empty validation through the following code
//Note: Use label for struts tags
$('span').each(function(){
//Traverse all span tags to check if they have class="required"
if($(this).attr('class')=='required'){
$("#"+$(this).parent().attr('for')).validatebox({
required: true,
missingMessage: 'Cannot be empty'
});
}
});
/*************************Custom method********************************/
/**
*Custom validation method (check if two passwords are the same)
* @param param is the id of the password input box passed in for the first time
* @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}
}
});
//use regular expressions for number validation
$.extend($.fn.validatebox.defaults.rules, {
number: {
validator: function(value, param){
return /^-?(?/d+|/d{1,3}63;:,/d{3)+)(?/./d+)?/.test(value);
},
message: '{0}'
}
});
//phone number
$.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}'
}
});
/**
* Phone number
* Matching format:11Mobile phone number
* 3-4Area code7-8Live number1-4Extension number
* For example: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 Verification
$.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}'
}
});
//Uniqueness Verification
$.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) //The backend returns true or false
return true;
});
return false;
},
message: 'Username already exists'
}
});
});
That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)