The use of "tamping PHP Basic series" JQuery Easyui

Recently, in the background project of a company, I was exposed to the JQuery Easyui front-end framework and was fascinated by her concise code and simple and effective Ajax interactions.

Experience has the following 3 aspects:

1) Ability to quickly create tables:

Back-end programs, such as PHP only need to give the front end of a JSON array, Easyui can do their own loop array, fill the table, convenient and fast. Pagination is also one step

//table PHP Back-end Code$pageList ['rows'] =Array (Array ('name'='Jay Chou',' Work'='singer'), Array ('name'='Ye Liangchen',' Work'='NET Red'); $pageList [' Total'] =2; Echo Json_encode ($pageList);

<!--front-end HTML code -<TableID= "MyTable"class= "Easyui-datagrid"style= "width:1100px;height:600px;"URL= "/yourcontroller/action"title= "Table title"Iconcls= "Icon-save"rownumbers= "true"pagination= "true"pageSize= " the"data-options= "Singleselect:true">  <thead>    <TR>       <thField= "Name"width= "30%" >Name</th>       <thField= "Work"width= "30%" >Occupational</th>    </TR>  </thead></Table>

　　

2) The ability of the server-side program Ajax to interact with the table and back-end PHP:

A property URL in the table table in the front-end code above is the address of the AJAX request backend.

In addition, some common Ajax interaction code is as follows:

<script>//1. Set parameters, Ajax request backend program var param = {}; var name = $ ("#serach_name"). Val ();p aram[' name '] = name;$ (' #myTable '). DataGrid (' Load ', param); // table ID // 2. The tabular data is emptied by $ (' #dlg_show_detail_table '). DataGrid (' LoadData ', {total:0, rows:[]}); </script>

3) The current page pop-up window, support re-search and list and paging:

　　Many times a web app needs a list and then clicks on the details, Easyui is easy to click to view details, while supporting the details of re-search and paging (also based on Ajax)

The code of the <script>// pop-up window is basically the same as the code in the previous table, as long as the class is set //class= "Easyui-datagrid"  // Click on a column of the list function  lookover (val, row)    {return ' <a href= ' # "Onclick=" showlistdetail (' + row.id + ') "> View </a> ';} // The pop-up window displays $ ("#dlg_show_list_detail"). Dialog (' Open '); // Pop-up window table ID</script>

Summarize:

The project is just using the next Easyui, and has not yet had time to fully read its documentation, then be sure to read her documentation in more detail, using more simple and effective methods.

To write less, does more

Appendix: JQuery Easyui Chinese web

　　

The use of "tamping PHP Basic series" JQuery Easyui