- 博客(71)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 功能强大的表格组件
最近把列固定功能发布了，细数下这个表格组件已经有五年的历程了。基础功能首先，我们来看看这个表格组件的基础功能。通过GridManager可以通过简单的配置实现: 选择列、序号、排序、分页、过滤、表头提醒、合并单元格等基础功能。这些功能已经可以满足大部分产品需求，但这远远是不够的。宽度调整让表格的宽度由用户来掌握，就像excel那样。在宽度调整的同时，通过简单的配置实现...
2020-03-31 16:34:20
408
8
原创 原生跨框架的表格组件，三步实现万条不卡
确定在GridManager内实现万条不卡的想法，最早出现于2021年初同郑某人和杨某人的饭局上。如今功能已经实现，整理下这个值得记录的过程。现状分析在虚拟滚动落地前，针对于现有逻辑的改造是个前置条件。上方gif内演示了在实现万条不卡前，表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上，所以在需要对渲染逻辑进行较大范围改造时，原先的能力就成为了不小的包袱。因此在不影响现有功能的情况下支持万条不卡，需要按序实现以下三个步骤:tbody区域的数据驱动改造: 降低功能复杂度差异化
2022-01-05 11:27:09
821
原创 产品经理天马行空，表格组件应对自如
前端表格组件，大概是pc端中使用最频繁的组件，也是产品经理(一般还兼理UE,EX)最能折腾的一个组件。福兮祸兮，在折腾中磨炼了许多年后，表格组件成为我在圈内唯一敢用精通来形容的技术点。产品经理天马行空虽然没几个人把产品当作经理，但Product Manager直译过来好像还真是这个意思。产品递给我一份需求文档，并随口来了一句三停顿的话:“新增个列表加搜索，简单很，明天能上吧？”我拿起沾满污渍的咖啡杯，深深的品了一口。如果你仅仅以为我是渴了，那就肤浅了，要知道嘴也是栈结构的，不等我这口悠长的咖啡
2021-12-07 15:45:55
620
原创 开源项目从js到ts，我所遇到的一些问题
早在两年前，就拉了个ts的分支，但稍作尝试后，就找了一堆借口放弃了。最近处于离职状态，时间充裕的我终于下定决心向ts走近一步。准备工作期间先是在网上找了一些ts相关的资料，把原先只限于demo的ts技能稍作提升。过程中强迫自已先学习后动手，虽然学习过程中一行代码都不写的滋味并不好受，但总体下来却省下了很多时间。无关框架开源项目GridManager是一个原生js实现的跨框架(jquery、react、vue2.x、angular1.x)表格组件，所以在切换ts的过程中并不会牵扯到框架特性。问题.
2021-11-23 09:22:55
1323
2
原创 五年有余，离开前留点文字忆往昔
2016年加入，2021年离开，五年有余。有过美好，也有过无奈，告别数云之前整理一下，留点文字忆往昔。人力问了我两个问题提出离职后，人力问我为什么会选择离开。我顿了下，很平静的说道：“以前早晨醒来，会想着今天要去做什么事情，而且是那种特别想要去完成的事情。”“可是，现在的早晨却在懒床。”人力笑出了一个我懂的表情，然后问了另外一个问题：“五年多的时间里，你最大的收获是什么？”思考了半分左右的时间，直视着人力说道：“忍耐”。在人力惊讶的眼神中，我想起了许多。技术不进则死在2015年开始维
2021-10-13 10:56:59
160
原创 表格分页等操作后，如何保持已选中的值？
实现效果在管理端开发中，经常会遇到一种表格交互：分页、排序、搜索等操作之后，需要保留之前已选中的数据。如下所示:在GridManager中的配置方式checkboxConfig.disableStateKeep: false，或者使用默认值，即可实现分页等操作后保留已选中数据的能力。new GridManager(table, { // 选择框配置 checkboxConfig: { // 触发刷新类操作时(搜索、刷新、分页、排序、过滤)，是否禁用状态保持
2021-09-15 09:41:21
447
原创 [email protected]迁移[email protected]记录，减少了1.2%的构建体积
本文记录了GridManager表格组件升级[email protected]时的过程及遇到的问题, 包含了build, start, test等相关命令的问题修复。测试兼容性尝试在[email protected]的配置中添加如下选项，测试当前环境对[email protected]的兼容性。module.exports = { // ... node: { Buffer: false, process: false }};如果出错需要更新node版本，当前使用的node版本为v14.0.0。.
2021-03-10 16:43:20
672
1
原创 鼠年的最后一天，盘点下表格组件在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
131
原创 GridManager表格组件实现过滤功能
效果展示在表头中增加过滤项是很多产品经理特别钟意的交互，据说是可以提升打野怪的效率。如何配置过滤功能在GridManager中被归类于列配置项，所以该功能需要操作关建配置项columnData中的filter。columnData的使用在使用filter之前需要先对GridManager的核心配置项columnData有一定的了解。columnData用于定义表格列配置参数，为数组类型。每一个数组元素对应一个表格列， 通过该参数对表格列进行配置。基础使用方式示例，点击可在线进行调试:
2021-02-07 18:06:36
324
原创 表格组件实现打印功能
这是一个不是很常用的功能，但却是在不经意间提升用户体验。使用场景用户通过界面搜索出一组数据，仔细一看这组数据实在是太重要了，重要到需要向上汇报(拍马屁)。此时的用户可以选择: 抱着电脑 || 截图发送 || 发送链接和查询条件。但我们做为前端开发人员，是可以向用户提供另外一种选择: 将查询结果打印，以纸质的形式进行信息传递。有时候，实实在在拿在手里的东西更有感觉。无纸办公的情况就不反驳了，我们只是多出一种选择，而非必选。实现方式比如我们现在有这么一组很有价值的数据（敲黑板，这都是我努力码.
2020-10-13 09:42:53
153
原创 表格组件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
427
原创 移除react项目中prop-types代码
在React项目中，我们为了保证项目的健壮性所以引入了prop-types。但在生产环境，我们并不需要prop-types生成的代码。prop-types已经自动做了些什么?在项目中我们通常按下方示例来使用prop-types':import PropTypes from 'prop-types'TestClass.propTypes = { propName: PropTypes.string}在开发环境中，这些代码会帮我们校验prop的类型，这无疑是很有用的。在产品环境中我们并不需.
2020-06-04 11:20:44
438
原创 GridManager loading样式修改
在使用gridmanager表格组件时，如果想要改变loading样式该如何处理?gridmanager提供的loadingTemplate参数可以快速的解决这个问题。loadingTemplate参数的介绍:参数类型: String默认值: ‘’数据加载中模板，该配置可以自定义数据加载时使用的loading样式。使用该配置时，需要自行提供与模板相匹配的css样式。使用方式new GridManager({ gridManagerName: 'test', loading.
2020-06-02 17:09:44
282
原创 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
622
原创 单页应用SEO优化
之前做SEO优化的项目都是多页应用，从这个界面的某个链接打开一个新的页面，该页面的head或body中的友好信息即会自动被百度爬虫捕获，一切都是那么的顺。单页应用SEO不被百度收录当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录，谷歌虽然不收录以#为特性的锚点，但是收录以#!为特性的锚点，因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得，那么做为一个前端开发人员，我们该做些什么。当把一个单页应用的代码敲完，开心的看着快速的响应和无等待的数据刷新时，内心上对单页应用是很喜爱的。.
2020-05-25 10:01:08
1451
原创 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
898
原创 通过样式调整火狐滚动轴样式
表格组件gridmanager在发布完固定列功能后，有位使用者通过github提交了issues，反馈其在firefox中表格发现表头错位BUG。排查原因调试定位后，发现是由于组件中配置了如下代码:::-webkit-scrollbar { background: transparent; width: 10px; height: 10px;}然而firefox并不支持-webkit-scrollbar属性，因此在windows环境下Y轴滚动条宽度为17px。mac环境下的firef.
2020-05-15 16:07:34
320
原创 如何解决错综复杂的表格数据（GridManager随笔）
自从前后端分离的模式推广以后，前后端的开发人员就开始了针对于数据格式的相爱相杀。后端返回数据对我们前端来言，后端小哥的一些神返回实在难以理解。我们做个表格，所期望的后端返回数据格式是这样的:{ "list":[ { "name": "baukh", "age": "28", "info":...
2020-04-29 12:49:21
365
1
原创 GridManager--隐藏列功能
GridManager 表格管理组件， 对列的隐藏与显示的操作有两种方式。初始化时指定列为隐藏或显示状态。方式如下:<table></table>table.GM({ gridManagerName: 'test', ajax_data: 'http://www.lovejavascript.com/learnLinkManager/getLea...
2020-04-01 18:47:19
331
原创 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
303
原创 GridManager 用户偏好记忆
[GridManager][http://gridmanager.lovejavascript.com/] 会将用户的部分操作进行记忆，从而达到用户行为记忆的效果。为什么在GridManager中会存在用户偏好记忆在数据的时代，一份数据往往会由不同的角色共享。而这些角色所关注的数据项并不相同，有关注某些列，有的则会关注所有。对关注的列进行扩宽、靠前显示、隐藏掉与自身无关的列，或者针对自身...
2020-04-01 18:46:09
148
原创 解决linux rz传输失败
前不久，写了个很简单的exp登录脚本。今天想通过rz上传个文件，却怎么也传不上去。并不报错，命令执行后除了文件未上传，其它与上传成功时一样。做为一个前端开发，写段shell真是一步一个坑。原因及解决方式鼓捣良久后发现，原来是字符集问题。用.sh将.exp包裹，并在.sh文件中指定LC_CTYPE=en_US解决。简单的代码示例:test.sh#!/bin/shexpor...
2020-04-01 18:45:28
1324
原创 js捕获错误信息
这个不是很常用的功能， 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:收集JS语法、执行错误最初的是想直接获取控制台的错误信息； 然而这并不大可行，JS并没有这样的功能。转换下思路在错误发生时，将错误进行存储。原生JS实现方式:通过重载 window 对象下的 onerror 函数， 可以截取到这些信息。window.onerror = function(er...
2020-04-01 18:44:52
1191
原创 原生JS实现data方法
在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。这里将用原生的JS对data方法进行实现。使用setAttribute:<div id="test-data"></div><p class="test-data-list"></p><p clas...
2020-04-01 18:43:56
1441
原创 margin-top 外边距合并
这是一个早以前研究过的东西，今天java开发说起了这个，顺带记录一下。这里有一行代码，很简单的一段代码<style type="text/css">#div1{ background:#000; width:100px; height:100px; margin-top:10px;}#div2{ margin-top:20px; background:#f00...
2020-04-01 18:43:11
229
原创 前端国际化
前言从10年接触编程就开始接触国际化这个概念，然而这些年全面用到国际化的项目并不是很多，且都是些螺丝钉式的工作。15年末，部门项目需要推国际化，前端这块由我来主导。虽然难度不高，但还是拿出来分享下。选择方式:目前了解到的前端国际化有以下两种方式：1、按语言种类分别开发前端界面：这种方式貌似给人一种很low的感觉且觉着文件会无限多。然而在一般项目中语言种类并不会特别多，实现中英文两...
2020-04-01 18:42:22
1792
原创 GridManager 分页详解
GridManager 分页原理:首先， 注意了: GridManager 表格分页是需要 后端支撑 的.以下几个步骤实现分页:由前端发送包含分页信息的参数， 这是由 GridManager 自动实现的。 该参数包含以下信息{cPage: 当前页， pSize: 每页显示条数}后端解析请求， 并根据分页参数返回当前页的数据， 数据格式如下:{ "data":[ ...
2020-03-31 18:59:21
882
原创 撸了一个简易的工具库: jeasy
一年前，发现在工作的项目中存在大量使用monment的情况，但仅使用到最基础的format功能。monment的体积直接导致项目体积成倍增加，于是jeasy就诞生了。jeasy实现了monment最为常用的功能，并将GridManager中一些工具方法进行了抽离。安装npm install jeasy --save方法介绍Date 日期相关jeasy.moment() 日期函数...
2020-03-31 18:58:52
423
原创 div绑定键盘事件
在某一次给 GridManager 中的div元素绑定键盘事件(如keydown)时， 发现绑定是无效。排除一些问题点后，最终找到了解决方法。解决方法:给当前元素增加 tabindex 属性<div tabindex="-1"></div>原理:div等非输入性质的元素(与其对应的可输入性元素有input, textarea)， 是不可被聚焦的。 所以无法监听...
2020-03-31 18:58:20
1386
原创 coverage es6覆盖率解决方法
该文章整理于2017年，当时为解决在GridManager2.3.0版本中ES6替换时遇到的问题。原文如下替换之后发现，原先的测试覆盖率从72% 下降至 24%。通过 coverage html 在本地测试后发现， 覆盖目标文件使用的为 babel 转化之后的代码。解决方法由于GridManager 中使用的是webpack环境下的karma ， 所以下面的步骤将基于karma, ...
2020-03-31 18:57:51
480
原创 GridManager 调整数据格式
GridManager在处理数据时，需要使用规定的数据格式。而在实际场景中，或多或少存在一些格式差异。在这里将对这些差异的处理方式进行说明1、仅返回字段名不符一级数据中的 data 与 totals， 可以使用 dataKey 和 totalsKey 进行调整。后端返回数据为:{ "list":[ // GridManager 期望返回的是 data, 而这里返回了 lis...
2020-03-31 18:56:58
274
原创 2019年与表格同在
在2015年初，表格组件GridManager立项，不知不觉间已过去了1700多天。在2019年初定下的目标这些年来，表格项目一直不温不火，github的star总是滴滴哒哒的缓慢增长。反观那些与技术无关的star几天之内就10k+, 除了羡慕之外还有些许不平。革命尚未成功，同志还需努力。于是在2019年初启之际，为表格定下了star过千的目标。为了这个目标我做了这些事支持三大框...
2020-03-31 18:56:29
106
原创 你不知道的console
在代码执行不如意的情况下，最常用的就是使用debuger 和 console.log()。然而关于console，比想像的更强大。使用不同的方法来区分信息的不同console.log('日志');console.info('信息');console.error('错误');console.warn('警告');执行结果:通过占位符对信息进行编辑console.log('字...
2020-03-31 18:55:44
87
原创 mac iterm2支持rz sz
在2017年初，为mac处理了该问题。今天重新按之前的流程操作时，发现了很多问题。重新整理后，记录在这里。mac环境连接linux时支持rz sz的步骤一、安装iterm2mac自带的终端是实现不了的，所以需要下载iterm2. 下载地址二、安装 lrzszbrew install lrzsz执行该步骤时，需要保证你的机子上有装有 Homebrew。如果没有，请自行安装， 相关...
2020-03-31 18:55:09
1777
1
原创 表格组件GridManager的固定列详解
从2019年初时，就想添加固定列功能。但由于是源生编码而又需要支持框架的引用，调试来调试去，空留下一个fixed分支。受今年疫情的影响，周未有了大把的时间。于是把去年未完成的固定列功能进行了实现。如何使用由使用者配置的列配置起来相当简单，不需要单独去维护一个列，只需要在配置项中的columnData中增加fixed属性即可实现。fixed属性的默认值为undefined，共接收两个值...
2020-03-31 18:54:05
796
原创 原生js实现each方法
jquery里面有个each方法，将循环操作简化、便捷。随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？前些前写了个类库: ...
2020-03-27 18:41:24
1627
原创 表格导出功能实践
表格导出分为静态导出与动态导出。静态导出是将当前已经渲染的表格项导出为指定的格式，可为.xls或.cvs。这种导出无需后端支撑，完全由前端实现。动态导出是通过将参数传与后端接口，该接口负责生成Blob或物理文件，并在Blob或物理文件路径返回后，由前端进行导出。准备工作无论用哪种方式进行导出，前端都需要准备一下触发器。我们通常使用a标签的download标签来实现，十分简易。// ...
2020-03-27 18:40:18
143
原创 原生js实现offset方法
在为 jTool 提供 offset (获取当前节点位置）方法时， 先后使用了两种方式进行实现， 现整理出来以作记录。通过递归实现function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; ...
2020-03-26 09:43:51
566
原创 原生js实现trigger方法
事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？首先需要将事件绑定至指定DOM节点上// 在一个节点上绑定一个事件let test = document.createElement('div');test.id = 'test';test.innerHTML = '测试事件';docum...
2020-03-26 09:41:38
3211
GridManager_2.11.0.zip
2020-04-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人