最近在做一個公司的後台項目中，接觸到 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"
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中文網
