Sharing Jquery Easyui Encapsulation simplifies operation code

Last Update:2017-01-13 Source: Internet

Author: User

Tags eval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The

jquery Easyui Package

uses the Easyui DataGrid section, primarily to save writing a bunch of HTML code.

through encapsulation, you can save every page to write a bunch of Easyui code, relatively simple, personal feel, after all, is to do their own, it is inevitable that the ego feel better, haha. After the

is encapsulated, simply refer to the various needs libraries in HTML and write <table id= "myID" ><table> in the body,

and then call Basegrid in JS (' myID ', " Focus_ft "," <{:u (' focus/focuslist ')}> ", cols,data_opt); Can.

The first parameter in the method, the table ID, and the second parameter of the

is the ID of the div where the filter function needs to be added, such as the area of the red box

The third parameter is the address that loads the data, can be a routing path, or other data address such as static file address, example of the URI is the thinkphp routing address

The fourth parameter, is the column configuration, how many columns, configure how many, on the copy paste of the live, should be quite relaxed. See

The fifth parameter is the configuration that needs to be changed, the specific configuration item reference Easyui Official document, can omit, will load by default.

So all you have to do is what's in the box below (note,

Formatter:orderoperateformatter What is this thing?)

Orderoperateformatter This is a JS method, write yourself, each page is different. such as editing, deletion and so on.
Other columns can be written if necessary, this is the Easyui property

