优化老项目jqgrid/flexigrid表格插件的神助工具

于 2021-05-07 14:53:34 发布
阅读量179 收藏
点赞数
分类专栏： 优化插件 文章标签： web vue jquery html5 jqgrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q510461356/article/details/116492111
版权

需求背景

开发者手里多少有几个老项目，想换皮却因修改太多感到力不从心，想用新框架又有些不可舍弃的东西，很期望有这样一款插件可完美地让项目中的列表变得高大上，支持批量勾选，支持每条自动生成搜索框，自带搜索、重置按钮，还可在顶部添加自定义按钮，又能自定义列操作按钮，还能将原有html按钮排成弹出下拉按钮组合…
在这里插入图片描述

愿景

  1. 不改或极少改源码为前提
  2. 样式高大上
  3. 一键产生组合搜索
  4. 能自定义行列按钮组
  5. 列表中更新字段

他来了

富有节操的代码
在这里插入图片描述
舒适的页面效果
在这里插入图片描述
>> 有需求的伙伴请点开，不喜勿喷 >>

q510461356
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jqGrid增删改查显示——显示+nodejs后台
TTTPlusR
01-04 4957
这几天开始总结一下最近研究的一个插件——jqGrid，都是些非常入门的点，希望能帮到有需要的人吧~ PS：博主的方法不是唯一的，也不完全正确，有不对的地方希望能指出来！！！我只是把我知道的介绍给大家。 （1）引入jqGrid插件的js文件 这里就不详细说了，值得注意的是： 从3.5版本开始，jqGrid完全支持jquery UI的theme。我们可以从http://jque
jqgrid插件
sytloveyxj的博客
08-13 595
最近给导师做的项目中，大量的使用到了表格，所有的表格都是基于jqgrid这个插件来实现的，接下来，我将详细的总结一下这个框架 jqGrid是一个在jQuery基础上做的一个表格控件，主要以ajax的方式和服务器进行通信。 首先是他的安装，跟大多数js插件一样，只要导入相应的js文件就可以了，因为基于jQuery的所以需要到导入的插件有  jqGrid是典型的B/S架构，服务器端只是提供数据管
jqgrid 控件应用
feiteyizu
08-03 230
jQuery("#grid_id").setGridParam().showCol("colname") jQuery("#grid_id").setGridParam().hideCol("colname")   jQuery("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid"
jquery表格控件--jqGrid使用
10-12 7381
    项目中用到了jQuery的jqGrid表格控件，功能还算强大。主要是在封装json数据的时候比较麻烦，先来看grid要求的json数据格式：{"total":1,"page":1,"records":10,"rows":[{"id":1,"cell":["字段1","字段2",.....]},{[id":2,"cell":["字段1","字段2",.....]}]}total:总页
自己写一个轻量的JqueryGrid组件
weixin_30354675的博客
03-18 113
接触mvc不久，突然没有了viewstate和服务端控件处处都觉得不顺手，很多在webform时不必要考虑的问题都出现在眼前，这其中分页时查询条件保持的问题又是最让我头疼的事情，权衡再三，决定用ajax局部刷新列表的方式来解决这个问题。网上基于jquery的grid组件很多，jquerygrid，jqgrid等等，分别试用了一下，功能确实非常强大，但感觉上有点重，配置项太多，用起来依然感觉束手束脚...
jqgrid-flexigrid替代优化.zip
04-20
每个码农的手里多少有几个老项目，想换皮却因修改太多感到力不从心，想用新框架又有些不可舍弃的东西，现在这款插件可完美地让项目中的列表变得高大上，支持批量勾选，支持每条自动生成搜索框，自带搜索、重置按钮，...
Jqgrid之强大的表格插件应用
11-22
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性： 基于...
jqGrid jQuery 表格插件测试代码
12-01
jqGrid是一款基于jQuery的表格插件，用于展示和操作数据，提供丰富的功能，如分页、排序、筛选、编辑等。在上述代码中，我们看到了一个使用jqGrid创建的本地数据表格实例。以下是对该代码的详细解释： 1. **初始化...
自定义jqGrid编辑列中的控件
weixin_30535043的博客
09-27 110
/******************************************* * Description: * 自定义jqGrid编辑列中的控件 * * 可格式化的类型： * 1)PopupDialog 弹出框.可选择数据并返回值到编辑列 * 2)DateTime 日历控件 * * DateTime调用方法： * 在编辑列中加属性 form...
jqGrid构造下拉表格控件 dropDownGrid -ace Admin
zrk1000的专栏
06-19 8189
使用ace Admin开发过程中使用modal（模态框）弹出表单，输入框需要从数据库其他表中取值填充，一般情况下select或更方便的chosen就可以；若需要在下拉中显示多列，chosen就满足不，若在modal中再弹modal会影响底层modal的滚动事件，多层modal不是好的选择；还是自己封装个来的简单明了。
jqgrid 二次封装上传 jqgrid 5.0以上版本
04-25
jqgrid二次封装，快速加载grid表格，不改变原有的使用习惯，增加一些默认处理逻辑 var grid = $.jqGrid.init({ url: "/component/config/select.html", add: {content:"/admin/component/config/configEdit.jsp",area: ['860px', '540px'],title:"添加系统组件配置"}, edit: {content:"/component/config/edit.html",area: ['860px', '540px'],title:"编辑系统组件配置"}, del: "/component/config/delete.html", layer:{add:true,edit:true}, multiselect: true, rownumbers: true,//显示序号 colModel: [ {name:'id',index:'id',label:"ID", width:60,key: true,hidden: true}, {name:'name',index:'name', label:"名称",width:150,sortable:false}, {name:'class',index:'class',label:"类路径",width:90,sortable:true}, {name:'type',index:'type',label:"类型",width:60,sortable:true,editable: true,"editoptions":{value:selectTypeData['B4D84A86E42842188FB2658D6A9092A9'].grid},"formatter":'select'}, {name:'url',index:'url', label:"编辑页面路径",width:70}, {name:'enterprise',index:'enterprise', label:"企业",width:60}, {name:'username',index:'username', label:"创建人",width:60}, {name:'time',index:'time',label:"创建时间",width:90,sortable:true}, {name:'description',index:'description',label:"描述"} ] }); 按钮实现多种处理逻辑具体请看源码
jqgriddemo,样式漂亮，可以直接使用
01-09
jqgriddemo,样式漂亮，可以直接使用，满足多种复杂的前端表格操作功能，有需要的小伙伴可以学习学习
JqGrid之动态改变下拉框-yellowcong
09-27 6101
JqGrid项目中，需要操作combxo，而且是动态改变的，这下子菊花又痒了，需要用到的函数$('#grid').setColProp('cloumnNm', {editoptions: {value:"test:test;test2:test2"}}),其中，一定要注意options里面的写法是 xx:xx 而且不要以分号结尾，不然就会导致有一个未定义的列表框
flexigrid教程（一）-jquery最好的grid插件
hjwang1的专栏
10-27 2373
转自：http://hi.baidu.com/fengkuang031/blog/item/f030284ded6a123cafc3ab98.html 有用过ext的Grid或flex的DataGrid的朋友，应该对gird组件有比较好的理解。grid是强大的表格数据表现形式，是对表格的全面强化。 flexigrid从名字来看更接近flex，但实际上应该模仿的是ext的Grid组件。
基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明
nowgoant的专栏
05-19 758
<br /><br />要说jQuery下最好用的Grid控件是什么？<br />inGrid? No！功能太简单<br /><br />jqGrid？刚研究的时候还是3.4版，界面老土，代码臃肿。。虽然功能强大，所以NO！<br />最新beta版，基于jquery.UI 界面变好看了，但是也因为它变得更臃肿了，具体没有深入的研究了<br /><br />在我心灰意冷准备从头自己动手时，发现了Flexigrid,才知道世界原来还是很美好，其Ext风格的外观，简洁的代码，<br />强大的功能都深深地吸引了
jQuery插件flexiGrid的完全使用，附代码下载
gundumw100的专栏
04-10 1147
在这个例子中其实不光使用了flexiGrid,还有 http://gundumw100.iteye.com/blog/543977，跟本例无关--> 这些插件 可以先看看下面的图片 其中blackbird是个javascript调试插件，如果没有出现黑色窗口，按F2键显示。（若按F2无反应，请看这里http://gundumw100.iteye.com/blog/5431
关于jqGrid动态改变列的解决方案
weixin_34054931的博客
08-14 359
项目中使用了jqGrid列表控件，碰到“通过选择不同的日期段，出现该日期段中每一天的统计数据”这样的需求。因为之前对这个列表控件不是很熟悉，网上的资料显示和列相关的两个属性：colName、colModel都是不可更改的。 所以这个办法行不通，也就退而求其次，想通过重新加载的方法，为这两个列重新设置值。但是，这仍然没有成功。中文社区中，也没有很有效的解决方案。后来同事在英文社区，给找到了相应的解...
jqgrid插件样式修改
aike4954的博客
07-19 647
jqgrid插件样式颜色都有默认设置，以下是自己总结的可以改变表格样式： jqgrid使用需要引用ui.jqgrid.css文件，在此文件中可以改变表格样式 数据表格设置.ui-jqgrid tr.jqgrow td{font-weight:normal;overflow:hidden;text-align:left;white-space:pre;height:50px;paddi...
JQGrid：基于jQuery的高级表格控件与集成教程
通过这个系列教程，开发者可以学习如何有效地利用JQGrid在实际项目中构建动态表格，提升用户体验，并且由于它是免费、开源的，使得它成为一个经济且实用的选择。 JQGrid系列教程涵盖了从基础安装配置到实际应用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

q510461356

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值