导读:我个人认为做开发最幸福的事之一就是设计一套属于自己的控件,老早之前就想去做这样的事情,一直碍于事件的冲突和个人的想法,最终没有定论,最近难得抽出一些空隙,去完成这件事情。其实自定义控件并不是难事,很多人也都有这个实力去做,可能也是因为现在的开源控件太多的缘故吧,很多人都喜欢用第三方的,例如|: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,或是留言,随意!同时也希望大家有什么好的想法,不吝赐教,谢谢!