$ (function () {&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data_opt&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; ' pagelist ': [5,10,&nbsp;20,&nbsp;30,50], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pageSize ': 10, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Sortname": "id", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; "SortOrder": "Desc" &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cols&nbsp;=&nbsp;[[&nbsp;//Note to two nested brackets &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;{&nbsp;field: ' ck ', &nbsp;checkbox:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;field: ' id ',&nbsp;title:&nbsp; ' dan ',&nbsp;width:&nbsp;60,&nbsp;align:&nbsp; ' center ',&nbsp;sortable:&nbsp; TRUE&NBSP}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;field: ' Name ',&nbsp;title:&nbsp; ' recommended bit name ', &nbsp;width:&nbsp;80,&nbsp;align:&nbsp; ' Center '}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;field: ' m ',&nbsp;title:&nbsp; ' management operations ',&nbsp;width:&nbsp;80,&nbsp;align:&nbsp; ' center ', &nbsp;formatter:orderoperateformatter&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]];
&nbsp;basegrid (' DG ', "focus_ft", "&lt;{:u (' focus/focuslist ')}&gt;", cols); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;}); Function&nbsp;orderoperateformatter (val) {&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;btn&nbsp;=&nbsp;[]; &nbsp;&nbsp;
&nbsp;&nbsp;btn.push (' &lt;a&nbsp;id= "Btedit" &nbsp;&nbsp;href= "__url__/modify/id/' +val+ '" &gt; Edit &lt;/a&gt; ');
&nbsp;&nbsp;&nbsp;&nbsp;btn.push (' &lt;a&nbsp;id= "Btdel" &nbsp;href= "#" &gt; Delete &lt;/a&gt; ");
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;btn.join ("|"); }

&NBSP
is the page section, and the encapsulated complete code.

Page section:

&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Right-page" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;id= "SubmitForm" &nbsp;name= "SubmitForm" &nbsp;action= "" &nbsp;method= "post" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Order-search" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;input&nbsp;type= "hidden" &nbsp;name= "IDs" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id= "RoleBt70" &nbsp;type= " Button "&nbsp;&nbsp;class=" Order-search-button "&nbsp;onclick=" Alldel () "&nbsp;value=" Delete all "/&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input&nbsp;id= "RoleBt71 "&nbsp;type=" button "&nbsp;&nbsp;class=" Order-search-button "&nbsp;onclick=" Alldisplay () "&nbsp;value=" Show All "/ &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;input&nbsp;id= "roleBt72" &nbsp;type= "button" &nbsp;&nbsp;class= "Order-search-button" &nbsp; Onclick= "Allhidden ()" &nbsp;value= "all hidden"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Order-list" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Order-list-table" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table&nbsp;id= "DG" &nbsp;title= "recommended Bit" &nbsp;style= "width:80%; height:650px "&nbsp;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ Table&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp; Id= "focus_ft" &nbsp;class= "Order-search" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;form&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name= "Search[type]" &nbsp;&nbsp;id= "Order_select_one" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value= "id" &gt; Dan number &lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp; Value= "Name" &gt; name &lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;name= "Search[txt_ Value] "&nbsp;&nbsp;type=" text "&nbsp;size=" &nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Release Date: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type= "text" &nbsp;size= "&nbsp;" Name= "Search[date_from]" "&nbsp;class=" Wdate "&nbsp;onfocus=" Wdatepicker ({datefmt:&nbsp; ' yyyy-MM-dd&nbsp;HH:mm: SS '}] "&nbsp;/&gt;-&lt;input&nbsp;type=" text "&nbsp;size=" &nbsp;name= "search[date_to" &nbsp;class= "Wdate" &nbsp;onfocus= "Wdatepicker ({datefmt:&nbsp; ' Yyyy-mm-dd&nbsp;hh:mm:ss '})"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type= "button" &nbsp;id= " RoleBt1 "&nbsp;value=" Check &nbsp; inquire "&nbsp;class=" Order-search-button "&nbsp;onclick=" Search (' DG ', this); " &nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/form&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/ &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt;

encapsulates the JS code:

/*version&nbsp;1.0 &NBSP;*MJ &nbsp;*//** Click to list the expanded content of the row, using this method &nbsp;*&nbsp;id:grid&nbsp; ID &nbsp;*&nbsp;dg_
Toolbar:grid complex operation part ID, "dg_area_id" &nbsp;*&nbsp;url: Get Data Url address,--"&lt;{:u (' focus/focuslist ')}&gt;"--"A.json" &nbsp;*&nbsp;expandurl: Hide content URL address &nbsp;*&nbsp;cols: column information var&nbsp;cols&nbsp;=&nbsp;[[&nbsp;//Note two nested brackets &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{&nbsp;field: ' id ',&nbsp;title:&nbsp; ' dan ',&nbsp;width:&nbsp;60,&nbsp;align:&nbsp; ' center ', &nbsp;sortable: &NBSP;TRUE&NBSP}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;field: ' name ',&nbsp;title:&nbsp; ' recommended bit name ', &nbsp;width:&nbsp;80,&nbsp;align: &nbsp; ' Center '}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;field: ' m ',&nbsp;title:&nbsp; ' management operations ', &nbsp;width:&nbsp;80,&nbsp;align: &nbsp; ' Center ', &nbsp;formatter: orderoperateformatter&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;]]; &nbsp;*&nbsp;data_opt:grid property, can omit &nbsp;var&nbsp;data_opt&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pagelist ': [10,&nbsp;20, &NBSP;30,50], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ' pageSize ': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;*/Function&nbsp;expandgrid (id,dg_toolbar,mainurl,expandurl,cols,data_opt) {&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;var&nbsp;default_opt&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' border ': False, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' fit ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; ' Fitcolumns ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' roWnumbers ': True, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' Singleselect ': false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ' Checkonselect ': false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' Selectoncheck ': True, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pagination ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; ' pagelist ': [10,&nbsp;20,&nbsp;30,&nbsp;50], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '
PageSize ': &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;for (opt&nbsp;in&nbsp;data_opt) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default
_OPT[OPT]=DATA_OPT[OPT]; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;$ (' # ' +id). DataGrid ({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;url:&nbsp;mainurl, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadMsg:&nbsp; ' data loading, please wait ... ', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagesize:&nbsp;default_opt["PageSize"], &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagelist:&nbsp;default_opt["PageList"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagination:default_opt["pagination"], &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;singleselect:default_opt["Singleselect"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;fitcolumns:default_opt["Fitcolumns"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkonselect :d efault_opt["Checkonselect"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectoncheck:default_opt[" Selectoncheck "], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view:&nbsp;detailview, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;toolbar:&nbsp;dg_toolbar== ""? "": "#" +dg_toolbar, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;columns:cols, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detailformatter:function (index,row) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp; ' &lt;div&nbsp;class= ' DDV '
&nbsp;style= "Padding:5px&nbsp;0" &gt;&lt;/div&gt;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &NBSP;&NBSP;&NBSP;&NBSP;&NBsp;&nbsp;&nbsp;&nbsp;onexpandrow:&nbsp;function (index,row) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ddv&nbsp;=&nbsp;$ (This). DataGrid (' Getrowdetail ', index). Find (' DIV.DDV '); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ddv.panel ({&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: "Auto", &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache:false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href:expandurl+row.id, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onload:function () {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;$ (' # ' +id). DataGrid(' Fixdetailrowheight ', index); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' # ' +id). DataGrid ('
Fixdetailrowheight ', index);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); /** General grid display &nbsp;*&nbsp;id:grid&nbsp; ID &nbsp;*&nbsp;dg_toolbar:grid complex operations Section ID, "dg_area_id" &nbsp;*&nbsp;url: Get Data URL address,--"&lt;{:u (' focus/focuslist ')}&gt;"--"A.json" &nbsp;*&nbsp;cols: Column information var&nbsp;cols&nbsp;=&nbsp;[[&nbsp; Note two nested brackets &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;field: ' id ',&nbsp;title:&nbsp; ' Dan Hao ',&nbsp;width:&nbsp;60,&nbsp;align:&nbsp; ' Center ', &nbsp;sortable:&nbsp;true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsP {&nbsp;field: ' name ',&nbsp;title:&nbsp; ' recommended bit name ',&nbsp;width:&nbsp;80,&nbsp;align:&nbsp; ' center '}, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;field: ' m ',&nbsp;title:&nbsp; ' management operations ',&nbsp;width:&nbsp;80,&nbsp;align:&nbsp; ' center ', &nbsp;formatter:o rderoperateformatter&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;]]; &nbsp;*&nbsp;data_opt:grid property, can omit &nbsp;var&nbsp;data_opt&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pagelist ': [10,&nbsp;20, &NBSP;30,50], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ' pageSize ': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;*/Function&nbsp;basegrid (id,dg_toolbar,url,cols,data_opt) {&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;default_opt&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' border ': false, &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' fit ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' Fitcolumns ': True, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' rownumbers ': true, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ' Singleselect ': false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' Checkonselect ': False, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' Selectoncheck ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ' pagination ': true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pagelist ': [5,&nbsp;10, &NBSP;20,&NBSP;30,&NBSP;50], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' pageSize ': &nbsp;&nbsp;&nbsp;
&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;for (opt&nbsp;in&nbsp;data_opt) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default
_OPT[OPT]=DATA_OPT[OPT]; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;$ (' # ' +id). DataGrid ({&nbsp;&nbsp;&nbsp;&nbsp;&nbsP;&nbsp;&nbsp;&nbsp;url:&nbsp;url, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadMsg:&nbsp; ' data loading, please wait ... ' , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagesize:&nbsp;default_opt["PageSize"], &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagelist:&nbsp;default_opt["PageList"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;pagination:default_opt["pagination"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;singleselect: default_opt["Singleselect"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fitcolumns:default_opt["FitColumns "], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkonselect:default_opt[" Checkonselect "], &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectoncheck:default_opt["Selectoncheck"], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;toolbar:&nbsp;dg_toolbar== ""? "": "#" +dg_toolbar, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;columns:cols &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} function&nbsp;contains (ARR,&NBsp;obj) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;arr.length;
&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (arr[i]&nbsp;===&nbsp;obj) &nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;
False /* Get the ID string of the grid, separated, if it is a string, then "," to separate the &nbsp;*grid_id&nbsp;&nbsp;grid ID &nbsp;*id&nbsp; the field to be assembled id&nbsp; * * function &nbsp;getselections (grid_id,id) {&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rows&nbsp;=&nbsp;$ ("#" +grid_id). DataGrid ('
Getselections ');
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ss=[]; &nbsp;&nbsp;&nbsp;&nbsp;for (var&nbsp;i=0;&nbsp;i&lt;rows.length;&nbsp;i++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;var&nbsp;row&nbsp;=&nbsp;rows[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ss.push (eval ("row.")
+id)); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;sS.join (', ');
}/* &nbsp;*&nbsp; Query method, the query area must be covered with &lt;form&gt;&lt;/form&gt;, easy to submit server processing &nbsp;*&nbsp; incoming grid id,that Express Query button, incoming this can &nbsp;*/Function&nbsp;search (grid_id,that) {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;$ ("#" +grid_
ID);
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;queryparams&nbsp;=&nbsp;data.datagrid (' Options '). Queryparams; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$.each ($ (that). Parent (' form '). Serializearray (), &nbsp;function (
&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;queryparams[this[' name ']]&nbsp;=&nbsp;this[' value '];
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;data.datagrid ({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pagenumber:&nbsp;1
&nbsp;&nbsp;&nbsp;&nbsp;}); }

Jquery Easyui Encapsulation Simplify operations

confirm&nbsp; function&nbsp;confirm (Msg,&nbsp;control) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$.messager.confirm (' confirmation ',
&nbsp;msg,&nbsp;function&nbsp; (R) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (R) &nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval (Control.toString (). Slice (11));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; }//load function&nbsp;load () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ ("&lt;div&nbsp;class=\" Datagrid-mask\ "&gt;&lt;/div") &gt; "). css ({&nbsp;display:&nbsp;" block ",&nbsp;width:&nbsp;" 100% ", &nbsp;height:&nbsp;$ (window). Height () &nbsp;})
. Appendto ("body"); &nbsp;&nbsp;&nbsp;&nbsp;$ ("&lt;div&nbsp;class=\" datagrid-mask-msg\ "&gt;&lt;/div&gt;"). HTML ("Running, please wait ..."). "). Appendto (" Body "). CSS ({&nbsp;display:&nbsp;" block ",&nbsp;left:&nbsp; ($ (document.body). Outerwidth (True) &nbsp; -&nbsp;190) &nbsp;/&nbsp;2,&nbsp;top:&nbsp; ($ (window). Height () &nbsp;-&nbsp;45) &nbsp;/&nbsp;2&nbsp;});
}//display&nbsp;load function&nbsp;dispalyload () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ (". Datagrid-mask"). Remove ();
&nbsp;&nbsp;&nbsp;&nbsp;$ (". Datagrid-mask-msg"). Remove (); //Pop-up Alert box alert function&nbsp;showmsg (Title,&nbsp;msg,&nbsp;isalert) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; ( Isalert&nbsp;!==&nbsp;undefined&nbsp;&amp;&amp;&nbsp;isalert) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;$.messager.alert (TITLE,&NBSP;MSG);
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.show ({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;title, &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:&nbsp;msg, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showType:&nbsp; ' Show ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &NBSP;&NBSP;&NBSP;&NBSP}}//delete confirmation confirm function&nbsp;deleteconfirm () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;showconfirm (' Warm hints ',&nbsp; ' Are you sure you want to delete it? '); //Pop-up Confirmation box confirm Function&nbsp;showconfirm (title,&nbsp;msg,&nbsp;callback) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$. Messager.confirm (title,&nbsp;msg,&nbsp;function&nbsp; (r) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;if&nbsp; (R) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; ( Jquery.isfunction (callback)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;callback.call ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); }//progress bar function&nbsp;showprocess (isshow,&nbsp;title,&nbsp;msg) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (!isshow) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.progress (' close '); &nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;return; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;win&nbsp;=&nbsp;$.messager.progress ({&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;title, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:&nbsp;msg &nbsp;&nbsp;&nbsp;&nbsp;}); }//Pop-up box window Function&nbsp;showmywindow (title,&nbsp;href,&nbsp;width,&nbsp;height,&nbsp;modal,&nbsp; minimizable,&nbsp;maximizable) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ (' #myWindow '). Window ({&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;title, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;width &nbsp;===&nbsp;undefined&nbsp;?&nbsp;600&nbsp;:&nbsp;width, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Height:&nbsp;height&nbsp;===&nbsp;undefined&nbsp;?&nbsp;400&nbsp;:&nbsp;height, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;content:&nbsp; ' &lt;iframe&nbsp;scrolling= ' yes ' &nbsp;frameborder= ' 0 "&nbsp;&nbsp;src=" ' &nbsp;+ &nbsp;href&nbsp;+&nbsp; ' "&nbsp;style=" width:100%;height:98%; " &gt;&lt;/iframe&gt; ', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;href:&nbsp;href&nbsp;===&nbsp;undefined&nbsp;?&nbsp;null&nbsp;:&nbsp;href, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;modal:&nbsp;modal&nbsp;===&nbsp;undefined&nbsp;?&nbsp;true&nbsp;:&nbsp;modal, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimizable:&nbsp;minimizable&nbsp;===&nbsp;undefined&nbsp;?&nbsp;false &nbsp;:&nbsp;minimizable, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maximizable:&nbsp;maximizable&nbsp;== =&nbsp;undefined&nbsp;?&nbsp;false&nbsp;:&nbsp;maximizable, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Shadow:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;closed:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsible:&nbsp; False, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resizable:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;loadingMessage:&nbsp; ' Loading data, please wait a moment ... ' &nbsp;&nbsp;&nbsp;&nbsp;}; ///Turn off pop-up frame &nbsp;window Function&nbsp;closemywindow () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ (' #myWindow '). Window (' Close '
); /** * Empty the contents of the specified form, the parameter is the ID * Note of the target form: When you enter new content using Jquery&nbsp;easyui pop-up windows, each time you open must empty the last entered history data, the usual approach is to empty each input component: $ ("#name"). Val (""), do it, *
When the input component is very cumbersome, the resulting JS code is very long, then you can put all the input components into the form form *, and then call the following methods. * * @param &nbsp;formid ID/function&nbsp;resetcontent (formid) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var of form forms that will empty content
&nbsp;clearform&nbsp;=&nbsp;document.getelementbyid (Formid); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (null&nbsp;!=&nbsp;clearform&nbsp;&amp;&amp;&nbsp;typeof&nbsp; (ClearForm) &nbsp;!=&nbsp; "undefined") &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearform.reset () &nbsp; &NBSP;&NBSP;&NBSP}/** * Refresh DataGrid list (for DataGrid in Jquery&nbsp;easy&nbsp;ui) * Note: This method is recommended to refresh DataGrid list data (i.e. reload data) , it is not recommended to use the statement *$ (' #dataTableId ') directly. DataGrid (' reload '); To refresh the list data, because the latter, if you want to modify the project at all times in the system to do some other action,
So you're going to have to modify all the code in the system that involves refreshing *, which is a lot of work and is easy to omit, but if you use this method to refresh the list, then the requirement for this fix will be easy to do without error or omission. * * @paramdataTableId the DataGrid-dependent table list ID/function&nbsp;flashtable (datatableid) &nbsp;{that will refresh the data &nbsp;&nbsp;&nbsp; &nbsp;$ (' # ' &nbsp;+&nbsp;datatableid). DatagrID (' reload '); /** * Cancel row selection in DataGrid (for DataGrid in Jquery&nbsp;easy&nbsp;ui) * Note: You have resolved the option of not canceling the Select all checkbox, but only if you must show the list *
The table on which the data DataGrid relies is placed in the most comprehensive HTML document, with at least no * other checkbox components before the table. * * @paramdataTableId the target table list ID of the selected data record will be canceled/Function&nbsp;clearselect (Datatableid) &nbsp;{&nbsp;&nbsp;&nbsp;
&nbsp;$ (' # ' &nbsp;+&nbsp;datatableid). DataGrid (' Clearselections '); &nbsp;&nbsp;&nbsp;&nbsp;//Deselect All selected &nbsp;&nbsp;&nbsp;&nbsp;$ ("input[type= ' checkbox ')" in the DataGrid. EQ (0). attr ("
Checked ", &nbsp;false); /** * Closes the Jquery&nbsp;easyui pop-up window (for jquery&nbsp;easy&nbsp;ui) * * @paramdialogId the ID of the window to be closed/function&nbsp; Closedialog (dialogID) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ (' # ' &nbsp;+&nbsp;dialogid). Dialog (' Close ');/** * Adaptive table width processing (applicable to the column width of the datagrid in Jquery&nbsp;easy&nbsp;ui), * Note: You can implement the column widths of the list to change with the width of the browsing, that is, to set the DataGrid *
The column widths can be scaled in different resolution browsers to meet the requirements of different resolution browsers * use methods: (for example: {field: ' Ymname ', title: ' Number ', width:fillsize (0.08), align: ' center '},) * * @parampercent The percentage of the width of the entire window (in decimal form, such as 0.3 for 30%) * @return The width of the column to be calculated by the current window and corresponding percentages * * funcTion&nbsp;fillsize (percent) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bodyWidth&nbsp;=&nbsp;
Document.body.clientWidth;
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp; (bodywidth&nbsp;-&nbsp;90) &nbsp;*&nbsp;percent; /** *&nbsp; Gets the ID of the table in the DataGrid list where the selected record line (radio) * *&nbsp; @paramdataTableId the target record *&nbsp; @paramerrorMessage &nbsp;
If you do not select a row (that is, no multiple rows are selected or selected) *&nbsp; @return &nbsp; The selected Row object, if the return value is NULL, or "null" (sometimes the browser converts null to the string "null") indicates that there is no * to select a row of records. * * Function&nbsp;getsingleselectrow (datatableid,&nbsp;errormessage) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rows
&nbsp;=&nbsp;$ (' # ' &nbsp;+&nbsp;datatableid). DataGrid (' Getselections ');
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;rows.length; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (num&nbsp;==&nbsp;1) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
return&nbsp;rows[0]; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.alert ('
Prompt message ',&nbsp;errormessage,&nbsp; ' info '); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null; &NBSP;&NBSP;&NBSP;&NBSP}/** *&nbsp; gets the ID of the selected record in the DataGrid, with multiple IDs separated by commas *&nbsp; Note: This method uses the premise that the IDfield property of the DataGrid corresponds to the field name in the list JSON data must be ID *&nbsp; @paramdataTableId the ID of the DataGrid list table where the target record is located * *&nbsp;@
return&nbsp; the ID string of the selected record (multiple IDs separated by commas) * * Function&nbsp;getselectids (datatableid,&nbsp;nooneselectmessage) &nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rows&nbsp;=&nbsp;$ (' # ' &nbsp;+&nbsp;datatableid). DataGrid (' GetSelections ');
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;rows.length;
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ids&nbsp;=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (num&nbsp;&lt;&nbsp;1) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if&nbsp; (null&nbsp;!=&nbsp;nooneselectmessage) &nbsp;$.messager.alert (' Hint message ',&nbsp;nooneselectmessage,&nbsp; ')
Info ');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp; (var&nbsp;i &nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;num;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (null&nbsp;==&nbsp;ids&nbsp;| | &nbsp;i&nbsp;==&nbsp;0) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;ids&nbsp;=&nbsp;rows[i].id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ids&nbsp;=&nbsp;ids&nbsp;+&nbsp;
"," &nbsp;+&nbsp;rows[i].id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;ids; &NBSP;&NBSP;&NBSP;&NBSP}/** * Delete Selected records (for DataGrid in Jquery&nbsp;easy&nbsp;ui) (deleted by field is ID) * Note: This method automatically converts the ID of the selected record ( The IDfield property of the DataGrid corresponds to the field name in the list JSON data must be ID) * Dynamically assembled into a string, multiple IDs separated by commas (e.g., 1,2,3,8,10), and then stored in the variable IDs for incoming background, background *
You can use this parameter name to get all the ID value strings from the Request object, which is handy when assembling SQL or HQL statements with the in * keyword. * In addition, the background code must be in the form of Ajax after the operation to return JSOn format prompts, the JSON format information in the hint must have a *message field that holds the user's information for some prompts such as success and failure of this deletion operation. * * @paramdataTableId The ID * of the list table where the record will be deleted @paramrequestURL interact with the background server, request path for specific deletions * @paramconfirmMessage &nbsp; Delete Confirmation * * Function&nbsp;deletenotebyid (datatableid,&nbsp;requesturl,&nbsp;confirmmessage) &nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;if&nbsp; (null&nbsp;==&nbsp;confirmmessage&nbsp;| | &nbsp;typeof&nbsp; (confirmmessage) &nbsp;==&nbsp; "Undefined" &nbsp;| | &nbsp; "" &nbsp;==&nbsp;confirmmessage) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;confirmmessage
&nbsp;=&nbsp; "OK to delete selected records?"; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rows&nbsp;=&nbsp;$ (' # ' &nbsp;+&nbsp;datatableid).
DataGrid (' Getselections ');
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;rows.length;
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ids&nbsp;=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (num&nbsp;&lt;&nbsp;1) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$
. Messager.alert (' Hint message ',&nbsp; ' Please select the record you want to delete! ',&nbsp; ' info '); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.confirm (' Confirm ',&nbsp;confirmmessage,&nbsp; function&nbsp; (R) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (R) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for &nbsp; (var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;num;&nbsp;i++) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (null&nbsp;= =&nbsp;ids&nbsp;| | &nbsp;i&nbsp;==&nbsp;0) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ids&nbsp;=&nbsp;rows[i].id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ids&nbsp;=&nbsp;ids&nbsp;+&nbsp; "," &nbsp;+&nbsp;rows[i].id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.getjson ( requesturl,&nbsp;{&nbsp; "IDs":&nbsp;ids&nbsp;},&nbsp;function&nbsp; (data) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (null&nbsp;! =&nbsp;data&nbsp;&amp;&amp;&nbsp;null&nbsp;!=&nbsp;data.message&nbsp;&amp;&amp;&nbsp; "" &nbsp;!=&nbsp; Data.message) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.alert (' Hint message ',&nbsp;data.message,&nbsp; ' info ')
; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;flashtable (Datatableid); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.messager.alert (' Hint message ',&nbsp; ' delete failed!)
',&nbsp; ' warning '); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;clearselect (Datatableid);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}
}

easyui window plug-ins in the secondary package for easy Operation

Plug-in code:

$.fn.hwindow&nbsp;=&nbsp;function (options) {&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;defaults&nbsp;=&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//width &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;400 , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//height &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;iconCls:&nbsp; ', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Icon Class &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsible:&nbsp;false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;//Folding &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimizable:&nbsp;false,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//min &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maximizable:&nbsp; false,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Maximum &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Resizable:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//change the window size &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title :&nbsp; ' window title ', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//window title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;modal:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//modal &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;submit:&nbsp;function&nbsp; () &nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert (' Write code to execute.
'); &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html:&nbsp; ' ' &nbsp;&nbsp;&nbsp;&nbsp} &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;$.
Extend (defaults,options);
&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;options.html; &nbsp;&nbsp;&nbsp;&nbsp;$ (' #w '). Window ({title:options.title,width:options.width,height:options.height,content: Buildwindowcontent (html,options.submit), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsible:options.collapsible,minimizable:options.minimizable,maximizable:o
Ptions.maximizable, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;modal:options.modal,iconcls:options.iconcls
&NBSP;&NBSP;&NBSP;&NBSP}). Window (' open '); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;buildwindowcontent (CONTENTHTML,FN) &nbsp;&nbsp; &nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;centerDIV&nbsp;=&nbsp;&nbsp;&nbsp;&nbsp; $ (' &lt;div&nbsp;region= ' Center "&nbsp;border=" false "&nbsp;style=" PADDING:5PX; "
&gt;&lt;/div&gt; '). HTML (contenthtml); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' &lt;div&nbsp;class= "Easyui-layout" &nbsp;fit= "true" &gt;&lt;/ Div&gt; ') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append (centerdiv) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;.append (' &lt;div&nbsp;region= "South" &nbsp;border= "false" &nbsp;style= "Padding-top:5px;height : 40px;&nbsp;overflow:hidden;&nbsp;text-align:center;background: #fafafa; BordeR-top: #eee &nbsp;1px&nbsp;solid; " &gt;&nbsp;&nbsp;&lt;a&nbsp;iconcls= "Icon-ok" &gt; OK &lt;/a&gt;&lt;a&nbsp;iconcls= "Icon-cancel" &gt; Cancel &lt;/a&gt; &lt;/div&gt; ') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.appendto ($ (' #w '). Empty ()) &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.layout ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ ('. easyui-layout&nbsp;a[iconcls] '). LinkButton (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' a[iconcls= "Icon-cancel"]). Click (function () {&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #w '). Window (' close ');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' a[iconcls= "Icon-ok"]). Unbind (' click '). Click (FN); &NBSP;&NBSP;&NBSP;&NBSP}}

The above code can be saved to a JS file, easy to use in the future can be introduced directly, I in the example to save this code as Jquery-easyui-window-expand.js

CSS and JS files need to be introduced:

<link rel= "stylesheet" type= text/css "href=". /themes/default/easyui.css ">
<link rel=" stylesheet "type=" Text/css "href=". /themes/icon.css ">
<script type=" Text/javascript "src=". /jquery-1.4.2.min.js "></script>
<script type=" Text/javascript "src=". /jquery.easyui.min.js "></script>
<script type=" Text/javascript "src=" Jquery-easyui-window-expand.js "></script>

Html:

<input type= "button" value= "New Window" id= "Btnopen" >
<input type= "button" value= "new Window 1" id= "BtnOpen1" >
<input type= "button" value= "New Window 2" id= "BtnOpen2" >
<!--for pop-up windows div--> <div id=
"W" ></div >

JS Call:

$ (' #w '). Hwindow ();

Complete code:

&lt;! doctype&nbsp;html&nbsp;public&nbsp; "-//w3c//dtd&nbsp;html&nbsp;4.01&nbsp;transitional//en" &nbsp; "http:// Www.w3.org/TR/html4/loose.dtd "&gt; &lt;html&gt; &nbsp;&lt;head&gt; &nbsp;&nbsp;&lt;title&gt;&nbsp;New&nbsp; document&nbsp;&lt;/title&gt; &nbsp;&nbsp;&lt;meta&nbsp;name= "generator" &nbsp;content= "EditPlus" &gt; &nbsp;&nbsp; &lt;meta&nbsp;name= "Author" &nbsp;content= "Crazy Scholar" &gt; &nbsp;&nbsp;&lt;meta&nbsp;name= "Keywords" &nbsp;content= "" &gt; &nbsp;&nbsp;&lt;meta&nbsp;name= "Description" &nbsp;content= "&gt; &lt;link&nbsp;rel=" stylesheet "&nbsp;type=" Text/css "&nbsp;href=". /themes/default/easyui.css "&gt; &lt;link&nbsp;rel=" stylesheet "&nbsp;type=" Text/css "&nbsp;href=". /themes/icon.css "&gt; &lt;script&nbsp;type=" Text/javascript "&nbsp;src=". /jquery-1.4.2.min.js "&gt;&lt;/script&gt; &lt;script&nbsp;type=" Text/javascript "&nbsp;src=". /jquery.easyui.min.js "&gt;&lt;/script&gt; &lt;script&nbsp;type=" Text/javascript "&nbsp;src=" Jquery-easyui-window-expand.js "&gt;&lt;/script&gt; &lt;script&nbsp;type=" TeXt/javascript ' &gt; &nbsp;&nbsp;&nbsp;&nbsp;$ (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' # Btnopen '). Click (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;
html&nbsp;=&nbsp; ' &lt;input&nbsp;type= ' text "&nbsp;id=" Text1 "&nbsp;name=" "&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fn&nbsp;=&nbsp;function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert ($ (' #
Text1 '). Val ()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #w '). Hwindow ({HTML:HTML,SUBMIT:FN});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #btnOpen1 '). Click (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp; ' &lt;input&nbsp;type= ' text "&nbsp;id=" Text1 "&nbsp;name=""&gt;&lt;input&nbsp;id=" BTN1 "&nbsp;type=" button "&nbsp;value=" submitted "&nbsp;onclick=" "&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fn&nbsp;=&nbsp;function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert (' second window ')
; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #w '). Hwindow ({html:html,title: ' second window ', SUBMIT:FN}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #btn1 '). Click (function () {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert ($ (this). Prev ()
. val ());
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #btnOpen2 '). Click (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp; ' &lt;textarea&nbsp;name= ' "&nbsp;rows=" "&nbsp;cols=" "&gt;&lt;/textarea
&gt;&lt;input&nbsp;type= "checkbox" &nbsp;name= "" &gt; ";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fn&nbsp;=&nbsp;function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert (' third window ')
; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (' #w '). Hwindow ({iconcls: ' Icon-save ', Html:html,title: ' Third window ', SUBMIT:FN});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &NBSP;&NBSP;&NBSP;&NBSP}) &nbsp;&nbsp;&lt;/script&gt; &nbsp;&lt;/head&gt; &lt;body&gt; &lt;input&nbsp;type= " Button "&nbsp;value=" New Window "&nbsp;id=" Btnopen "&nbsp;&gt; &lt;input&nbsp;type=" button "&nbsp;value=" new Window 1 "&nbsp;id=" BtnOpen1 "&nbsp;&gt; &lt;input&nbsp;type=" button "&nbsp;value=" New Window 2 "&nbsp;id=" BtnOpen2 "&nbsp;&gt; &nbsp;&nbsp;&lt; Div&nbsp;id= "W"&nbsp;&gt;&lt;/div&gt; &nbsp;&lt;/body&gt; &lt;/html&gt;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More