表格组件
文章平均质量分 71
写个程序换个饼
一个玩过传奇喜欢杀生丸的前端开发,GridManager作者。
展开
-
原生跨框架的表格组件,三步实现万条不卡
确定在GridManager内实现万条不卡的想法,最早出现于2021年初同郑某人和杨某人的饭局上。如今功能已经实现,整理下这个值得记录的过程。现状分析在虚拟滚动落地前,针对于现有逻辑的改造是个前置条件。上方gif内演示了在实现万条不卡前,表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上,所以在需要对渲染逻辑进行较大范围改造时,原先的能力就成为了不小的包袱。因此在不影响现有功能的情况下支持万条不卡,需要按序实现以下三个步骤:tbody区域的数据驱动改造: 降低功能复杂度差异化原创 2022-01-05 11:27:09 · 869 阅读 · 0 评论 -
产品经理天马行空,表格组件应对自如
前端表格组件,大概是pc端中使用最频繁的组件,也是产品经理(一般还兼理UE,EX)最能折腾的一个组件。福兮祸兮,在折腾中磨炼了许多年后,表格组件成为我在圈内唯一敢用精通来形容的技术点。产品经理天马行空虽然没几个人把产品当作经理,但Product Manager直译过来好像还真是这个意思。产品递给我一份需求文档,并随口来了一句三停顿的话:“新增个列表加搜索,简单很,明天能上吧?”我拿起沾满污渍的咖啡杯,深深的品了一口。如果你仅仅以为我是渴了,那就肤浅了,要知道嘴也是栈结构的,不等我这口悠长的咖啡原创 2021-12-07 15:45:55 · 670 阅读 · 0 评论 -
表格分页等操作后,如何保持已选中的值?
实现效果在管理端开发中,经常会遇到一种表格交互:分页、排序、搜索等操作之后,需要保留之前已选中的数据。如下所示:在GridManager中的配置方式checkboxConfig.disableStateKeep: false,或者使用默认值,即可实现分页等操作后保留已选中数据的能力。new GridManager(table, { // 选择框配置 checkboxConfig: { // 触发刷新类操作时(搜索、刷新、分页、排序、过滤),是否禁用状态保持原创 2021-09-15 09:41:21 · 528 阅读 · 0 评论 -
GridManager表格组件实现过滤功能
效果展示在表头中增加过滤项是很多产品经理特别钟意的交互,据说是可以提升打野怪的效率。如何配置过滤功能在GridManager中被归类于列配置项,所以该功能需要操作关建配置项columnData中的filter。columnData的使用在使用filter之前需要先对GridManager的核心配置项columnData有一定的了解。columnData用于定义表格列配置参数,为数组类型。每一个数组元素对应一个表格列, 通过该参数对表格列进行配置。基础使用方式示例,点击可在线进行调试:原创 2021-02-07 18:06:36 · 364 阅读 · 0 评论 -
表格组件实现打印功能
这是一个不是很常用的功能,但却是在不经意间提升用户体验。使用场景用户通过界面搜索出一组数据,仔细一看这组数据实在是太重要了,重要到需要向上汇报(拍马屁)。此时的用户可以选择: 抱着电脑 || 截图发送 || 发送链接和查询条件。但我们做为前端开发人员,是可以向用户提供另外一种选择: 将查询结果打印,以纸质的形式进行信息传递。有时候,实实在在拿在手里的东西更有感觉。无纸办公的情况就不反驳了,我们只是多出一种选择,而非必选。实现方式比如我们现在有这么一组很有价值的数据(敲黑板,这都是我努力码.原创 2020-10-13 09:42:53 · 176 阅读 · 0 评论 -
鼠年的最后一天,盘点下表格组件在2020年的更新记录
在过年前的最后一个工作日,总结一下维护6年的表格组件。回头一看,时间过的真快,距离v0.0.1已经过去了2191天。表格组件近照虽然在github上一直不温不火,但该有的迭代却一直在持续。2020年的第一版在2020/1/12下午7:19:10,发布了2020年的第一个版本2.10.5。该版本中新增了当前页打印功能,并修复和优化了部分逻辑。2020年的最后一版在2020/12/9上午9:07:17,发布了2020年的最后一个版本2.14.17。该版本中并没有新增功能,只是简单的处理了警告信.原创 2021-02-09 13:10:39 · 154 阅读 · 0 评论 -
表格组件GridManager的嵌套表头详解
嵌套表头这个功能在经历了多次调整后,终于在V2.13.0这个版本内发布。效果展示先来一张嵌套表头的效果图如何使用配置起来相当简单,只需要在配置项中的columnData中增加children属性即可实现。children属性为数组类型, 与columnData使用方式相同,children可无限嵌套。<table id='table-demo-nestedCode'></table>new GridManager(document.querySelector.原创 2020-08-18 18:10:57 · 485 阅读 · 0 评论 -
GridManager loading样式修改
在使用gridmanager表格组件时,如果想要改变loading样式该如何处理?gridmanager提供的loadingTemplate参数可以快速的解决这个问题。loadingTemplate参数的介绍:参数类型: String默认值: ‘’数据加载中模板,该配置可以自定义数据加载时使用的loading样式。使用该配置时,需要自行提供与模板相匹配的css样式。使用方式new GridManager({ gridManagerName: 'test', loading.原创 2020-06-02 17:09:44 · 305 阅读 · 0 评论 -
GridManager Error: response.totals undefined,please check totalsKey
在使用GridManager的时候,有时会出现以下错误:GridManager Error: response.data is not Array,please check dataKey解决方法这个错误是由于返回的data并不是一个数组,并提示检查配置项dataKey。如果dataKey与接口返回字段不匹配,那么组件通过dataKey获取到的将是undefined。比如接口返回格式如下:{ list: [ {name:'baukh', age: 11}, {name:'baukh2',原创 2020-05-25 13:23:27 · 680 阅读 · 0 评论 -
GridManager Error: response.data is not Array,please check dataKey
在使用GridManager的时候,有时会出现以下错误:GridManager Error: response.data is not Array,please check dataKey解决方法这个错误是由于返回的data并不是一个数组,并提示检查配置项dataKey。如果dataKey与接口返回字段不匹配,那么组件通过dataKey获取到的将是undefined。比如接口返回格式如下:{ list: [ {name:'baukh', age: 11}, {name:'baukh2',原创 2020-05-22 18:32:33 · 945 阅读 · 0 评论 -
如何解决错综复杂的表格数据(GridManager随笔)
自从前后端分离的模式推广以后,前后端的开发人员就开始了针对于数据格式的相爱相杀。后端返回数据对我们前端来言,后端小哥的一些神返回实在难以理解。我们做个表格,所期望的后端返回数据格式是这样的:{ "list":[ { "name": "baukh", "age": "28", "info":...原创 2020-04-29 12:49:21 · 387 阅读 · 1 评论 -
GridManager--隐藏列功能
GridManager 表格管理组件, 对列的隐藏与显示的操作有两种方式。初始化时指定列为隐藏或显示状态。方式如下:<table></table>table.GM({ gridManagerName: 'test', ajax_data: 'http://www.lovejavascript.com/learnLinkManager/getLea...原创 2020-04-01 18:47:19 · 376 阅读 · 0 评论 -
GridManager 导出功能
导出功能现在分为两种模式: static, blob初始化时指定启用导出功能。方式如下:<table></table>var table = document.querySelector('table')table.GM({ gridManagerName: 'demo-export', ajax_url: 'http://www.loveja...原创 2020-04-01 18:46:46 · 349 阅读 · 0 评论 -
GridManager 用户偏好记忆
[GridManager][http://gridmanager.lovejavascript.com/] 会将用户的部分操作进行记忆,从而达到用户行为记忆的效果。为什么在GridManager中会存在用户偏好记忆在数据的时代,一份数据往往会由不同的角色共享。而这些角色所关注的数据项并不相同,有关注某些列,有的则会关注所有。对关注的列进行扩宽、靠前显示、隐藏掉与自身无关的列,或者针对自身...原创 2020-04-01 18:46:09 · 160 阅读 · 0 评论 -
GridManager 分页详解
GridManager 分页原理:首先, 注意了: GridManager 表格分页是需要 后端支撑 的.以下几个步骤实现分页:由前端发送包含分页信息的参数, 这是由 GridManager 自动实现的。 该参数包含以下信息{cPage: 当前页, pSize: 每页显示条数}后端解析请求, 并根据分页参数返回当前页的数据, 数据格式如下:{ "data":[ ...原创 2020-03-31 18:59:21 · 912 阅读 · 0 评论 -
GridManager 调整数据格式
GridManager在处理数据时,需要使用规定的数据格式。而在实际场景中,或多或少存在一些格式差异。在这里将对这些差异的处理方式进行说明1、仅返回字段名不符一级数据中的 data 与 totals, 可以使用 dataKey 和 totalsKey 进行调整。后端返回数据为:{ "list":[ // GridManager 期望返回的是 data, 而这里返回了 lis...原创 2020-03-31 18:56:58 · 292 阅读 · 0 评论 -
2019年与表格同在
在2015年初,表格组件GridManager立项,不知不觉间已过去了1700多天。在2019年初定下的目标这些年来,表格项目一直不温不火,github的star总是滴滴哒哒的缓慢增长。反观那些与技术无关的star几天之内就10k+, 除了羡慕之外还有些许不平。革命尚未成功,同志还需努力。于是在2019年初启之际,为表格定下了star过千的目标。为了这个目标我做了这些事支持三大框...原创 2020-03-31 18:56:29 · 114 阅读 · 0 评论 -
表格组件GridManager的固定列详解
从2019年初时,就想添加固定列功能。但由于是源生编码而又需要支持框架的引用,调试来调试去,空留下一个fixed分支。受今年疫情的影响,周未有了大把的时间。于是把去年未完成的固定列功能进行了实现。如何使用由使用者配置的列配置起来相当简单,不需要单独去维护一个列,只需要在配置项中的columnData中增加fixed属性即可实现。fixed属性的默认值为undefined,共接收两个值...原创 2020-03-31 18:54:05 · 844 阅读 · 0 评论 -
功能强大的表格组件
最近把列固定功能发布了,细数下这个表格组件已经有五年的历程了。基础功能首先,我们来看看这个表格组件的基础功能。通过GridManager可以通过简单的配置实现: 选择列、序号、排序、分页、过滤、表头提醒、合并单元格等基础功能。这些功能已经可以满足大部分产品需求,但这远远是不够的。宽度调整让表格的宽度由用户来掌握,就像excel那样。在宽度调整的同时,通过简单的配置实现...原创 2020-03-31 16:34:20 · 447 阅读 · 8 评论 -
跨框架的表格组件: 一套代码多框架运行
这几年来,一直在思考怎么做出一款功能强大且配置简易的原生JS表格组件。为此做了很多功能,也对这些功能做过多轮的优化以达到配置简易的愿景。而在开发过程中,总有个绕不过去的坎: 框架模板无法解析。这是一个什么概念呢?当在框架环境中渲染表格组件,这个表格内的模板只能使用原生JS,无法使用任何框架特性。这也就意味着,当在表格模板内使用框架组件时将无法渲染。如下所示,通过模板配置一个Vue的Bu...原创 2020-03-25 18:50:49 · 229 阅读 · 0 评论 -
React 表格组件 GridManager-React
GridManager React基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外,其它API与GridManager API相同。实现功能功能描述宽度调整表格的列宽度可进行拖拽式调整位置更换表格的列位置进行拖拽式调整配置列可通过配置对列进行显示隐藏转换表头吸...原创 2020-03-25 18:19:32 · 568 阅读 · 1 评论 -
Vue 表格组件 GridManager Vue
GridManager Vue基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。实现功能功能描述宽度调整表格的列宽度可进行拖拽式调整位置更换表格的列位置进行拖拽式调整配置列可通过配置对列进行显示隐藏转换表头吸顶在表存在可视...原创 2020-03-25 18:18:52 · 1443 阅读 · 0 评论 -
Angular表格组件 GridManager-Angular-1.x
GridManager Angular 1.x基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager.实现功能功能描述宽度调整表格的列宽度可进行拖拽式调整位置更换表格的列位置进行拖拽式调整配置列可通过配置对列进行显示隐藏转换表头吸顶在表存在可视区域的情况下,表头将一直存在...原创 2020-03-25 18:18:01 · 734 阅读 · 0 评论 -
原生表格组件--GridManager
GridManager.js快速、灵活的对Table标签进行实例化,让Table标签充满活力。实现功能功能描述宽度调整表格的列宽度可进行拖拽式调整位置更换表格的列位置进行拖拽式调整配置列可通过配置对列进行显示隐藏转换表头吸顶在表存在可视区域的情况下,表头将一直存在于顶部列固定指定某列固定在左侧或右侧排序表格单项排序或组合排序...原创 2020-03-25 18:12:22 · 501 阅读 · 0 评论