Frequently occurring problems in the JQuery Easyui framework

Believe that the developer is not a stranger to our jquery, jquery for our development to provide a lot of various libraries, to meet the needs of various development, which we know is lightweight, but there are some rich customer service based on some of the heavyweight library, as the name implies, When we use these libraries can be difficult to avoid some problems, below I listed some of our use of Easyui for enterprise-level development, some common problems and solutions, we hope to help you.

1. Clear the contents of the specified form, and the parameter is the ID of the target form
* Note: The history of the last entry must be emptied each time the new content is entered using the jquery easyui pop-up window
* Data, this is usually done by placing an empty operation on each input component: $ ("#name"). Val (""), do that,
* When the input component is more cumbersome, the resulting JS code is very long, you can put all the input components into a form form
*, and then call the following methods.
*
* @param formid The ID of the form form that will empty the content
*/
function Resetcontent (formId) {
var clearform = document.getElementById (formId);
if (null! = ClearForm && typeof (ClearForm)! = "undefined") {
Clearform.reset ();
}
}

2. Refresh the DataGrid list (for the DataGrid in the JQuery Easy UI)

/**
* Refresh the DataGrid list (for the DataGrid in the JQuery Easy UI)
* Note: This method is recommended for refreshing the DataGrid list data (that is, reloading the data), and it is not recommended to use statements directly
*$ (' #dataTableId '). DataGrid (' reload '); To refresh the list data, because the latter, if later
* When modifying a project, to do something else at all the refreshes in the system, you will be modifying all of the systems involved in the refresh
* Code, this workload is very large, and easy to omit, but if you use this method to refresh the list, then for this repair
* This requirement will be easy to do, without error, without omission.
*
* @paramdataTableId the DataGrid-dependent table list ID that will refresh the data
*/
function Flashtable (Datatableid) {
$ (' # ' +datatableid). DataGrid (' reload ');
}

3. Cancel row selection in the DataGrid (for DataGrid in the JQuery Easy UI)

/**
* Cancels row selection in the DataGrid (for DataGrid in the JQuery Easy UI)
* Note: Resolves the option to not cancel the Select CheckBox, but only if the list must be displayed
* Data that the DataGrid relies on the table placed in the HTML document is the most comprehensive, at least not before the table
* Other checkbox components.
*
* @paramdataTableId the target table ID of the selected data record will be canceled
*/
function Clearselect (Datatableid) {
$ (' # ' +datatableid). DataGrid (' Clearselections ');
Deselect select All in the DataGrid
$ ("input[type= ' checkbox ']"). EQ (0). attr ("checked", false);
}

4. Close the jquery easyui pop-up window (for the jquery Easy Ui)
*
* @paramdialogId the ID of the window that will be closed
*/
function Closedialog (dialogid) {
$ (' # ' +dialogid). Dialog (' Close ');
}

5. The width processing of the adaptive table (for the column widths of the DataGrid in the JQuery Easy UI),  

/**
* Adaptive table width processing (for DataGrid's column widths in the jquery Easy UI),
* Note: You can implement the width of each column of the list to vary with the width of the browsing. This method is used to set the column width of the DataGrid
* can be automatically scaled at different resolutions of the browser to meet the requirements of different resolutions of the browser
* use: (for example: {field: ' Ymname ', title: ' Number ', Width: Fillsize (0.08), align: ' center '},
*
* @parampercent The percentage of the width of the entire window that the column widths of the front row occupy (in decimal form, such as 0.3 for 30%)
*
*@ 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;
}


6. Gets the selected record line (radio)
*
* @paramdataTableId the ID of table for the DataGrid list where the target record is located
* @paramerrorMessage If you do not select a row (that is, you do not select or select more than one row),
*
* @return The selected record Row object, if the return value is NULL, or "null" (sometimes the browser converts null to the string "null") the description does not have
* Select a row of records.
*/
Function Getsingleselectrow (Datatableid, errormessage) {
var rows = $ (' # ' +datatableid). DataGrid (' Getselections ');
var num = rows.length;
if (num = = 1) {
return rows[0];
} else{
$.messager.alert (' Hint message ', errormessage, ' info ');
return null;
}
}

7. Gets the ID of the selected record in the DataGrid, with multiple IDs separated by commas

/**
* Gets the ID of the selected record in the DataGrid, with multiple IDs separated by commas
* Note: This method is used only if the IDfield property of the DataGrid corresponds to the field name in the list JSON data must be an ID
* @paramdataTableId the ID of the DataGrid list table where the target record is located
*
* @return The ID string for the selected record (multiple IDs are 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 (' Hint 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;
}
}

 

8. Delete the selected record (for the DataGrid in the JQuery Easy UI) (deleted by field is ID)

/**
* Delete selected record (for DataGrid in jquery Easy UI) (deleted by field is ID)
* Note: This method automatically takes the ID of the selected record (the DataGrid's IDfield property corresponds to the field name in the list JSON data must be an ID)
* Dynamically assembled into strings, multiple IDs separated by commas (e.g. 1,2,3,8,10), then stored in the variable IDs into the background, backstage
* You can use this parameter name to get all the ID value strings from the Request object, which can be used when assembling SQL or HQL statements
* keyword to handle, introduction convenient.
* In addition, the background code must return the JSON format prompt in the form of Ajax after the operation, the hint JSON format information must have a
The *message field, which holds the user's information about the success and failure of this delete operation and other prompts.
*
* @paramdataTableId the ID of the table where the record will be deleted
* @paramrequestURL the request path to interact with the background server for a specific delete operation
* @paramconfirmMessage Delete Confirmation information
*/

function Deletenotebyid (Datatableid, Requesturl, Confirmmessage) {
if (null = = Confirmmessage | | typeof (confirmmessage) = = "Undefined" | | "" = = Confirmmessage) {
Confirmmessage = "OK to delete selected records?";
}
var rows = $ (' # ' +datatableid). DataGrid (' Getselections ');
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert (' Hint message ', ' Please select the record 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 (' Hint message ', data.message, ' info ');
Flashtable (Datatableid);
} else {
$.messager.alert (' Prompt message ', ' Delete failed! ', ' warning ');
}
Clearselect (Datatableid);
});
}
});
}
}

Frequently occurring problems in the JQuery Easyui framework