自己实现的基于jquery的UI组件库

  在上一家单位做软件开发平台（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组件库的同学可以下来看看，或许对你有少许帮助，需要说明的是：

1. 该项目是一个2年前被公司stop的项目，早已被公司抛弃，因此可以公开出来；
2. 这个项目由于自己和团队的js水平有限，有些用法应该不是最佳实践，而且项目还有一些收尾工作需要做，没有达到产品级；
3. 源码里面有些组件是直接使用的jquery UI的组件，各种原因，我直接把名字改成了项目名称，很无耻，但是没有办法；
4. 如果使用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：

 

评论

2 楼 billjoincheer 2014-01-20  

赞

1 楼 liyonghui160com 2013-12-18