导读：我个人认为做开发最幸福的事之一就是设计一套属于自己的控件，老早之前就想去做这样的事情，一直碍于事件的冲突和个人的想法，最终没有定论，最近难得抽出一些空隙，去完成这件事情。其实自定义控件并不是难事，很多人也都有这个实力去做，可能也是因为现在的开源控件太多的缘故吧，很多人都喜欢用第三方的，例如|:jquery ui，easy ui等等一些开源控件。但是又有多少去了解这些控件的具体实现呢？大部分的程序猿只是一味的去使用，为了好看而使用，为了方便而使用，使用人家的规则。大家不要误会，我写这些不是为了鄙视那些使用这些控件的人（我也一直在使用），我只是想说明，我们不用临渊羡鱼，我们自己也可以按照需求自己去设计一套属于自己的控件。今天我只是想将自己设计过程中的一些思想说下，希望对一些想自己去扩展控件的人有一点微薄的帮助，同时也算是对自己这几天想法的一个回馈吧。
扯淡就先扯到这里，下面看具体的实现过程。
使用jquery控件去设计一套自己的控件，首先要连接扩展方法。即jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend();jQuery.extend();如果不了解的可看下这边博客（http://www.cnblogs.com/newsouls/archive/2011/10/27/2226849.html），简单易懂。当然有很多文章写这两个扩展方法的，按自己的理解去看。
这篇文章我写的是Table控件，起名为GridData,当然名字你可以按自己的喜好，随意取，只要自己喜欢就好。当然建议有点规范^_^，你懂的。
我首先设计这个GridData控件的思想就是：只要在页面上定义个table 标签，加个id，即可，其他都由jquery实现扩展。
其实比较好的设计规范是在table中加<thead></thead>,<tbody></tbody>,<tfoot></tfoot>来将table分成三部分。这三部分作用我就不去细说了，因为懂html语言的人都知道。我在table中自定义了一个属性datagrid，因为我不想所有都操作ID，并且定义这个属性，以后可以根据需求的改变去扩展（自定义属性，想必大家都很熟悉了）。
自定控件，主要任务在于自定义控件的属性，样式和注册事件（这里的注册事件是为了写分页的）。我是通过这样的一个结构去实现这个控件的：
第一步、扩展一些自定属性（作用是可以自己设置一些常用的样式，这部分我建议要，当然如果你不喜欢也可以去掉）
$.extend({
///说明： /// 选择皮肤（设计不同需求的样式） pSkin: { skin1: function () { }, skin2: function () { } }, ///说明： /// 分页详细信息 pPage: { PageCount: 10, //总页数 PageSize: 10, //每页显示个数 CurrentPage: 1 //当前页 }, ///说明： /// 每一行自定义属性trId的值 pTrIdCollection: { tr: [ //格式 //{ // tr_No: 0, // tr_Key: 0, // tr_Value: "ess" //} ] }, ///说明： /// 设置table头部的字体颜色 pTHeadColor: { }, ///说明： /// 设置table头部的背景颜色 pTHeadBgColor: { }, ...}); 第二步、使用上面的自定属性和样式（这部分定义的是table 属性、样式 定义，按照具体的需求去定义和扩展）
///作用：/// table 属性、样式 定义$.extend({ GridData: { TWidth: 700, THeadColor: $.pTHeadColor.Default, THeadBgColor: $.pTHeadBgColor.Default, THeadBgImgUrl: "", THeadHeight: 30, THeadStyle:"", TTHeadCols:null, ... }});
第三步、具体实现创建表格（包括创建Table、分页、多选行功能，给列添加样式（这个功能还是比较新的，其他的好像很少有哦，只要我没注意^_^）等）///参数说明：/// id: table 的 id/// data:数据源，用于放到tbody中的数据(function ($) { $.fn.GridData = function (para) { //参数定义 var id; var data; //解析参数 if (typeof (para.id) == "undefined") { return; } if (typeof (para.data) == "undefined") { return; } id = para.id; data = para.data; //初始化 TInitialize(id, footId); //创建table head CreateTableHead(id); //创建table body CreateTableBody(id, data); //选择是否分页 if ($.GridData.TBoolPage) { CreateTableFoot(footId); } //设置属性和样式 SetTableAttribute(id, footId); //选择是否显示多选按钮 if ($.GridData.TBoolCheckbox) { AddCheckbox(id); } //注册事件 RegisterEvent(id); };})(jQuery); 第四步：具体方法实现（为了使代码简洁，我建议将一些方法封装起来，不要都一股脑写在一起，这样会使代码结构不清晰，自己看的吃力，别人当然就更不用说了，这样还有利于改错和扩展）
///作用：/// 注册事件function RegisterEvent(id){}
///说明：/// 初始化，每次加载数据前必须先function TInitialize(id, footId){}
///说明：/// 创建头部function CreateTableHead(id){}
///说明：/// 创建table bodyfunction CreateTableBody(id,data){}
///说明：/// 创建table footfunction CreateTableFoot(footId){}
///说明：/// 添加多选框function AddCheckbox(id){}
///说明：/// 设置属性、样式function SetTableAttribute(id,footId){}
/// 说明:/// 跳转到首页function FirstPage(){}
/// 说明:/// 跳转到上一页function LastPage(){}
/// 说明:/// 跳转到下一页function NextPage(){}
/// 说明:/// 跳转到末页function FinalPage(){}
/// 说明:/// 跳转到跳到某一页function JumpPage(pageNumber){}
第五步：当然是使用了啊：我现在的使用方式如下
//设置列
$.GridData.THeadCols = [ [ { field: 'ID', title: '产品编号', width:150, align: 'center', sortable: true }, { field: 'ProductName', title: '产品名称', width: 150, align: 'center', sortable: true }, ... ] ];
$("#aa").GridData({ id:"aa", data:objList});
我写的这里的使用还不算是很简洁，我接下来会在修改将列也封装到GridData中，这个很简单。也看个人喜好，其实我感觉这样也还行，分开就清晰一点，写在一起也紧凑些，看个人喜好了^_^
好了，限于篇幅，只能将设计思想写出来了，如果想要源码私Q我：296319075，或是留言，随意！同时也希望大家有什么好的想法，不吝赐教，谢谢！
转载于:https://www.cnblogs.com/mzws/p/griddata.html
相关资源：JAVA上百实例源码以及开源项目