【夯实PHP基础系列】JQuery easyUI的使用
2024-10-15 21:35:19
最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引。
体会有以下3个方面:
1)快速创建表格的能力:
后端程序,比如PHP只需要给前端 一个json的数组,easyUI就能自己进行循环数组,填充表格,方便又快捷。分页也是一步到位
//表格 PHP后端代码
$pageList['rows'] = array(
array('name'=>'周杰伦', 'work'=>'歌手'),
array('name'=>'叶良辰', 'work'=>'网红'), );
$pageList['total'] = ;
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中文网
最新文章
- 诡异的C语言实参求值顺序
- 【Kubernetes】两篇文章 搞懂 K8s 的 fannel 网络原理
- 读取XML绑定TreeNode
- JavaWeb 7 Servlet
- [前端 1] 使用frameset框架构建网页基本布局
- 理解Android Java垃圾回收机制
- js数组(一)
- windows上放弃使用PyGTK
- jsmart 前结合案例
- java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I
- idea的pom.xml中提示dependency‘’not found
- 避免MQ消息重发的简单实现思路
- Docker容器内部端口映射到外部宿主机端口的方法小结
- linux -bash . startup.sh Permission denied
- Locks Set by Different SQL Statements in InnoDB
- ubuntu安装wkhtmltopdf
- Java Jdk1.8 HashMap源代码阅读笔记二
- apk签名方法
- 6.openldap客户端安装
- Longge&#39;s problem(欧拉函数应用)
热门文章
- sleep和wait区别
- Atitit.自然语言处理--摘要算法---圣经章节旧约39卷概览bible overview v2 qa1.docx
- 如何用注解简化SSH框架
- 在Package中处理 bit column
- 利用Bootstrap快速搭建个人响应式主页(附演示+源码)
- datatable去重
- EntityFramework 7.0之初探【基于VS 2015】(十)
- 应用程序框架实战二十二 : DDD分层架构之仓储(层超类型基础篇)
- linux标准IO缓冲(apue)
- Delegate、Predicate、Action和Func