JQuery easyUI的使用

最近在做一个公司的后台项目中，接触到 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);

<!---ecms 前端html代码--><table id="myTable" class="easyui-datagrid" title="表格标题">  <thead>    <tr>       <th width="30%">姓名</th>       <th 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)

<scr<b style="color:transparent">（、本文来源gao@!dai!ma.com搞$$代^@码网*</b><i>搞gaodaima代码</i>ipt>//弹窗的代码和前面的 table的代码基本一样，只要制定了class就行//class="easyui-datagrid"//点击列表的某一列function lookOver(val, row) {    return '查看'; }//弹窗显示$("#dlg_show_list_detail").dialog('open');//弹窗table 的id</script>

喜欢 (0)赏

[搞代码]

分享 (0)