导读：我个人认为做开发最幸福的事之一就是设计一套属于自己的控件，老早之前就想去做这样的事情，一直碍于事件的冲突和个人的想法，最终没有定论，最近难得抽出一些空隙，去完成这件事情。其实自定义控件并不是难事，很多人也都有这个实力去做，可能也是因为现在的开源控件太多的缘故吧，很多人都喜欢用第三方的，例如|: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 body
function CreateTableBody(id,data){}
///说明：
/// 创建table foot
function 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: '产品编号', 150, align: 'center', sortable: true },
{ field: 'ProductName', title: '产品名称', 150, align: 'center', sortable: true },
...
]
];
$("#aa").GridData({
id:"aa",
data:objList
});
我写的这里的使用还不算是很简洁，我接下来会在修改将列也封装到GridData中，这个很简单。也看个人喜好，其实我感觉这样也还行，分开就清晰一点，写在一起也紧凑些，看个人喜好了^_^
好了，限于篇幅，只能将设计思想写出来了，如果想要源码私Q我：296319075，或是留言，随意！同时也希望大家有什么好的想法，不吝赐教，谢谢！