首页 » 网站建设 » php7jqgrid技巧_前端开拓分享一个开源功能强大的jQuery表格插件jqGrid

php7jqgrid技巧_前端开拓分享一个开源功能强大的jQuery表格插件jqGrid

访客 2024-11-19 0

扫一扫用手机浏览

文章目录 [+]

1、下载及引入jqGrid

https://github.com/tonytomov/jqGrid

php7jqgrid技巧_前端开拓分享一个开源功能强大的jQuery表格插件jqGrid

下载jqGrid后,把文件存放到你项目的任意目录中,利用时引入js、css即可,下面以引入Bootstrap样式为例,i18n下的js为措辞包,须要把稳的是请务必把措辞包放在jqGrid的js之前引入,以免后续涌现问题。

php7jqgrid技巧_前端开拓分享一个开源功能强大的jQuery表格插件jqGrid
(图片来自网络侵删)

2、初始化表格

页面中输入<table id=\公众grid-table\公众></table><div id=\"大众grid-pager\"大众></div>,页面基本就这样,然后在js中配置干系信息初始化表格。

下图opt的基本参数,请到api文档查看更多配置属性

在opt中还有一个表格配置属性colModel,该属性便是我们要展示的表头,数据等信息的配置,下图是一个大略的例子。

后台须要返回如下格式的json数据,page为当前页数,records为统共有多少条数据,rows为数据,total为统共页数

末了我们配置完成后是这样的。

刷新页面后大概便是下面的样子,没有真实姓名之后的列和导航栏中的工具按钮。

想要配置工具按钮也很大略,配置以下信息即可,内置按钮有新增、编辑、删除、搜索、刷新、查看按钮,可以添加自定义按钮,内置按钮也可以重写其方法,能够方便的实现我们想要的功能。

3、新增、编辑、删除功能

大致可以分为弹窗和内联两种操作,可以自己进行自定义,也可以跳转页面进行新增、编辑

弹窗

内联

4、页脚汇总和分组

5、分页

分页办法有两种,导航分页和无限滚动分页

导航分页

无限滚动分页

6、其他

还有很多其他的功能如多选、单选、多层次构造展示、排序、搜索过滤等。
唯一的毛病是树形表格,目前它的树形表格配置繁琐,也存在比较的的问题,但也还勉强能接管,希望树形表格在往后能够有所改进。

API文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

在线演示:http://www.guriddo.net/demo/bootstrap/

标签:

相关文章

介绍外链查看,网络时代的信息透视术

在信息化时代,互联网已成为人们获取信息、交流沟通的重要平台。外链作为网络信息传播的重要载体,承载着海量有价值的内容。如何查看外链,...

网站建设 2025-01-02 阅读0 评论0

介绍天马套,创新科技引领家居生活新潮流

随着科技的飞速发展,智能家居市场逐渐成为人们关注的焦点。天马套作为一款智能家居产品,凭借其独特的设计和卓越的性能,在市场上赢得了广...

网站建设 2025-01-02 阅读0 评论0

代驾费用计算介绍,合理布局,清晰定价

随着我国经济的快速发展,汽车已经逐渐成为人们生活中的重要交通工具。与此代驾服务也应运而生,为广大车主提供便捷、安全的出行体验。不少...

网站建设 2025-01-02 阅读0 评论0

介绍墨盒撬开方法,科技与艺术的完美融合

墨盒,作为打印机的重要组成部分,承载着打印机的核心功能。墨盒在长时间使用后,往往会出现漏墨、堵塞等问题,导致打印效果不佳。为了解决...

网站建设 2025-01-02 阅读0 评论0