jQuery 插件开发——GridData（表格）第二版
开发背景
表格插件之前我也写个一篇，当时写那个插件的时候，我自己还没有总结出写插件的方法，虽然功能实现了，但是使用起来还是有点别扭的，并且需要在调用写添加特定名称的方法，这个地方着实违背了开发插件的易用性。所以，我今天决定重构之前的代码，按照现有的开发插件框架进行一次大修整。这也类似于软件开发过程中的代码重构阶段吧，把一些不合理的代码、思想、逻辑等及时修改掉。
其实代码重构在软件开发过程中特别重要。开发过程中，可能会由于开发时间的限制等因素，为了及时完成任务，不得已写一些没有经过斟酌的代码，我们不能对已经写的代码置之不理，要在闲下来的事件将这些代码重构下，这样使自己的代码冗余减少，质量也提高很多。并且逻辑会更加清晰等等好处。这里就不一一说了。太乱的代码，时间久了，可能连自己都不想看了，也许也是看不懂了。很多程序猿都没有重构代码的习惯，以完成任务为目的，同时也担心修改错了等，以各种理由说服自己不去QA自己的代码。在这里，我还是那句话，作为想成为“攻城狮”的“猿们”，请对自己负责，对自己的代码负责。我不是牛人，但是我有一颗必须成为牛人的心。和我一样，奋斗在“一线”的猿们，努力吧，自勉吧。
背景交代完毕，其实那个多也就汇成一句话，请不定时去QA自己代码。以下就是我对上次GridData代码的重构吧。当然，思想也改变了。
记得之前写了很多自定义属性，当然这次也有，但是，就不放在代码层次的最外层了，为了代码结构的整齐，就将其放在插件开发的里面了。这次我还是重头开始说起吧。说实话，本插件的参数很多都是仿照easy ui 中的GridData。为啥要仿照呢，其实我本人是不建议使用easy ui的，虽然功能强大，但是功能太死，二次开发时间成本比较高。因为他们开发团队将很多东西都分装的太死。其实也不能怪别人。人家辛辛苦苦开发的东西，当然不想被别人那个轻易就拿走喽。理解万岁！当然也不是完全不能二次开发，你得去理解人家的规范，那样就是可以了。之前我有对其中的Tree控件、TreeGrid控件等做了二次开发。目的当然是为了适应工作需要了。^_^
所以呢，很多大公司都会有自己的一套插件库的。这样便于维护、扩展。这个好处就不用我多说了，大家都懂的。好了，回归正题，不然又扯远了。
哦，对了，上一篇博文中漏了公共Js代码了，不好意思。。。。这边等会我将补上。
先说下本插件的功能吧：1、支持分页；2、支持多种皮肤选择；3、支持对列设置样式。4、其他正常的表格功能（不多说了）。
开发过程
本次开发过程中分五个部分：
第一部分：公共js和公共css样式部分；
第二部分：自定义特性（如：皮肤风格选择等）部分；
第三部分：具体定义及实现部分；
第四部分：对外开放部分；
第五部分：具体使用部分；
接下来我将对开发过程中的五个部分进行具体说明。
详细开发设计
第一部分：公共js和公共css样式开发，这里涉及克隆对象（cloneObject）、创建委托（delegate）、获取参数（getParam）、判断元素是否存在某个属性（boolHasAttr）、字符串是否为空（IsNull）等。该部分可以以后继续添加公共代码，具体代码实现如下：
$(function () {
/// 创建委托函数
/// context：函数上下文
/// params：参数【必须是数组形式】,可以为空
Function.prototype.delegate = function (context, params) {
var func = this;
return function () {
if (params == null) {
return func.apply(context);
}
return func.apply(context, params);
};
};
$.extend({
coverObject: function (obj1, obj2) {
var o = this.cloneObject(obj1, false);
var name;
for (name in obj2) {
if (obj2.hasOwnProperty(name)) {
o[name] = obj2[name];
}
}
return o;
},
cloneObject: function (obj, deep) {
if (obj === null) {
return null;
}
var con = new obj.constructor();
var name;
for (name in obj) {
if (!deep) {
con[name] = obj[name];
} else {
if (typeof (obj[name]) == "object") {
con[name] = $.cloneObject(obj[name], deep);
} else {
con[name] = obj[name];
}
}
}
return con;
},
///说明：
/// 创建委托
delegate: function (func, context, params) {
if ($.isFunction(func)) {
return func.delegate(context, params);
} else {
return $.noop;
}
},
getParam: function (param) {
if (typeof (param) == "undefined") {
return "";
} else {
return param;
}
},
///说明：
/// 判断元素是否存在某个属性
boolHasAttr: function (id, attr) {
if (typeof ($("#" + id).attr(attr)) != "undefined") {
return false;
}
return true;
},
IsNull: function (str) {
if ($.trim(str) == "" || isNaN(str)) {
return true;
}
return false;
}
});
});
公共js代码
.gridData_tableFoot{
width: auto;height:24px;margin: 0px auto;line-height: 24px;
}
.gridData_tableFoot div{
width: auto;height :100%;margin-left: 5px;cursor: pointer;float: left
}
.tableBodyCur {
cursor: pointer
}
.lieStyle{
color: #205ed7 ;
border-color:#D4DBE1
}
thead td,tbody td{
border: 1px solid #D4DBE1;/*这个是解决兼容IE浏览器的属性*/
}
.tableDataGridFoot {
border-collapse:collapse;
}
.theadStyle {
background-repeat: repeat-x ;
}
公共css样式
第二部分：自定义特性部分，该部分可以根据以后需求进行扩展。现在本部分只有皮肤风格枚举（enumSkin）、表格头部数据参数枚举（enumTHeadDataParamsType），具体代码实现如下：
$.extend({
enumDdataGrid: {
//表格头部数据参数 类型
enumTHeadDataParamsType: {
number: 1,
string: 2,
ip: 3
},
//皮肤风格
enumSkin: {
classic: 1, //经典
traditional: 2, //传统
gorgeous: 3 //绚丽
}
}
});
自定义特性
第三部分：具体定义及实现部分。这部分是逻辑分装的主体，同时也是最难的部分。由于太多太多，所以只说一下思想。本次开发的插件使用 委托 和 事件句柄，思想开发。这样写的确实现了元素和事件间的解耦。当然这个也是模仿面向对象思想中的开发了。这个思想我在导航菜单中也有使用，并且这个思想也是我力推的思想。希望还不理解的猿们，好好学习一下，当你会了之后，你会感谢委托和事件句柄的，因为他让你的代码逻辑清晰了，代码也解耦了。。。自己去感受吧。我在代码中都加了注释，想必大家看也很好理解。但是逻辑还是有点复杂的，如果有想详细了解的可以联系我，在最下面我会将自己的联系QQ附上。^_^
var dataGrid = function () {
//参数定义
this.defaultParams = {
//参数定义
id: "",
data: null,
url: null,
tWidth: 1000,
tHeadColor: "",
tHeadBgColor: "",
tHeadBgImgUrl: "",
tHeadHeight: 32,
tHeadStyle: "",
tHeadCols: null,
tHeadDataParams: { //表格头部数据参数
field: "",
title: "",
width: "",
align: "",
sortable: "",
type: ""
},
tBodyColor: "",
tBodyBgColor: "",
tBodyHeight: 35,
tBodyOddTrBgcolor: "", //基数行颜色
tBodyEvenTrBgcolor: "", //偶数行颜色
tBodyMouserOverBgcolor: "", //鼠标经过颜色
tBodyMouserOutBgcolor: "", //鼠标移出颜色
tBodyTrSelectedBgColor: "yellow", //被选中行颜色
tFootColor: "", //底部文字颜色
tFootBgColor: "", //底部背景
tFootPosition: "right", //底部对其方式
tBoolPage: true, //是否分页
tBoolCheckbox: true, //是否显示check box
pageCount: 10, //总页数
pageSize: 10, //每页显示个数
currentPage: 1, //当前页
trTdentity: null, //行标识
tEnumDataGridSkin: null, //选择皮肤风格
tBoolRowNumbers: true, //是否显示行号
tBodyTrDblclickCallBack: $.noop //双击行 的回到函数
};
this.options = {};
};
dataGrid.prototype = {
constructor: dataGrid,
init: function (params) {
this.options = $.coverObject(this.defaultParams, params);
this._init();
},
_init: function () {
//初始化皮肤
this.tInitializeSelectPSkin();
//初始化元素
this.tInitializeElement();
this.tInitializeGetData();
//创建table head
this.createTableHead();
//创建table body
this.createTableBody();
//选择是否分页
if (this.options.tBoolPage) {
this.createTableFoot();
}
//选择是否显示多选按钮
if (this.options.tBoolCheckbox) {
this.addCheckbox();
}
//是否显示行号
if (this.options.tBoolRowNumbers) {
this.addRowNumbers();
}
//设置属性和样式
this.setTableAttribute();
//注册事件
this._registerTableFootGoTo();
this._registerTableFootFirstPage();
this._registerTableFootLastPage();
this._registerTableFootUpPage();
this._registerTableFootNextPage();
this._registerTbodyTrMouseover();
this._registerTbodyTrMouseout();
this._registerTbodyTrDblclick();
this._registerTbodyTrCheckbox();
this._registerTbodyTrClick();
this._registerPageNumberKeyup();
this._registerPageNumberPaste();
this._registerPageNumberFocus();
this._registerCheckboxCheckAll();
},
///说明：
/// 初始化选择皮肤
tInitializeSelectPSkin: function () {
switch (this.options.tEnumDataGridSkin) {
case $.enumDdataGrid.enumSkin.classic:
this.options.tWidth = 1000;
this.options.tHeadColor = "black";
this.options.tHeadBgColor = "#e1e1e1";
this.options.tHeadHeight = 32;
this.options.tHeadBgImgUrl = "";
this.options.tHeadStyle = "theadStyle";
this.options.tBodyHeight = 35;
this.options.tBodyOddTrBgcolor = "white";
this.options.tBodyEvenTrBgcolor = "white";
this.options.tBodyMouserOverBgcolor = "silver";
this.options.tBodyTrSelectedBgColor = "yellow",
this.options.tColNumber = 2;
this.options.tColStyle = "lieStyle";
break;
case $.enumDdataGrid.enumSkin.traditional:
this.options.tWidth = 1000;
this.options.tHeadColor = "black";
this.options.tHeadHeight = 32;
this.options.tHeadBgImgUrl = "url(../Images/TableImg/tableHeadBg.jpg)";
this.options.tHeadStyle = "theadStyle";
this.options.tBodyHeight = 35;
this.options.tBodyOddTrBgcolor = "white";
this.options.tBodyEvenTrBgcolor = "#e1e1e1";
this.options.tBodyMouserOverBgcolor = "silver";
this.options.tBodyTrSelectedBgColor = "yellow",
this.options.tColNumber = 2;
this.options.tColStyle = "lieStyle";
break;
case $.enumDdataGrid.enumSkin.gorgeous:
this.options.tWidth = 1000;
this.options.tHeadColor = "black";
this.options.tHeadHeight = 32;
this.options.tHeadBgImgUrl = "url(../Images/TableImg/tableHeadBg.jpg)";
this.options.tHeadStyle = "theadStyle";
this.options.tBodyHeight = 35;
this.options.tBodyOddTrBgcolor = "pink";
this.options.tBodyEvenTrBgcolor = "#e1e1e1";
this.options.tBodyMouserOverBgcolor = "silver";
this.options.tBodyTrSelectedBgColor = "yellow",
this.options.tColNumber = 2;
this.options.tColStyle = "lieStyle";
break;
default:
break;
}
},
///说明：
/// 初始化元素
tInitializeElement: function () {
var id = this.options.id;
$("#" + id).attr({ "cellpadding": 1, "cellspacing": 0, "align": "center", "bordercolor": "#D4DBE1" });
$("#" + id).css("border-collapse", "collapse");
//添加区域
var headArea = "<thead gdThead=''></thead>";
var bodyArea = "<tbody gdTbody=''></tbody>";
var footArea = "<tfoot gdTfoot=''><tr><td></td></tr></tfoot>";
var area = headArea + bodyArea + footArea;
$("#" + id).html(area);
//设置自定义属性标识
$("#" + id).attr("datagrid", id);
$("table[datagrid $='" + id + "'] thead").attr("gdThead", id);
$("table[datagrid $='" + id + "'] tbody").attr("gdTbody", id);
$("table[datagrid $='" + id + "'] tfoot").attr("gdTfoot", id);
//判断是不是存在checkAll
if ($("input:checkbox[name='chk_All_" + id + "']").length > 0) {
$("table[datagrid $='" + id + "'] thead tr").find("td:first").remove();
}
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "']").empty();
},
///说明：
/// 获取数据源
tInitializeGetData: function () {
var optionsData = null;
var pageCount = 0;
var paramsData = {};
//对是否分页做处理，当不分页的时候，需要在后台做判断的。
if (this.options.tBoolPage) {
paramsData = { "pageSize": this.options.pageSize, "currentPage": this.options.currentPage };
}
$.ajax({
type: "POST",
url: this.options.url,
data: paramsData,
dataType: "json",
async: false,
success: function (result) {
optionsData = result.Data;
pageCount = result.PageCount;
}
});
if (optionsData == null || optionsData.length < 1) {
return;
}
this.options.data = optionsData;
this.options.pageCount = pageCount;
},
///说明：
/// 创建 table head
createTableHead: function () {
var id = this.options.id;
if (this.options.tHeadCols != null) {
var cols = this.options.tHeadCols;
var colsLen = cols.length;
if (colsLen > 0) {
var htmlHead = "";
htmlHead += "<tr>";
for (var i = 0; i < colsLen; i++) {
var col = cols[i];
var colLen = col.length;
if (colLen > 0) {
for (var j = 0; j < colLen; j++) {
this.options.tHeadDataParams = $.coverObject(this.options.tHeadDataParams, col[j]);
htmlHead += "<td width=" + this.options.tHeadDataParams.width + " align='" + this.options.tHeadDataParams.align + "'>";
htmlHead += this.options.tHeadDataParams.title;
htmlHead += "</td>";
}
}
}
htmlHead += "</tr>";
$("table[datagrid $='" + id + "'] thead[gdThead $='" + id + "']").html(htmlHead);
}
}
},
///说明：
/// 创建 table body
createTableBody: function () {
var options = this.options;
var id = options.id;
var data = options.data;
if ($("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "']").length <= 0) {
return;
}
var htmlBody = "";
var colLen = $("table[datagrid $='" + id + "'] thead tr td").length;
$.each(data, function (i, ob) {
htmlBody += "<tr trId='" + eval("ob." + options.trTdentity) + "' trRowNumber='" + (i + 1) + "' style='background-color:";
if ((i + 1) % 2 == 0) {
htmlBody += options.tBodyEvenTrBgcolor + "'>";
} else {
htmlBody += options.tBodyOddTrBgcolor + "' >";
}
var realityCount = 0;
$.each(ob, function (j, d) {
realityCount += 1;
htmlBody += " <td >" + d + "</td>";
});
//判断数据源中的数据列数是否 小于 table头部的列数
if (realityCount < colLen) {
var difference = colLen - realityCount;
for (var j = 0; j < difference; j++) {
htmlBody += " <td></td>";
}
}
htmlBody += "</tr>";
});
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "']").html(htmlBody);
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "'] tr").attr("height", options.tBodyHeight); //设置行高
},
///说明：
/// 创建 table foot
createTableFoot: function () {
var id = this.options.id;
if ($("table[datagrid $='" + id + "']").length <= 0) {
return;
}
var tableFootHtml = "";
tableFootHtml += "<div class='gridData_tableFoot' style='float:" + this.options.tFootPosition + "'>";
tableFootHtml += " <div id='tableFootGoTo_" + id + "'>转到</div>";
tableFootHtml += " <div><input id='txtPageNumber_" + id + "' value='" + this.options.currentPage + "' style='width: 30px;height:auto;'/></div>";
tableFootHtml += " <div id='tableFootFirstPage_" + id + "' >首页</div>";
tableFootHtml += " <div id='tableFootUpPage_" + id + "' >上一页</div>";
tableFootHtml += " <div id='tableFootNextPage_" + id + "' >下一页</div>";
tableFootHtml += " <div id='tableFootLastPage_" + id + "' >末页</div>";
tableFootHtml += " <div id='tableFootPageCount_" + id + "' style='cursor:default'>共" + this.options.pageCount + "页</div>";
tableFootHtml += "</div>";
$("table[datagrid $='" + id + "'] tfoot tr td").html(tableFootHtml);
$("#txtPageNumber_" + id).css("ime-mode", "disabled");//CSS设置输入法不可用
},
///说明：
/// 添加多选框
addCheckbox: function () {
var id = this.options.id;
$("table[datagrid $='" + id + "'] thead tr").find("td:first").each(function (i) {
$(this).before("<td align='center' width='30'><input type='checkbox' name='chk_All_" + id + "' value='checkbox'> </td>");
});
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "'] tr").find("td:first").each(function (i) {
$(this).before("<td align='center'><input type='checkbox' name='chk_" + i + "' chkNumber='" + (i + 1) + "' value='checkbox'> </td>");
});
},
///说明：
/// 添加行号
addRowNumbers: function () {
var id = this.options.id;
$("table[datagrid $='" + id + "'] thead tr").find("td:first").each(function (i) {
$(this).before("<td align='center' style='background-color:#bababa' width='30'> </td>");
});
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "'] tr").find("td:first").each(function (i) {
$(this).before("<td align='center' style='background-color:#bababa;'>" + (i + 1) + "</td>");
});
},
///说明：
/// 设置属性、样式
setTableAttribute: function () {
var id = this.options.id;
if ($("table[datagrid $='" + id + "']").length <= 0) {
return;
}
$("table[datagrid $='" + id + "']").attr("width", this.options.tWidth);
$("table[datagrid $='" + id + "'] thead").css("background", this.options.tHeadBgColor);
$("table[datagrid $='" + id + "'] thead").css("color", this.options.tHeadColor);
$("table[datagrid $='" + id + "'] thead").css("background-image", this.options.tHeadBgImgUrl);
$("table[datagrid $='" + id + "'] thead").css("height", this.options.tHeadHeight);
$("table[datagrid $='" + id + "'] thead").addClass(this.options.tHeadStyle);
$("table[datagrid $='" + id + "'] thead tr").css("height", this.options.tHeadHeight);
$("table[datagrid $='" + id + "'] tbody").css("background", this.options.tBodyBgColor);
$("table[datagrid $='" + id + "'] tbody").css("color", this.options.tBodyColor);
$("table[datagrid $='" + id + "'] tbody").addClass("tableBodyCur");
if ($("table[datagrid $='" + id + "']").length <= 0) {
return;
}
$("table[datagrid $='" + id + "']").attr("width", this.options.tWidth);
$("table[datagrid $='" + id + "'] tfoot").css("background", this.options.tFootBgColor);
$("table[datagrid $='" + id + "'] tfoot").css("color", this.options.tFootColor);
//设置列样式
if (this.options.tColStyle != "") {
var options = this.options;
var colLen = $("table[datagrid $='" + id + "'] thead tr td").length;
$("table[datagrid $='" + id + "'] tbody[gdTbody ='" + id + "']").find("td").each(function (i) {
if ((i + 1) % colLen == options.tColNumber) {
$(this).addClass(options.tColStyle); //给区间加上特定样式
}
});
}
var colLens = $("table[datagrid $='" + id + "'] thead tr td").length;
$("table[datagrid $='" + id + "'] tfoot tr td").attr("colspan", colLens);
},
/// 说明:
/// 跳转到首页
firstPage: function () {
var options = this.options;
options.currentPage = 1;
$("#txtPageNumber_" + options.id).val(options.currentPage);
this.jumpPage();
},
/// 说明:
/// 跳转到上一页
lastPage: function () {
var options = this.options;
if (options.currentPage === 1) {
alert("已经到第一页了！");
return;
}
options.currentPage = parseInt(options.currentPage) - 1;
$("#txtPageNumber_" + options.id).val(options.currentPage);
this.jumpPage();
},
/// 说明:
/// 跳转到下一页
nextPage: function () {
var options = this.options;
if (options.currentPage >= options.pageCount) {
alert("超出了最大页数！");
return;
}
options.currentPage = parseInt(options.currentPage) + 1;
$("#txtPageNumber_" + options.id).val(options.currentPage);
this.jumpPage();
},
/// 说明:
/// 跳转到末页
finalPage: function () {
var options = this.options;
options.currentPage = options.pageCount;
$("#txtPageNumber_" + options.id).val(options.currentPage);
this.jumpPage();
},
/// 说明:
/// 跳转到跳到某一页
jumpPage: function () {
var options;
if ($.getParam(arguments[0]) != "") {
options = arguments[0];//这里特殊，判断是不是从PageNumber Keyup过来的
} else {
options = this.options;
}
var id = options.id;
$("#" + id).gridData.init(options);
},
/******************************(注册事件 begin)******************************/
/// 说明:
/// Go To
_registerTableFootGoTo: function () {
var handleEvent = $.delegate(this._handleTableFootGoTo, this);
$("#tableFootGoTo_" + this.options.id).click(handleEvent);
},
/// 说明:
/// First Page
_registerTableFootFirstPage: function () {
var handleEvent = $.delegate(this._handleTableFootFirstPage, this);
$("#tableFootFirstPage_" + this.options.id).click(handleEvent);
},
/// 说明:
/// Last Page
_registerTableFootLastPage: function () {
var handleEvent = $.delegate(this._handleTableFootLastPage, this);
$("#tableFootLastPage_" + this.options.id).click(handleEvent);
},
/// 说明:
/// Up Page
_registerTableFootUpPage: function () {
var handleEvent = $.delegate(this._handleTableFootUpPage, this);
$("#tableFootUpPage_" + this.options.id).click(handleEvent);
},
/// 说明:
/// Next Page
_registerTableFootNextPage: function () {
var handleEvent = $.delegate(this._handleTableFootNextPage, this);
$("#tableFootNextPage_" + this.options.id).click(handleEvent);
},
/// 说明:
/// Tr Mouseover
_registerTbodyTrMouseover: function () {
var options = this.options;
$("table[datagrid $='" + this.options.id + "'] tbody tr").each(function () {
var handleEvent = $.delegate(dataGrid.prototype._handleTbodyTrMouseover, this, [{ options: options }]);
$(this).mouseover(handleEvent);
});
},
/// 说明:
/// Tr Mouseout
_registerTbodyTrMouseout: function () {
var options = this.options;
$("table[datagrid $='" + options.id + "'] tbody tr").each(function () {
var handleEvent = $.delegate(dataGrid.prototype._handleTbodyTrMouseout, this, [{ options: options }]);
$(this).mouseout(handleEvent);
});
},
/// 说明:
/// Tr Dblclick
_registerTbodyTrDblclick: function () {
var options = this.options;
$("table[datagrid $='" + options.id + "'] tbody tr").each(function () {
var handleEvent = $.delegate(dataGrid.prototype._handleTbodyTrDblclick, this, [{ options: options }]);
var itemDblclickCallBack = $.delegate(options.tBodyTrDblclickCallBack, this, [{ id: $(this).attr("trId") }]);//回调事件
$(this).dblclick(handleEvent);
$(this).dblclick(itemDblclickCallBack);
});
},
/// 说明:
/// Tr Checkbox
_registerTbodyTrCheckbox: function () {
var options = this.options;
//点击checkbox时候屏蔽tr的click事件，以防和tr的click事件重复
var objCheckAll = $("table[datagrid $='" + options.id + "'] tbody[gdTbody ='" + options.id + "'] tr").find("input:checkbox");
objCheckAll.each(function () {
var handleEvent = $.delegate(dataGrid.prototype._handleTbodyTrCheckbox, this, [{ options: options, objCheckAll: objCheckAll }]);
$(this).click(function (event) {
event.stopPropagation();
handleEvent();
});
});
},
/// 说明:
/// Tr Click
_registerTbodyTrClick: function () {
var options = this.options;
$("table[datagrid $='" + options.id + "'] tbody tr").each(function () {
var handleEvent = $.delegate(dataGrid.prototype._handleTbodyTrClick, this, [{ options: options }]);
$(this).click(handleEvent);
});
},
/// 说明:
/// PageNumber Keyup
_registerPageNumberKeyup: function () {
var options = this.options;
$("#txtPageNumber_" + options.id).bind('keyup', function (e) {
dataGrid.prototype._handlePageNumberKeyup(e, options);
});
},
/// 说明:
/// PageNumber paste
_registerPageNumberPaste: function () {
var options = this.options;
$("#txtPageNumber_" + options.id).bind("paste", function () { //CTR+V事件处理
dataGrid.prototype._handlePageNumberPaste(options);
});
},
/// 说明:
/// PageNumber Focus
_registerPageNumberFocus: function () {
var options = this.options;
$("#txtPageNumber_" + options.id).focus();
},
/// 说明:
/// Checkbox CheckAll
_registerCheckboxCheckAll: function () {
var options = this.options;
var handleEvent = $.delegate(this._handleCheckboxCheckAll, this);
$("input:checkbox[name='chk_All_" + options.id + "']").change(handleEvent);
},
/******************************(注册事件 end)******************************/
/******************************(事件句柄 begin)******************************/
/// 说明:
/// Go To
_handleTableFootGoTo: function () {
var options = this.options;
var pageNumber = $("#txtPageNumber_" + options.id).val();
if ($.IsNull(pageNumber)) {
$("#txtPageNumber_" + options.id).val(options.currentPage);
alert("输入的页数必须是数字且不能为空！");
return;
}
var cuPage = parseInt($("#txtPageNumber_" + options.id).val());
if (cuPage > options.pageCount) {
alert("超出了最大页数！");
$("#txtPageNumber_" + options.id).val(options.currentPage);
return;
}
options.currentPage = cuPage;
this.jumpPage();
},
/// 说明:
/// First Page
_handleTableFootFirstPage: function () {
this.firstPage();
},
/// 说明:
/// Last Page
_handleTableFootLastPage: function () {
this.finalPage();
},
/// 说明:
/// Up Page
_handleTableFootUpPage: function () {
this.lastPage();
},
/// 说明:
/// Next Page
_handleTableFootNextPage: function () {
this.nextPage();
},
/// 说明:
/// Tr Mouseover
_handleTbodyTrMouseover: function (params) {
var options = params.options;
var obj = $(this).find("td input:checkbox");
if (obj.attr("checked")) {
options.tBodyMouserOutBgcolor = options.tBodyTrSelectedBgColor;
}
$(this).css("background-color", options.tBodyMouserOverBgcolor);
},
/// 说明:
/// Tr Mouseout
_handleTbodyTrMouseout: function (params) {
var options = params.options;
var obj = $(this).find("td input:checkbox");
if (obj.attr("checked")) {
$(this).css("background-color", options.tBodyTrSelectedBgColor);
} else {
var trRowNumber = parseInt($(this).attr("trRowNumber"));
if (trRowNumber % 2 == 1) {
$(this).css("background-color", options.tBodyOddTrBgcolor);
} else {
$(this).css("background-color", options.tBodyEvenTrBgcolor);
}
}
if (obj.attr("checked")) {
options.tBodyMouserOutBgcolor = options.tBodyTrSelectedBgColor;
$(this).css("background-color", options.tBodyMouserOutBgcolor);
}
},
/// 说明:
/// Tr Dblclick
_handleTbodyTrDblclick: function (params) {
var options = params.options;
var obj = $(this).find("td input:checkbox");
obj.attr("checked", true);
$(this).css("background-color", options.tBodyTrSelectedBgColor);
},
/// 说明:
/// Tr Checkbox
_handleTbodyTrCheckbox: function (params) {
var options = params.options;
var objCheckAll = params.objCheckAll;
var chkAll = true;
objCheckAll.each(function (i, trCheck) {
if (!trCheck.checked) {
$("input:checkbox[name='chk_All_" + options.id + "']").attr("checked", false);
chkAll = false;
}
});
if (chkAll) {
$("input:checkbox[name='chk_All_" + options.id + "']").attr("checked", true);
}
var objCheck = $(this);
var chkNumber = objCheck.attr("chkNumber");
var objTr = $("table[datagrid $='" + options.id + "'] tbody[gdTbody ='" + options.id + "'] tr[trRowNumber='" + chkNumber + "']");
dataGrid.prototype.setSelectedRowStyle(objCheck, objTr, options);
},
/// 说明:
/// Tr Click
_handleTbodyTrClick: function (params) {
var options = params.options;
var objCheck = $(this).find("td input:checkbox");
objCheck.attr("checked", !objCheck.attr("checked"));
var objTr = $(this);
dataGrid.prototype.setSelectedRowStyle(objCheck, objTr, options);
var chkAll = true;
$("table[datagrid $='" + options.id + "'] tbody[gdTbody ='" + options.id + "'] tr").find("input:checkbox").each(function (i, trCheck) {
if (!trCheck.checked) {
$("input:checkbox[name='chk_All_" + options.id + "']").attr("checked", false);
chkAll = false;
}
});
if (chkAll) {
$("input:checkbox[name='chk_All_" + options.id + "']").attr("checked", true);
}
},
/// 说明:
/// PageNumber Keyup
_handlePageNumberKeyup: function (e, options) {
var curKey = e.which;
if (curKey == 13) {
$("#txtPageNumber_" + options.id).blur(); //失去焦点，目的为了增强火狐的用户体验
var pageNumber = $("#txtPageNumber_" + options.id).val();
if ($.IsNull(pageNumber)) {
$("#txtPageNumber_" + options.id).val(options.currentPage);
alert("输入的页数必须是数字且不能为空！");
return;
}
var cuPage = parseInt(pageNumber);
if (cuPage > options.pageCount) {
alert("超出了最大页数！");
$("#txtPageNumber_" + options.id).val(options.currentPage);
return;
}
options.currentPage = cuPage;
dataGrid.prototype.jumpPage(options);
}
var objThis = $("#txtPageNumber_" + options.id);
objThis.val(objThis.val().replace(/\D|^0/g, ''));
},
/// 说明:
/// PageNumber paste
_handlePageNumberPaste: function (options) {
var objThis = $("#txtPageNumber_" + options.id);
objThis.val(objThis.val().replace(/\D|^0/g, ''));
},
/// 说明:
/// Checkbox CheckAll
_handleCheckboxCheckAll: function () {
var options = this.options;
var objThis = $("input:checkbox[name='chk_All_" + options.id + "']");
var objCheck = $("table[datagrid $='" + options.id + "'] tbody[gdTbody ='" + options.id + "'] tr").find("input:checkbox");
if (objThis.attr("checked")) {
objCheck.each(function () {
$(this).attr("checked", true);
});
$("table[datagrid $='" + options.id + "'] tbody tr").css("background-color", options.tBodyTrSelectedBgColor);
return;
}
objCheck.each(function () {
$(this).attr("checked", false);
var trRowNumber = parseInt($(this).attr("chkNumber"));
var objTr = $("table[datagrid $='" + options.id + "'] tbody tr[trRowNumber='" + trRowNumber + "']");
if (trRowNumber % 2 == 1) {
objTr.css("background-color", options.tBodyOddTrBgcolor);
} else {
objTr.css("background-color", options.tBodyEvenTrBgcolor);
}
});
},
/******************************(事件句柄 end)******************************/
//设置选中行的样式
// objCheck:选中行中的checkbox
// objTr:选中行
// options:参数
setSelectedRowStyle: function (objCheck, objTr, options) {
if (objCheck.attr("checked")) {
objTr.css("background-color", options.tBodyTrSelectedBgColor);
} else {
var trRowNumber = parseInt(objTr.attr("trRowNumber"));
if (trRowNumber % 2 == 1) {
objTr.css("background-color", options.tBodyOddTrBgcolor);
} else {
objTr.css("background-color", options.tBodyEvenTrBgcolor);
}
}
}
};
具体定义及实现
第四部分：对外开放部分。这部分代码很少也是老生常谈的代码了。定义对外开放，也就是一句话的事。代码如下：
$.fn.gridData = new dataGrid();
对外开放部分代码
第五部分：具体使用部分。下面分两块代码叙说，第一块就是html页面，第二块就是js使用代码。代码如下：
<table id="aa" datagrid=""></table>
页面html代码
$(function () {
var options = {
pageCount: 10, //总页数
pageSize: 10, //每页显示个数
currentPage: 1, //当前页
tBoolPage: true
};
options.tHeadCols = [
[
{ field: 'ID', title: '产品编号', width: 150, align: 'center', sortable: true },
{ field: 'ProductName', title: '产品名称', width: 150, align: 'center', sortable: true },
{ field: 'Description', title: '描述', width: 200, align: 'center' },
{ field: 'Mark', title: '备注', width: 150, align: 'center' },
{ field: 'ProductCategoryID', title: '产品类别', width: 150, align: 'center' },
{ field: 'Price', title: '价格', width: 150, align: 'center' }
]
];
$("#aa").gridData.init({
id: "aa",
url: "../Product/GetPageProductInfo",
tHeadCols: options.tHeadCols,
tEnumDataGridSkin: $.enumDdataGrid.enumSkin.gorgeous,
tBoolRowNumbers: false,
trTdentity: "ID",
pageSize: options.pageSize,
currentPage: options.currentPage,
pageCount: options.pageCount,
tBoolPage: options.tBoolPage,
tBodyTrDblclickCallBack: function (params) {
var id = params.id;
alert("this id is:" + id);
}
});
});
使用部分js代码
效果图
下面是我贴的几个效果图，本人审美不好，随意加的样式，没有搭配感，还请各位看官一笑而过，只要知道有啥作用就好。
效果图一（绚丽）：
效果图二（传统）：
总结
虽然写的不好，但是总结还是要的。本次开发属于重构之前代码开发。在此还是希望各位能注重重构，对自己代码负责。好的插件、好的代码也是重构出来的。哈哈，我是这么想的。不要嫌麻烦，也不要以为做的是无用功。
文章比较长，很多知识点我也没有写详细。如果有需要源码的或者想共同探讨的同仁，随时联系我，QQ:296319075 ，注明园友就好，同时也希望大家也能提出宝贵意见，不吝赐教。秉承共同探讨、共同进步！如有转载，请注明出处，谢谢！^_^
jQuery 插件开发——GridData（表格）第二版的更多相关文章
- jQuery 插件开发——GridData（表格）
导读:我个人认为做开发最幸福的事之一就是设计一套属于自己的控件,老早之前就想去做这样的事情,一直碍于事件的冲突和个人的想法,最终没有定论,最近难得抽出一些空隙,去完成这件事情.其实自定义控件并不是难事 ...
- 模仿jquery的一些实现 第二版
具体如下: //w作为window的形参,就表示window (function(w) { // 定义一个全局的window.wyl变量,就类似于jquery里的$,Jquery对象 w.wyl; / ...
- GRIDDATA（表格）第二版
JQUERY 插件开发——GRIDDATA(表格)第二版 开发背景 表格插件之前我也写个一篇,当时写那个插件的时候,我自己还没有总结出写插件的方法,虽然功能实现了,但是使用起来还是有点别扭的,并且需要 ...
- 锋利的jQuery（第二版）学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- 《锋利的jQuery 第二版》chapter 1~
chapter 1 认识 jQuery jquery.js(开发版),jquery.min.js(生产版) window.onload 与 $(document).ready() 的对比: jquer ...
- 掌握jQuery插件开发
进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用? 第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件 ...
- 掌握jQuery插件开发，这篇文章就够了
---恢复内容开始--- 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及数据jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足形影 ...
- 浅谈jquery插件开发模式
首先根据<jQuery高级编程>的描述来看,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget ...
- 如何掌握jQuery插件开发（高能）
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...
随机推荐
- !heap 和 _HEAP_ENTRY
WinDBG提供了!heap命令帮助我们查找heap,同时我们也可以通过dt和MS SYMBOL来了解memory layout. 假设我们有下面一个小程序. int _tmain(int argc, ...
- Linux 终端 忽略大小写
忘了在哪里看到的了,记录一下. 在-/.inputrc中加入一行 set completion-ignore-case on 搞定! 这样在终端输入.补全时就忽略大小写了.当然,Linux本身还是区分 ...
- [转]angular之$apply()方法
这几天,根据buddy指定的任务,要分享一点angular JS的东西.对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不 ...
- HDU2181(基础dfs)
哈密顿绕行世界问题 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Update多个字段从一个表中
UPDATE XXXXXX S SET (S.XXX, S.CCC, S.DDD, S.AAA, S.BBB) = (SELECT F.XXX, F.CCC, F.AAA, BBB FROM XXXX ...
- centos7下搭建ceph luminous（12.2.1）--无网或网络较差
本博客的主要内容是在centos7下搭建luminous,配置dashboard,搭建客户端使用rbd,源码安装ceph,最后给出一些较为常用的命令.本博客针对初次接触ceph的人群. 搭建环境: 主 ...
- linux串口基本编程
Linux的串口表现为设备文件.Linux的串口设备文件命名一般为/dev/ttySn(n=0.1.2„„),若串口是USB扩展的,则串口设备文件命名多为/dev/ttyUSBn(n=0.1.2„„) ...
- ruby 异常处理
begin raise 'A test exception.' rescue Exception => e puts e.message puts e.backtrace.inspect end
- Android 4学习（3）：概述 - Resources
在应用程序中,处理与代码逻辑无关资源的最佳实践是将其放到程序的外部,典型的资源包括字符串,图片等.Android中的资源文件都在res文件夹中,这些资源包括字符串,颜色,主题,样式,图画,布局,动画, ...
- 窗体的keypreview属性的作用是什么？(设置快捷键和钩子)
如果把窗体的KeyPreview属性设为True,那么窗体将比其内的控件优先获得键盘事件的激活权.比如窗体Form1和其内的文本框Text1都准备响应KeyPress事件,那么以下代码将首先激活窗体的 ...