Designsor

对于一个B/S架构的项目，最常遇到的一个组件可能就是表格了。对于表格的重用，经过大概2周的时间为公司写了个纯的javascript的渲染组件-jquery1.4.2版本下支持。需求是这么产生的：

公司写css和开发javascript特效或者一些其他杂七杂八与javascript的工作都是我负责，在去年中的工作中总结到太多时候每个页面扔进了过多的重复代码，有CSS，也包含一些HTML，大量的垃圾源代码。而由于基于本身项目的多变性，外观和功能越来越多次的被推翻重来，很明显工作量和以前不能同日而语。我觉得需要这么一个东西来解救大家，让大家把底层的东西一次性做好，后端输出直接是清晰的json字符串，前端接收后直接转换成可定制多扩展易部署的通用视图。不仅良好的约定了前端开发人员与后台程序员的对接接口，也解决了大量重复劳动的过程，而仅仅需要维护一个库文件和部署的几行代码，方便实际。

那么好吧：面对的两个选择，一个是我们这的技术总监找到的这个Jquery插件-jqgrid，还有一个选择是自己开发一个类似的但是功能绝对不能比他这个差的！小爝选择了后者……。下面是一张Jqgrid的截图，通过图片来解释一些事情：

这个DEMO中我需要到的功能都是什么呢，支持json方式取数据，支持页面array组成数据，支持表格的样式可定制，支持表格的基本附加功能如：分页，跳转，搜索，上下页，各行换色的支持，特殊行样式支持，排序支持，点击后的表格样式，复选框的机制，表格内部链接的支持与互相数据之间的通信。

基本需求如上，看过他的部署代码，思路开始清晰，但是从头开始写这么一个东西还是有点心有余悸，毕竟也是第一次。在确定了以上需求都没有攻克不了的技术难点的情况下，开始开发吧。2周后，一个580多行的jquery插件产出，（包括大量注释和回行），基本需求符合上面需要的jtable插件被开发出来了-支持浏览器包括IE系列和非IE系列！

那么看下我的jtable都支持什么需求功能吧。除了上面所列机制的特点，我为公司定制了一套，也是特别要求的。页面加载后先加载当前页面array数据产生表格，取消第一次ajax请求，减轻服务压力，已经实现，并包含3种数据加载模式，array，json，上面2种的柔和。扩展部分：分页机制仿google下面分页，7页码，左右轮换，当前页码智能定位。限定表格行数，把一些服务器端逻辑展现到前台JS脚本下自动处理，可一页面多处部署，最最重要的我留了个接口可从外部传入自定义函数来控制表格的初始化等等。（这点做的时候觉得没必要，可后来讨论却是最重要的一步扩展）-实现了插件的扩展和重写。来张图吧：

看吧，ajax后清空的表格容器里依然可以记录操作项耶。这个jqgrid不知道支持没支持~

由于插件这次写的太过复杂细节会分出要点发出来分享，但是制作一个插件的过程确实过瘾而且锻炼人。目前这个demo只是展示给同事和需求的，所以配置方法，部署方法，接口等还不适合公司项目之外的使用，但是确实可以应用，我想等最后成熟了会发布chm出来的，也希望这个插件可以i解救一些被重复大量table困扰的开发小组。

后期可能还会再加其他扩展，比如内部我们讨论搜索到底需要不需要再另外留出个接口，实现可定制和分拆加载。昨天看了些YUI的loader（），觉得特性最好最强大，实现机制也不是非常复杂，有可能会借鉴一下，我越来越有想自己开发一套自己的js UI组件的梦想了，无论是以后基于自己的工具库还是jquery的……嘿。

最后DEMO地址：http://www.designsor.com/demo/jtable/

源文件代码等可自行FF下查看源代码。注释还算凑合主要我怕自己晕多写了些~（样式是自己做的嘞，不好看可自定制~~~哈）