首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AgGrid框架的使用感受及前景分析

CompetenceX:我开发的第一个网站 大三在博世西门子实习期间,我为公司开发了人生中第一个像模像样的H5网站:CompetenceX(能力矩阵管理系统,以下简称能力矩阵或C9X)。...网站本身没有太多技术含量,基于aggrid和mongodb外加一个简单的数学模型,但是却成为我在web开发领域中的启蒙项目,为我之后的求职道路上提供了不少燃料。...能力矩阵是一个用来评估员工竞争力和职业技能的一个平台,和所有需求方一样,我的老板当时就给出了这个很模糊的需求。...Ag-Grid:媲美Excel的web框架 完美的集合关系模型如何在前端展现呢,最好的办法呢就是画一个表格,经过1个多月的框架抉择,我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。...设计focus对象 focus对象是我常用的一种自定义对象,通常挂载在window.app上,但在aggrid这个重量级框架面前,也可以挂载在ag-grid>ag-grid>元素上面。

6K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    我是如何爱上ag-grid框架的

    与每个管理系统一样,我们需要选择一个网格来显示我们的数据,而我的前任已经在应用程序中使用了两个网格 -  ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。...我查看了AngularJS 1.x的多个网格项目,没有像ag-Grid那样活跃,当我随便链接链接时,我登陆了ag-Grid示例页面。我的前任做错了!...我及时检查了源代码,发现ag-Grid有一个column定义字段,其中包含我真正需要的所有内容。这伴随着排序,过滤,固定和最重要的 - 分组,聚合以及拥有所需数量的行的能力。...我是一个非常自豪的开发人员,所以很难接受我错了,但是当我最终接受它时,由于ag-Grid,我的生活变得如此简单。 旅程 我只是无法停止使用它。我用这个网格做了很多事情。...后来,我添加了自己的数据虚拟化(在ag-Grid上重构之前)并且享受了网格API提供的一些很酷的东西。完成后,CRM的开发很快。

    6.2K40

    【学习】教你用R的Inkscape制作数据图表

    从我使用R开始,就一直用R来制作图表,只有一个理由:R在过滤和数据可视化方面是一个相当了不起的工具。特别是如果我们使用优秀的ggplot2库,我们可以将原始数据在几分钟内拥有一个引人注目的可视化效果。...但是,如果我们想给我们的视觉效果一个额外的震撼呢?如果我们想要做一些手工的修饰呢?我曾长期抵制这些,因为我认为数据传递的主要目的是让观众用自己合适的方式去解析。...在Inkscape 里,涉及到像移动和删除东西的组视为一个单一的对象,而我们想要删除的灰色背景。使用选择工具选择的灰色框,然后点击鼠标右键,点击“取消组合”。...我们从这里开始,按照Inkscape中的指示操作。按照指示后需要重新启动Inkscape。 现在我们可以用文本工具(F8)在圆周围添加文本框。文本框可以通过选择工具移动。...一旦添加标题,你可能会注意到的,我们占据了整个画面。这主要是由于全都由白框包围起来。 让我们将其移动到背景层以此摆脱白色方块。使用选择工具点击在白色圆圈周围的任何地方。

    2K70

    vw, vh视窗宽高单位的使用

    还是显示器的宽度大小(screen.width)?我疑惑了! 每当我疑惑的时候,我不是去找个“我觉得应该是”的解释,而是,新建个HTML页面,像学生时代做生物实验般,多条件对比验证之。 ?...因此,我没事的时候,脑子里就要盘算,该单位可用在何处呢?如果跟其他CSS3的属性配合使用呢?...我们应该都做过或见过这样的交互:点击下图,弹框查看原始大图;或者一屏内(不能有滚动条)大图幻灯片浏览。...在制作高宽限制demo的时候,我还觉得,应该是可以的。...七、场景之:Office Word效果 我们可以把web页面做得像Office文档那样,一屏正好一页;拖动滚动条,我们可以一直往下看到最后一页。 如果只借助CSS,这种效果绝对定位是实现不了的。

    2.5K10

    原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

    双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!...②、能够区分用户是否在博客留过言,从而给出不同的欢迎提示; ? ? ③、当有人复制博客任何内容时,将弹出友好的版权保留提醒; IE 内核: ? WEBKIT 内核: ?...修复在部分主题下滚动条不显示文字或错乱问题; 修复底部滚动文字在宽度变窄时会消失的问题; 修改为当宽度小于 480px 底部滚动条自动隐藏; 新增宽度小于 720px 时,不会自动弹出欢迎框;  新增...针对纯代码版(WordPress 插件版已自带底部手动呼出功能): ②、如果想和张戈博客一样,在右下角增加一个手动呼出对话框的功能,你可以如下操作: i....="deleteCookie('welcome');welcome();" title="呼出欢迎对话框"> 文字的就不说了,这都搞不定,那还能说什么呢?

    3.7K120

    再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetXTop,clentX

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)...,会随窗口的显示大小改变     obj.clientHeight = (height + padding)  //元素的高     clientTop、clientLeft 这两个返回的是元素周围边框的厚度...因为滚动条不会出现在顶部或者左侧 offset 指偏移,包括这个元素在文档中占用的所有显示宽度。比client 多了border。     ...+height+padding-bottom //元素的高度     offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的父级元素中最近的(在包含层次中最靠近的)...    obj.offsetTop  //元素相对于父元素的top 如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置

    1.5K20

    中枪了没有!聊聊移动应用界面设计7宗罪

    如果一个移动应用体积很大,占用了过多的容量却并未提供等同的价值会怎么样?后会有期,用户肯定拿你开刀。记得保持应用在体积上足够轻量,这样至少用户不会轻易把你删掉。...2、在应用启动时及要求允许权限控制(推送、地理位置、摄像头等) 回想下,有多少次我们兴冲冲的下载一个应用并准备开始使用时,一个对话框立马跳出来扫了兴?...我不关心这个对话框描述什么内容,只想马上关掉它并继续使用应用功能。它是啥?好吧,菜鸟应用! 3、下载后在使用前就要求登录、注册甚至收费 实际上,这条或许应该排为第一禁忌,很难让人忍受。...你能对用户所做最糟糕的事情就是:在他们下载你的应用后告诉他们必须付费才能使用。烂,烂,烂,重要的事情说三遍,赶紧删之。 4、设计的移动应用界面看起来像网页 如果这样,还需要移动应用干嘛呢?...2、无休止的引导 如果使用自己的手机,我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。 3、触控热区尺寸不对 请停止把按钮和输入框做的太小,这不是网页。

    89460

    「译」前端项目中常见的 CSS 问题

    添加 flex-wrap 要想让一个元素表现得像弹性容器那样,只需添加 display: flex。但是,如果没有添加 flex-wrap ,那么当屏幕尺寸缩小的时候,将会出现水平滚动条。...Sara Soueidan 写了一篇不错的文章讨论过这个问题。 8. 当视窗高度不足时将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部,会发生什么事呢?...分配一个标签元素给一个输入框时,添加 for="ID" 使用表单元素时,确保所有的 label 元素都分配到了一个 ID。这将提高它们的可访问性,点击的时候,相关的输入框将获得焦点。...p { direction: ltr; } image.png (大图预览) 结论 这里提到的所有问题都是我在前端开发工作中最常遇到的。我的目标是在开发 web 项目时定期检查这份清单。...你在 CSS 中有没有经常遇到什么问题呢?欢迎在评论区分享!

    2.2K10

    JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

    总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。...以上的4个属性是成对出现的,因此下面介绍中也成对的介绍,在实例中为了减少代码量,我直接用的id,实际开发中不推荐。...2.2 实例 在页面中,溢出说得更加通俗一些就是有没有滚动条出现,出现了,说明子元素有一部分被父元素遮挡了,就溢出了,下面给出两个实例,一个没有溢出(没有滚动条),一个溢出了,分别观察他们的scrollWidth...console.log(children_div.scrollWidth, children_div.scrollHeight) 打印结果为: 100 120 也就是我给出的...element.scrollTop :返回元素上边缘与视图之间的距离。 我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息,微信消息也是这样的呀!

    3.7K40

    黑客故事:如何逼小偷把 iPhone 还回来的

    对面一个温柔的男声:你好,我捡到你的手机了,但之前没电了,刚充上电开机,约个地方把手机给你吧……若干剧情后,你收获了手机和一枚男盆友。...2.扒掉团伙的面纱以及……底裤### 朋友后知后觉,但将此事告知了carry_your。 作为一个白帽子,赌上荣誉和尊严,都要抢回这部被偷走还被刷机的手机!不过,应该怎么做?...于是果断选用了最常见的 XSS 攻击。 carry_your说:“在钓鱼网站在输入密码以后,钓鱼网站让我输入密保信息,我在答案输入框中输入了 XSS 代码,然后就成功提交了。”...carry_your明白骗子这样做的目的:骗子在预防有警察蹲点…… 手机拿回来了,0点,carry_your向朋友传达了这一喜讯。 此事已经告一段落。但是,还有多少手机在骗子手中?...没关系,要么成为白帽子,要么有一个贴心的白帽子的朋友就好,或者,干脆谨慎小心,不要丢手机好了,然而,你又会少一个借口买iPhone 7了!

    1K30

    浅议内滚动布局 - 腾讯ISUX

    所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: 传统的页面滚动,基本上是相对于整个浏览器窗体,例如,QQ视频首页...以前我们的滚动条是跟浏览器上边缘是靠在一起的,但是,自从变成了内滚动,滚动条是跟网站公用头部下边缘排排站,这会造成什么问题呢?就是一些offset的计算要发生一些变化。...无法滚动的弹出层 基本上,是个像样的web2.0网站都会有弹框web组件,一个黑色半透明的overlay层,上面摇曳着弹框面板,例如这样的: 对于黑色半透明覆盖层,传统实现是这样的:如果要兼容IE6浏览器...但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?...我们新版企业账户中心就遇到这个问题,我是这么解决的——overlay和dialog合体。 合体与滚动 合体是什么意思呢?

    1.4K30

    Visual Studio 2008 每日提示(四)

    评论:原文是使用Ctrl+W,我在vs2008 sp1 发现只有Ctrl+Shift+W才可以 #033、 把代码拖拽到新的位置 原文地址:http://blogs.msdn.com/saraford/...这样,大纲的标记没有了,但文档仍然可以按大纲的方式显示。 评论:我觉得这个功能有些多余,既然选择了大纲方式,为什么要把大纲的标记去掉呢?...这是在”窗口“对话框(调用菜单:窗口+窗口. . .)中,选中两个或两个以上的文档,”水平平铺和垂直平铺的按钮“就可用了。 评论:很少用多文档的方式来浏览,作者这个tip有些不是很实用?...虽然看不见滚动条,但你仍然可以滚动操作。 评论:这个功能让人费解,为啥要隐藏呢,也许有人不喜欢鼠标,要那个拖动的滚动条也没用不如隐藏。...另外,你可以通过双击行、列、字符区域可以弹出”转到行“的对话框(当然也可以用快捷键”Ctrl+G“) 评论:我倒是觉得没有”Ctrl+G“调用对话框来的方便

    1K50

    浅议内滚动布局

    所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: ?...以前我们的滚动条是跟浏览器上边缘是靠在一起的,但是,自从变成了内滚动,滚动条是跟网站公用头部下边缘排排站,这会造成什么问题呢?就是一些offset的计算要发生一些变化。...无法滚动的弹出层 基本上,是个像样的web2.0网站都会有弹框web组件,一个黑色半透明的overlay层,上面摇曳着弹框面板,例如这样的: ?...但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?...我们新版企业账户中心就遇到这个问题,我是这么解决的——overlay和dialog合体。 合体与滚动 合体是什么意思呢?

    2.5K50

    Figma这些交互细节,B端设计也值得借鉴

    目录: 隐藏不常用功能 文本框自动全选 隐形滑动条 双击改名 自动整理常用色 画布滚动条 圆角设置 1....另外,Figma 的模块就算展开了占位也比较少,因为模块里的高级功能还可以再折叠一下: 6.jpg 对于一款功能众多的工具类产品,不同功能之间的使用概率相差很大,我个人是支持这样多级隐藏的。...Sketch 干脆去掉了画布的滚动条,虽然看起来是简洁了,但我有时候会不小心滑到一个偏离很远的地方,然后就不知道怎么回去了。...这时我只好画一个图形,从位置数据判断目前所在位置,然后不停地拖动画布,直至找回原来的位置…… 而 Figma 则不会有这个问题,因为它的画布有滚动条,不论我不小心到哪里去了,都可以通过滑动条轻易找回去!...而 Figma 在圆角设置附近有一个看起来像四个角的图标,一眼就知道怎么用。 14.jpg 当然,用熟练之后,可能会发现 Sketch 可以一次输入多个角的数据可能还更方便一些。

    1.2K30

    移动端开发小技巧

    百分比的优势在于,同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子,像这种: 红色框那里,假设现在的要求是一行4个板块,适应任何屏幕。...就是像这样比例明显,板块区分度高的情况适合用百分比来布局。...还有一个就是,如果你用谷歌调试的时候,会发现,效果是这样的: 对,就是会出现一个明显的滚动条。但是如果你用真机,也就是用移动设备看的时候,你会发现其实滚动条是不会出现的。...并且,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢,简单来说就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。...你只要一谈起,就会想念起每一个人来,我只知道我很想念我所谈到的每一个人。

    79830

    白哥的快乐星球

    白哥:一开始我周围很多朋友不是太能理解,为什么盲盒潮玩这些会这么火,我当时跟他们有聊:走进潮玩的世界,你会发现,它并不是在售卖一个简单的树脂或塑胶玩具,而是形成了一个庞大的生态圈。...正是因为潮玩没有具体的故事背景设定,人们不需要有预先的知识储备,只需要考虑自己是不是喜欢这个形象,这样就降低了认知与购买的门槛,设计师就可以在某个IP形象的基础上进行无限的想象与延伸,而粉丝们也可以在娃娃身上赋予自己的故事...对此我觉得,“今天我们看到的并不是最终形态,也许几年之后,这样的产品不再以盲盒的形态出现,而以另外一种产品形态或者文化载体存在。但这个市场会一直都在。...大众所需要的、青年需要的情感属性上的满足,只会越来越深化,越来越广泛,越来越强烈,它不会被淹没。” 我认为,这些看起来不像刚需类的东西,其实是一个很巨大的需求,一直都有,就是形式不一样。...SML (图片来自网络) 小编:那白哥觉得潮玩未来会怎么发展呢? 白哥:潮玩未来的趋势,一定是越做越精致,品牌公司在企划阶段有创意能力的同时,制作阶段也要融入更多匠心精神。

    44520
    领券