夯实PHP基础系列JQuery easyUI的使用

Posted wozhuzaisi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了夯实PHP基础系列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);
<!--前端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的使用的主要内容,如果未能解决你的问题,请参考以下文章

夯实PHP基础系列PHP正则表达式

PHP夯实基础系列PHP日期,文件系统等知识点

夯实Java基础系列目录

夯实Java基础系列10:深入理解Java中的异常体系

EasyUI系列学习-入门

夯实PHP系列购物车代码说明PHP的匿名函数