The examples in this article encapsulate Jquery EasyUI simplified operations for your reference. The specific content is as follows
//confirm function Confirm(msg, control) { $.('confirm', msg, function (r) { if (r) { eval(().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("Running, please wait....").appendTo("body").css({ display: "block", left: ($().outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 }); } //display Load function dispalyLoad() { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); } //The reminder box alert pops upfunction showMsg(title, msg, isAlert) { if (isAlert !== undefined && isAlert) { $.(title, msg); } else { $.({ title: title, msg: msg, showType: 'show' }); } } //Delete confirm confirmfunction deleteConfirm() { return showConfirm('Kind tips', 'Are you sure you want to delete it?'); } //The confirm box pops up confirmfunction showConfirm(title, msg, callback) { $.(title, msg, function (r) { if (r) { if ((callback)) (); } }); } //Progress barfunction showProcess(isShow, title, msg) { if (!isShow) { $.('close'); return; } var win = $.({ title: title, msg: msg }); } //Pop up the frame windowfunction 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: 'The data is loading, please wait a moment...' }); } //Close the pop-up windowfunction closeMyWindow() { $('#myWindow').window('close'); } /** *Clear the content in the specified form, the parameter is the id of the target form *Note: When entering new content using the pop-up window of Jquery EasyUI, the history entered last time must be cleared every time you open it. *Data, the usual method is to empty each input component: $("#name").val(""), do this, *When there are many input components, it will be very cumbersome, and the resulting js code is very long. At this time, all input components can be put into a form form *, then call the following method. * *@param formId will clear the id of the form form form that the content is */ function resetContent(formId) { var clearForm = (formId); if (null != clearForm && typeof (clearForm) != "undefined") { (); } } /** *Refresh DataGrid list (for dataGrid in Jquery Easy Ui) *Note: It is recommended to use this method to refresh the DataGrid list data (that is, reload the data), and it is not recommended to use statements directly. *$('#dataTableId').datagrid('reload'); to refresh the list data, because the latter is used, if in the future *When modifying a project, you need to do some other operations at all refreshes in the system, then you will want to modify all refreshes in the system. * code, this workload is very large and easy to miss; but if this method is used to refresh the list, then for this repair *The requirement will be easy to do without errors and no omissions. * *@paramdataTableId The table list id of the DataGrid dependency that the data will be refreshed */ function flashTable(dataTableId) { $('#' + dataTableId).datagrid('reload'); } /** *Cancel row selection in DataGrid (Applicable to dataGrid in Jquery Easy Ui) *Note: The option to "select checkbox all" is solved, but the premise is that the list must be displayed * The dataGrid's data depend on the most comprehensive table into the html document, at least not before the table *Other checkbox components. * *@paramdataTableId will cancel the target table list id of the selected data record */ function clearSelect(dataTableId) { $('#' + dataTableId).datagrid('clearSelections'); //Deselect Select All in DataGrid $("input[type='checkbox']").eq(0).attr("checked", false); } /** *Close the pop-up window of Jquery EasyUi (for Jquery Easy Ui) * *@paramdialogId The id of the window to be closed */ function closeDialog(dialogId) { $('#' + dialogId).dialog('close'); } /** * Adaptive table width processing (applicable to column width of dataGrid in Jquery Easy Ui), *Note: The width of each column of the list can be realized to change with the change of browsing width, that is, this method is used to set DataGrid *'s column width can be automatically scalable under browsers of different resolutions to meet the requirements of browsers with different resolutions *Usage method: (such as: {field:'ymName', title:'number', width:fillsize(0.08), align:'center'},) * *@parampercent's percentage of the column width of the current column accounts for the entire window width (in the form of a decimal, such as 0.3 represents 30%) * *@return The specific width calculated by the current window and the corresponding percentage */ function fillsize(percent) { var bodyWidth = ; return (bodyWidth - 90) * percent; } /** * Get the selected record line (single choice) * * @paramdataTableId target record the table id of the DataGrid list where the target is located * @paramerrorMessage If there is no prompt message for one row selected (i.e. no selected or multiple rows selected) * * @return The selected record line object, if the return value is null, or "null" (sometimes the browser converts null to the string "null") means that there is no *Select a row of records. */ function getSingleSelectRow(dataTableId, errorMessage) { var rows = $('#' + dataTableId).datagrid('getSelections'); var num = ; if (num == 1) { return rows[0]; } else { $.('Prompt message', errorMessage, 'info'); return null; } } /** * Get the id of the selected record in DataGrid, multiple ids are separated by commas * Note: The prerequisite for this method is that the field name in the idField attribute of DataGrid must be id * @paramdataTableId target record is located in the id of the table table * * @return The id string of the selected record (multiple ids are separated by commas) */ function getSelectIds(dataTableId, noOneSelectMessage) { var rows = $('#' + dataTableId).datagrid('getSelections'); var num = ; var ids = null; if (num < 1) { if (null != noOneSelectMessage) $.('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 selected records (applicable to dataGrid in Jquery Easy Ui) (the field for deletion is id) *Note: This method will automatically select the id of the selected record (DataGrid's idField attribute corresponding to the field name in the list Json data must be id) * Dynamically assembled into strings, multiple ids are separated by commas (such as: 1, 2, 3, 8, 10), and then stored in variable ids to pass into the background. * You can use this parameter name to get all id value strings from the request object. At this time, in can be used when assembling SQL or hql statements. *Keyword processing, easy introduction. *In addition, the background code must return the prompt information in Json format in the form of ajax after the operation is completed. There must be one in the prompted json format information. *message field, stores some information prompting users for success or failure of this deletion operation. * *@paramdataTableId will delete the id of the list table where the record is located *@paramrequestURL interacts with the background server and performs a request path for specific deletion operations *@paramconfirmMessage Delete confirmation information */ function deleteNoteById(dataTableId, requestURL, confirmMessage) { if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) { confirmMessage = "Confirm to delete the selected record?"; } var rows = $('#' + dataTableId).datagrid('getSelections'); var num = ; var ids = null; if (num < 1) { $.('Prompt message', 'Please select the record you want to delete!', 'info'); } else { $.('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 != && "" != ) { $.('Prompt message', , 'info'); flashTable(dataTableId); } else { $.('Prompt message', 'Deletion failed! ', 'warning'); } clearSelect(dataTableId); }); } }); } } $(function(){ /******************************************************/ /* notNull('age','Age cannot be empty'); reapet('password','repassword','t the inputs are different'); number('age','can only be numbers'); cellPhone('phone','The mobile phone number format is incorrect'); phone('phone','phone number format is incorrect'); email('email','Emailbox format is incorrect'); unique('username','','name'); form('form','user_regist.html'); */ //Not 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+'"]' }); }; //phone number cellPhone = function(id, msg){ $('#'+id).validatebox({ validType: 'cellPhone["'+msg+'"]' }); }; //telephone number phone = function(id, msg){ $('#'+id).validatebox({ validType: 'phone["'+msg+'"]' }); }; //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+'"]' }); }; /** * Submit the background for unique verification * @param id: Verify the id of the element, url: Submitted address, paramName: Parameter name of the passed value */ unique = function(id, url, paramName){ $('#'+id).validatebox({ validType: 'unique["'+url+'","'+id+'","'+paramName+'"]' }); }; // Submit, if the data is invalid, the submission is blocked form = function(id, url){ $("#"+id).form({ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(data){ alert(data); } }); }; /*********************************No null check required="true"***************************/ // Add required="true" to the HMTL tag to perform non-empty verification $("*").each(function(){ if($(this).attr('required')){ $(this).validatebox({ required: true, missingMessage: 'Can't be empty' }); } }); //When using struts tags, adding attribute required="true" can be achieved through the following code to achieve no empty verification //Note: Struts tags need to use label $('span').each(function(){ //Travel through all span tags and check whether class="required" is available if($(this).attr('class')=='required'){ $("#"+$(this).parent().attr('for')).validatebox({ required: true, missingMessage: 'Can't be empty' }); } }); /***************************Customization method************************/ /** *Custom verification method (check whether the password is the same twice) * @param param is the id of the password box that was entered for the first time * @call repeat['#id'] */ $.extend($.,{ reapet: { validator: function(value, param){ var pwd = $(param[0]).attr('value'); if(pwd != value){ return false; } return true; }, message: '{1}' } }); //Use regularity for digital verification $.extend($., { number: { validator: function(value, param){ return /^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/.test(value); }, message: '{0}' } }); //Phone number $.extend($.,{ 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}' } }); /** * telephone number * Matching format: 11-digit mobile phone number * 3-4 digit area code, 7-8 digit live broadcast number, 1-4 digit extension number * For example: 12345678901, 1234-12345678-1234 */ $.extend($.,{ 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($.,{ 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($.,{ unique: { validator: function(value, param){ value = $('#'+param[1]).attr('value'); $('#'+param[1]).load(param[0]+"?"+param[2]+"="+value, function(responseText, textStatus, XMLHttpRequest){ if(responseText) //Return true or false in the background return true; }); return false; }, message: 'The username already exists' } }); });
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.