JQuery easyUIの使用-PHPチュートリアル-php.cn

JQuery easyUIの使用

高洛峰

リリース： 2016-11-01 13:08:18

オリジナル

1186 人が閲覧しました

最近在做一个公司的后台项目中，接触到 JQuery easyUI前端框架，被她简洁的代码和简单有效的ajax交互所深深吸引。

　　体会有以下3个方面：

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

后端程序，比如PHP只需要给前端一个json的数组，easyUI就能自己进行循环数组，填充表格，方便又快捷。分页也是一步到位

//表格 PHP后端代码
$pageList[&#39;rows&#39;] = array(
    array(&#39;name&#39;=>&#39;周杰伦&#39;, &#39;work&#39;=>&#39;歌手&#39;),
    array(&#39;name&#39;=>&#39;叶良辰&#39;, &#39;work&#39;=>&#39;网红&#39;),

);
$pageList[&#39;total&#39;] = 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[&#39;name&#39;] = name;
$(&#39;#myTable&#39;).datagrid(&#39;load&#39;, param);//表格id

//2. 表格数据清空
$(&#39;#dlg_show_detail_table&#39;).datagrid(&#39;loadData&#39;,{total:0,rows:[]});



</script>

ログイン後にコピー

3) 当前页面弹窗，同时支持再搜索和列表和分页：

　　web应用中很多时候需要列表，然后点击查看详情，easyUI就很容易点击查看详情，同时支持详情的再搜索和分页(也是基于ajax)

<script>
//弹窗的代码和前面的 table的代码基本一样，只要制定了class就行
//class="easyui-datagrid"

//点击列表的某一列
function lookOver(val, row) {
    return &#39;<a href="#" onclick="showListDetail(&#39; + row.id + &#39;)">查看</a>&#39;;
 }

//弹窗显示
$("#dlg_show_list_detail").dialog(&#39;open&#39;);//弹窗table 的id


</script>

ログイン後にコピー