【夯实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中文网
- 作者:天行健·自强不息
- 出处:http://www.cnblogs.com/aiweixiao/
- 本文版权归作者和博客园共有,欢迎转载,如需联系 sishuinianhua369#126.com
如果您觉得本文对您的学习有所帮助,可通过微信或者支付宝 来打赏博主,增加博主的写作动力
微信支付 支付宝支付


【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
· 零经验选手,Compose 一天开发一款小游戏!