【夯實PHP基礎系列】JQuery easyUI的使用

標籤：web   blog   grid   targe   tab   ber   參數   number   net   

　　最近在做一個公司的後台項目中，接觸到 JQuery easyUI前端架構，被她簡潔的代碼和簡單有效ajax互動所深深吸引。

　　體會有以下3個方面：

　　1）快速建立表格的能力：

          後端程式，比如PHP只需要給前端 一個json的數組，easyUI就能自己進行迴圈數組，填充表格，方便又快捷。分頁也是一步到位

//表格 PHP後端代碼$pageList[‘rows‘] = array(    array(‘name‘=>‘周杰倫‘, ‘work‘=>‘歌手‘),    array(‘name‘=>‘葉良辰‘, ‘work‘=>‘網紅‘),);$pageList[‘total‘] = 2;echo json_encode($pageList);

<!--前端html代碼--><table id="myTable" class="easyui-datagrid" style="width:1100px;height:600px;"url="/yourController/action"  title="表格標題" iconCls="icon-save" rownumbers="true" pagination="true" pageSize="20" data-options="singleSelect:true">  <thead>    <tr>       <th field="name" width="30%" >姓名</th>       <th field="work" width="30%" >職業</th>    </tr>  </thead></table>

　　

　　2）表格和後端PHP等服務端程式 ajax互動的能力：

　　上面的前端代碼中的 表格table中有一個屬性 url就是 ajax請求後端的 地址。

      此外一些常見的 ajax互動的代碼如下：

<script>//1.設定參數，ajax請求後端程式var param = {};var name = $("#serach_name").val();param[‘name‘] = name;$(‘#myTable‘).datagrid(‘load‘, param);//表格id//2. 表格式資料清空$(‘#dlg_show_detail_table‘).datagrid(‘loadData‘,{total:0,rows:[]});</script>

 

　　3) 當前頁面彈窗，同時支援再搜尋和列表和分頁：

　　web應用中很多時候需要列表，然後點擊查看詳情，easyUI就很容易點擊查看詳情，同時支援 詳情的再搜尋和分頁(也是基於ajax)

 

<script>//彈窗的代碼和前面的 table的代碼基本一樣，只要制定了class就行//class="easyui-datagrid"//點擊列表的某一列function lookOver(val, row) {    return ‘<a href="#" onclick="showListDetail(‘ + row.id + ‘)">查看</a>‘; }//彈窗顯示$("#dlg_show_list_detail").dialog(‘open‘);//彈窗table 的id</script>

 

 

　　總結:

　　這次項目只是使用了下 easyUI,還沒有來得及全面閱讀其使用文檔，隨後一定要詳細閱讀下她的文檔，使用更多簡單有效方法。

     to write less ,do more

 

　附錄： JQuery easyUI中文網

 

 

 

 

　　

【夯實PHP基礎系列】JQuery easyUI的使用