jQuery 插件开发——GridData（表格）

　　导读：我个人认为做开发最幸福的事之一就是设计一套属于自己的控件，老早之前就想去做这样的事情，一直碍于事件的冲突和个人的想法，最终没有定论，最近难得抽出一些空隙，去完成这件事情。其实自定义控件并不是难事，很多人也都有这个实力去做，可能也是因为现在的开源控件太多的缘故吧，很多人都喜欢用第三方的，例如|: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: '产品编号', width:150, align: 'center', sortable: true },
          { field: 'ProductName', title: '产品名称', width: 150, align: 'center', sortable: true },
          ...
     ]
 ];

$("#aa").GridData({
     id:"aa",
     data:objList
});

　　我写的这里的使用还不算是很简洁，我接下来会在修改将列也封装到GridData中，这个很简单。也看个人喜好，其实我感觉这样也还行，分开就清晰一点，写在一起也紧凑些，看个人喜好了^_^

　　好了，限于篇幅，只能将设计思想写出来了，如果想要源码私Q我：296319075，或是留言，随意！同时也希望大家有什么好的想法，不吝赐教，谢谢！