在上一家单位做软件开发平台(2012年前的事了),一做就是近5年时间,在离开的最后一段时间,中心觉得应该做一个自己的jquery UI组件库,但是团队中没有NX的JS高人,要招一个合适的做过JS UI组件库的同学实在太难,似乎我的JS水平比他们略高一些,加上我比较好学,喜欢专研技术,不怕苦(自己夸一下自己-:)),因此这个重担就落在我的头上了。
由于之前对js、html、css掌握的不是很好,因此买了若干书,边看边练,做了不少练习和总结,然后开始组建团队并集中培训,在具体设计前,调研了EXT、Jquery UI、Dorado、YUI、easyUI,甚至包括SAP的Web Dynpro,最后决定基于jquery和jquery UI,在jquery UI上进行扩展,实现Grid、Tree等组件,这个项目从准备、需求到设计、实现最后形成可演示的Demo,总共花了半年时间。
我在上家公司虽然从一线开发做到team leader、开发经理,最终负责整个开发平台(20多人的规模),但是没有做过从一无所有到出成果的这么一个项目,从始至终,需求、设计、开发等等完全由自己控制,因此想做好的愿望尤为强烈(从那时开始养成做事情就想做好的习惯),有了愿望就累了,除了我规定的项目团队每周必须加3天班外,我自己在家周末也会加班。
这个项目,我搭好了框架,并自己实现了最复杂的表格组件Grid,最后形成了演示Demo后,由于公司合并等原因导致项目终止,后来我也离开了这个呆了近5年的公司,这已经过了2年时间了,经常还想起当初做的这个UI组件库,总想为它做点什么,今天实在是忍不住,就写一篇blog,表达一下心情吧,并把我的这个项目源码奉上,有想了解grid实现原理或者想自己开发Ui组件库的同学可以下来看看,或许对你有少许帮助,需要说明的是:
- 该项目是一个2年前被公司stop的项目,早已被公司抛弃,因此可以公开出来;
- 这个项目由于自己和团队的js水平有限,有些用法应该不是最佳实践,而且项目还有一些收尾工作需要做,没有达到产品级;
- 源码里面有些组件是直接使用的jquery UI的组件,各种原因,我直接把名字改成了项目名称,很无耻,但是没有办法;
- 如果使用chrome等对iframe访问本地文件有安全限制的浏览器查看demo时需要把项目部署到web容器中,通过浏览web项目的方式查看demo效果。
附上一些界面的截图:
1、演示demo主欢迎界面
2、html组件
3、树型组件
4、Grid组件
Grid组件的主要实现逻辑:
1、渲染前:
a、分析用户配置项options:主要是列定义columns属性;列数据data属性等
b、计算Grid界面的布局信息,比如:Grid的宽、高、布局div的top值等
c、准备模板
2、渲染:
a、传给jquery的jtemplates模板插件模板和模板数据(数据、布局信息等)在浏览器中渲染出Grid表格
3、渲染后:
a、对Grid渲染后的界面进行补充处理,比如:对Grid进行隔行换色、检查是否需要出现滚动条等
b、为Grid组件绑定事件处理器
Grid的渲染分两部分进行:非body部分(标题栏、列头、查询输入框等),body部分(展示数据的区域),非body部分在body部分之前渲染。
Grid组件部分截图如下:
最后附上源代码,由于iteye对附件大小有限制,因此删除了依赖的jar包,需要自己copy相应的jar文件到lib目录下才可以运行,依赖的jar:
相关推荐
移动端基于jquery,zepto的UI组件库,目前实现 JS Components:Toast、Action、Tips、Dialog、Swiper、CityPicker、DatetimePicker、Tab、Range Css Component:oneborder、Loading、button 等
基于JqueryUI的图片上传插件,支持多文件上传
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它方法。
Wijmo-Pro(基于jqueryUI提供了40+组件,强大的图标组件)
教程名称: 李炎恢JQuery EasyUI视频培训教程_EasyUI是基于jQuery的UI插件集合01.[jQuery EasyUI]第1章 jQuery EasyUI入门02.[jQuery EasyUI]第2章 使用EasyUI03.[jQuery EasyUI]第3章 Draggable(拖动)组件04....
jQuery ui基于myflow.js绘制流程图插件,自定义组织架构图图表,拖拽绘制组织架构图表代码,支持分支、节点状态工作流程图表样式代码
Knockout-UI, 在KnockoutJS上,一个基于富UI组件 用户界面是基于 Knockout 和 jQuery UI的UI组件的集合。这个项目的目标是集成一些有用的小部件,可以以由社区重用和扩展。我开始在 2010年月 中学习 Knockout,并...
jQuery ligerU 是基于jquery 扩展的一套UI组件,功能强大完善,运行快!
jQuery datepicker 日历组件 jQuery datepicker 日历组件
一套基于jquery或javascript的插件库 - 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...
LigerUI是基于jQuery的UI框架,包括表单、布局、表格等等常用UI控件,以扩展性、使用简单、丰富UI的设计原则进行开发。使用LigerUI可以快速轻松地创建风格统一的界面效果。
Armrack基于avalon的ui组件库当前进度:编写MD编辑器文档编写上传组件的文档已完成:tip系统提示组件modal弹出框组件MDEditor编辑器组件图片上传组件文件上传组件计划执行:日期选择组件css3基础动效库标签页组件...
我们介绍过的在线文本编辑器不是很多,功能最强大的要算...今天我们要分享一款基于jQuery的在线文本编辑器,同样它也是所见即所得的编辑器,该文本编辑器的特点是UI界面相当漂亮,而且编辑器的功能按钮可以自定义扩展。
Jquery+.net实现图像缩放截取(类似开心网) ...这个ui库完全兼容jquery的语法,也就是说隐式迭代、超级强大的selector等都可以无缝的使用,这比起dojo,ext等组件库使用起来要更为方便和轻量些。
是一个基于jQuery的UI组件库,在2011-2015年曾服务于jd.com内部多个PC及移动端系统中。组件目前已有的组件(点击查看示例或文档):原创组件RowRightColClearfixGesture(手势)DataGrid(数据表格)在线示例可以使用babel...
jqswfupload是一个基于jQuery UI+Swfupload实现的多文件上传组件。 SWFUpload是一个基于flash与javascript的客户端文件上传组件。你可以在文件选择对话框中通过ctrl/shift键一次性选择多个上传文件。jQuery UI 是以...
Jquery Portal布局组件,可以进行拖拽、关闭、展开、收缩等操作,并可以自定义比例,按比例进行布局。是在基于别人基础上做了一些修改,支持主流浏览器,并且支持IE8、IE9、IE10等。
唯一的例外是自定义CoreUI组件,它们在Bootstrap生态系统中不存在(模板组件,标注,开关)。 样式必须单独导入! 导入 CSS库(推荐)或库安装: npm install @coreui/coreui 样式用法: @import " ~@coreui/coreui...