JavaScript 学习笔记之二:编写自己的jQuery扩展分页插件(分享yQuery)
最近在学习JavaScript,所以也就自己尝试着写了下基于jQuery的分页插件,下面是这个插件的展示、需求、参数、代码详解,同时也提出疑问,忘哪位路过的,指导指导。
一、基本效果如下(样式可以自己设计):
页面简单调用如下:
$$.load("#sort", 0, josnData, { checkbox: false, name: "姓名", age: "年龄", dofac: true }, { pageSize: 4, pageCount: 8 }, { key: "age", editfac: false }); //ajax获取时的调用 //$$.load("#sort", 1, { url: "Default2.aspx/GetData",data: "{'pagesize':4,'pageindex':1}"}, { checkbox: true, name: "姓名", age: "年龄", dofac: true }, { pageSize: 4, pageCount: 10 }, { key: "age" ,editfac:false});
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(document).ready(function() { var josnData = [{ name: "张飒", age: 18 }, { name: "徐飒", age: 19 }, { name: "许飒", age: 40 }, { name: "徐沙", age: 25 }, { name: "刘炳红", age: 19 }, { name: "萧然", age: 31 }, { name: "耗力", age: 88 }, { name: "林鼐", age: 11 }, { name: "林鼐2", age: 13 }, { name: "林鼐3", age: 14}]; //传入所有数据时的调用 $$.load("#sort", 0, josnData, { checkbox: false, name: "姓名", age: "年龄", dofac: true }, { pageSize: 4, pageCount: 8 }, { key: "age", editfac: false }); //ajax获取时的调用 //$$.load("#sort", 1, { url: "Default2.aspx/GetData",data: "{'pagesize':4,'pageindex':1}"}, { checkbox: true, name: "姓名", age: "年龄", dofac: true }, { pageSize: 4, pageCount: 10 }, { key: "age" ,editfac:false}); //自定义选中事件(可写上数据库操作) //$$.extend({ checkFunction: function() { } }); //自定义删除事件(可写上数据库操作) $$.extend({ editFunctionLib: function(idstring) { alert(idstring); } }); //选中事件 默认的弹出选中的数据的key的字符串 如:18,15,16 $("#CAOZUO").click(function() { $$.checkFunction() }); });
二、yQuery.pagination 分页插件小需求如下:
1、table布局(分页部分的数据展示采用的table tr td布局)
2、jQuery框架上扩展(使用了jQuery的部分功能,以及代码部分也是仿照jQuery写的)
3、支持样式的扩展(设置了一些固定的样式,可以自己修改class)
4、自定义表头和数据(传入包含表头列的json数据,包括是否启用checkbox)
5、支持多选,单选(checkbox)
6、支持数据处理事件(支持单选 多选checkbox进行数据库操作,支持行数据删除事件(编辑没做))
7、支持数据处理事件以及提供返回值供数据库执行操作(这里可以根据返回值 自定义数据库处理js函数 进行数据库数据操作)
8、支持分页以及分页栏样式的修改(设计class)
9、支持ajax获取数据(本例包含2种情况 1、传入所有的数据json格式 2、传入ajax获取数据的参数 自动获取数据 上面的展示为第一种情况)
三、具体参数以及代码:
1、一些全局变量以及参数(详细)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//对象初始化yQuery init: function() { return this; }, //ajax设置参数变量如: //{ url: "Default2.aspx/GetData",data: "{'pagesize':4,'pageindex':1}",success: function() { alert("1111"); }} //可以传入所有的ajax获取数据的参数 ajaxSetting: {}, //是否采用ajax获取数据 0 否 1 是 ajaxIs: 0, //数据填充id 传入如:#sort parent: "", //表头参数数组变量 存储json格式表头变量的属性值 dataHead: null, //表头参数变量 json格式 如:{ checkbox: false, name: "姓名", age: "年龄", dofac: true } jsonHead: {}, //数据变量 dataGrid: null, //分页参数变量 pageSettings: { pageSize: 4, pageIndex: 1, pageCount: 0 }, //操作参数变量 包含唯一列key(必须要传 根据这个来进行数据库操作) doParams: { key:"age",delfac: true, editfac: true }, //表格初始化table tableString: "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"pagtion_table\" id=\"pagtion_table\">", //ajax获取数据(dataSetting为ajax设置参数如同ajaxSetting) ajaxLoad: function(dataSetting) { return new ajaxbox(dataSetting); }, //创建表头tr(dataHeadSetting参数如同jsonHead) createHead: function(dataHeadSetting) { }, //创建数据tr(isPage:表示是否是操作后重加载 1为重加载;parentId如同parent;isAjax如同ajaxIs) createGrid: function(dataHeadSetting, pageSetting, isPage, parentId, doParams, isAjax) { }, //创建分页栏 pageLoad: function(isAjax, isPage) { }, //绑定事件(包含分页事件 选中事件 删除事件) bindEvent: function() { }, //删除基础操作 即删除dataGrid中的某行 editFunctionBase: function(idString) { }, //对外的删除接口 可以在外面进行自定义(见后面的自定义) idString为包含唯一列的值 editFunctionLib: function(idString) { }, //删除的直接绑定事件方法 包含2个操作 editFunctionBase,editFunctionLib editFunction: function() { }, //分页的绑定事件方法 处理分页后的操作 pageIndexChange: function() { }, //选中的绑定事件方法 可以在外面自定义(见后) checkFunction: function() { }, //该插件的Load() //parentId 绑定的ID 传入如:#lis //dataSetting 1、直接传入json数据 2、ajax获取数据的参数 //dataHeadSetting 表头参数 json格式 //pageSetting 分页参数 json格式 //doParams 操作参数 json格式 load: function(parentId, isAjax, dataSetting, dataHeadSetting, pageSetting, doParams) { }, //获取json格式的属性 getPropertys: function(dataHeadSetting) { }
2、具体的方法详解(附代码)
createHead:根据表头参数 生成表头
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
createHead: function(dataHeadSetting) { var headString = ""; //判断是否有dataHeadSetting参数传入 if (typeof (dataHeadSetting) == "undefined") { return; } else { this.jsonHead = dataHeadSetting; var headArray = this.getPropertys(dataHeadSetting); if (headArray.length == 0) return; else { this.dataHead = headArray; headString += "<tr class=\"pagtion_head\" id=\"pagtion_head\">"; //循环显示表头的各个td if (typeof (dataHeadSetting.checkbox) != "undefined") { if (dataHeadSetting.checkbox == true || dataHeadSetting.checkbox == "true") { headString += "<td id=\"checkboxall\" class=\"head_td\"><input type=\"checkbox\" id=\"checkall\"></td>"; } for (var i = 0; i < headArray.length; i++) { if (headArray[i] != "checkbox" && headArray[i] != "dofac") { headString += "<td id=\"" + headArray[i] + "\" class=\"head_td\">" + dataHeadSetting[headArray[i]] + "</td>"; } else if (headArray[i] == "dofac") { headString += "<td class=\"head_td\">操作</td>"; } } } headString += "</tr>"; } } this.tableString += headString; }
createGrid:根据表头 以及数据 显示所要显示的数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//isPage参数是为了翻页的时候进行table重写 不为0则表示翻页操作 createGrid: function(dataHeadSetting, pageSetting, isPage, parentId, doParams, isAjax) { if (isPage != 0) { $("" + parentId + "").html(""); this.tableString = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"pagtion_table\" id=\"pagtion_table\">"; this.createHead(this.jsonHead); } var dataString = ""; var head_array = this.dataHead; var page_array = this.pageSettings; var ajax = this.ajaxIs; var do_array = doParams; var minSize; var maxSize; if (page_array.pageIndex == 1) { minSize = 0; maxSize = page_array.pageSize - 1; } else { minSize = page_array.pageSize * (page_array.pageIndex - 1); maxSize = page_array.pageSize * page_array.pageIndex - 1; } if (this.dataHead == null || this.dataGrid == null) return; else $.each(this.dataGrid, function(index, position) { if (ajax == 0) { if (index >= minSize && index <= maxSize) { dataString += "<tr class=\"pagtion_body\" id=\"pagtion_body_" + position[doParams.key] + "\">"; if (typeof (dataHeadSetting.checkbox) != "undefined") { if (dataHeadSetting.checkbox == true || dataHeadSetting.checkbox == "true") { dataString += "<td class=\"body_td\"><input type=\"checkbox\" name=\"checkbox\" value=\"" + position[doParams.key] + "\" ></td>"; } for (var i = 0; i < head_array.length; i++) { if (head_array[i] != "checkbox" && head_array[i] != "dofac") { dataString += "<td class=\"head_td\">" + position[head_array[i]] + "</td>"; } if (head_array[i] == "dofac") { var doString = ""; if (do_array.editfac == true) doString += "<div class=\"editClass\" id=\"edit_" + position[doParams.key] + "_" + index + "\">编辑</div>"; if (do_array.delfac == true) doString += "<div class=\"delClass\" id=\"del_" + position[doParams.key] + "_" + index + "\">删除</div>"; dataString += "<td class=\"head_td\">" + doString + "</td>"; } } } dataString += "</tr>"; } } else { dataString += "<tr class=\"pagtion_body\" id=\"pagtion_body_" + position[doParams.key] + "\">"; if (typeof (dataHeadSetting.checkbox) != "undefined") { if (dataHeadSetting.checkbox == true || dataHeadSetting.checkbox == "true") { dataString += "<td class=\"body_td\"><input type=\"checkbox\" name=\"checkbox\" value=\"" + position[doParams.key] + "\" ></td>"; } for (var i = 0; i < head_array.length; i++) { if (head_array[i] != "checkbox" && head_array[i] != "dofac") { dataString += "<td class=\"head_td\">" + position[head_array[i]] + "</td>"; } if (head_array[i] == "dofac") { var doString = ""; if (do_array.editfac == true) doString += "<div class=\"editClass\" id=\"edit_" + position[doParams.key] + "_" + index + "\">编辑</div>"; if (do_array.delfac == true) doString += "<div class=\"delClass\" id=\"del_" + position[doParams.key] + "_" + index + "\">删除</div>"; dataString += "<td class=\"head_td\">" + doString + "</td>"; } } } dataString += "</tr>"; } }); this.tableString += dataString; this.tableString += "</table>"; }
pageLoad:加载分页栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
pageLoad: function(isAjax, isPage) { var pageString = ""; var pages = 1; if (isPage == 1) { $("#pageBar").html(""); pageString = ""; } if (this.dataGrid != null) { pageString += "<ul>"; if (this.dataGrid.length > 0) { if (isAjax == "0" || isAjax == 0) { this.pageSettings.pageCount = this.dataGrid.length; pages = (this.pageSettings.pageCount % this.pageSettings.pageSize == 0) ? this.pageSettings.pageCount / this.pageSettings.pageSize : (this.pageSettings.pageCount / this.pageSettings.pageSize) + 1; if (this.pageSettings.pageIndex > pages) { this.pageSettings.pageIndex--; } for (var i = 1; i <= pages; i++) { if (i == this.pageSettings.pageIndex) { pageString += "<li class=\"page_hover\">" + i + "</li>"; } else { pageString += "<li class=\"page_normal\">" + i + "</li>"; } } } else { if (this.pageSettings.pageCount == 0) return; else pages = (this.pageSettings.pageCount % this.pageSettings.pageSize == 0) ? this.pageSettings.pageCount / this.pageSettings.pageSize : (this.pageSettings.pageCount / this.pageSettings.pageSize) + 1; if (this.pageSettings.pageIndex > pages) { this.pageSettings.pageIndex--; } for (var i = 1; i <= pages; i++) { if (i == this.pageSettings.pageIndex) { pageString += "<li class=\"page_hover\">" + i + "</li>"; } else { pageString += "<li class=\"page_normal\">" + i + "</li>"; } } } } pageString += "</ul>"; } $("#pageBar").append(pageString); }
bindEvent:绑定事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
bindEvent: function() { //绑定分页事件 var pageCurrent = this.pageSettings.pageIndex; $(".page_normal").live("click", this.pageIndexChange); //这种情况下live比较好 bind 我用的时候竟然发现狂占内存 $(".page_hover").live("click", this.pageIndexChange); //绑定全选按钮 $("#checkall").live("click", function() { if ($("#checkall").attr("checked") == true) { $('[name=checkbox]:checkbox').attr('checked', true); } else { $('[name=checkbox]:checkbox').attr('checked', false); } }); //绑定编辑和删除事件 $("[id^='del_']").live("click", this.editFunction); }
editFunctionBase、editFunctionLib、editFunction 删除事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
editFunctionBase: function(idString) { var id = idString.substring(5, idString.lastIndexOf("_")); var index = idString.substring(idString.lastIndexOf("_") + 1); yQuery.prototype.pageSettings.pageIndex = parseInt($(".page_hover").html()); yQuery.prototype.dataGrid.splice(index, 1); yQuery.prototype.pageLoad(0, 1); if (yQuery.prototype.ajaxIs == 1) { yQuery.prototype.ajaxLoad(yQuery.prototype.ajaxSetting).load(); } yQuery.prototype.createGrid(yQuery.prototype.jsonHead, yQuery.prototype.pageSettings, 1, yQuery.prototype.parent, yQuery.prototype.doParams, yQuery.prototype.ajaxIs); $("" + yQuery.prototype.parent + "").append(yQuery.prototype.tableString); }, editFunctionLib: function(idString) { alert(idString); }, editFunction: function() { var idString = this.id; yQuery.prototype.editFunctionBase(idString); yQuery.prototype.editFunctionLib(idString); }
pageIndexChange: 分页事件方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
pageIndexChange: function() { $(".pageBar ul li").each(function() { $(this).removeClass("page_hover"); $(this).addClass("page_normal"); }); $(this).removeClass("page_normal"); $(this).addClass("page_hover"); yQuery.prototype.pageSettings.pageIndex = parseInt($(this).html()); if (yQuery.prototype.ajaxIs == 1) { yQuery.prototype.ajaxLoad(yQuery.prototype.ajaxSetting).load(); } yQuery.prototype.createGrid(yQuery.prototype.jsonHead, yQuery.prototype.pageSettings, 1, yQuery.prototype.parent, yQuery.prototype.doParams, yQuery.prototype.ajaxIs); $("" + yQuery.prototype.parent + "").append(yQuery.prototype.tableString); //yQuery.prototype.bindEvent(); }
checkFunction: 选中事件方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
checkFunction: function() { var selectString = ''; var arrChk = $("input[name='checkbox']:checked"); $(arrChk).each(function() { selectString += this.value + ','; }); alert(selectString); } //selectString则为选中的key的字符串 如18,21,31
load: 插件加载方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
load: function(parentId, isAjax, dataSetting, dataHeadSetting, pageSetting, doParams) { this.ajaxIs = isAjax; this.ajaxSetting = dataSetting; $$.extend(this.pageSettings, pageSetting, this.pageSettings); $$.extend(this.doParams, doParams, this.doParams); this.parent = parentId; if (isAjax == "0" || isAjax == 0) { this.dataGrid = dataSetting; // 数据源赋值 this.createHead(dataHeadSetting, this.doParams); // 绑定表头 this.createGrid(dataHeadSetting, pageSetting, 0, parentId, this.doParams, isAjax); // 绑定数据到table this.pageLoad(isAjax); $("" + parentId + "").append(this.tableString); this.bindEvent(); } else { this.ajaxLoad(this.ajaxSetting).load(); this.createHead(dataHeadSetting, this.doParams); // 绑定表头 this.createGrid(dataHeadSetting, pageSetting, 0, parentId, this.doParams, isAjax); // 绑定数据到table this.pageLoad(isAjax); $("" + parentId + "").append(this.tableString); this.bindEvent(); } }
ajaxLoad: ajax获取数据方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
ajaxLoad: function(dataSetting) { return new ajaxbox(dataSetting); } var ajaxbox = function(e) { this.setting = { type: "POST", async: false, data: "", url: "", dataType: "text", contentType: "application/json; charset=utf-8", success: function(msg) { Data = jQuery.parseJSON(msg); var jsonData = eval('(' + Data.d + ')'); yQuery.prototype.dataGrid = jsonData; }, error: function(xhr, msg, e) { } }; this.load = function() { $.extend(this.setting, e, this.setting); var datas = "{"; var jsonstring = eval('(' + this.setting.data + ')'); var jsons = yQuery.prototype.getPropertys(jsonstring); for (var i = 0; i < jsons.length; i++) //为了ajax分页的时候自动传入pageindex所以对json数据进行重载 { if (jsons[i] == "pageindex") { if (jsonstring.pageindex != yQuery.prototype.pageSettings.pageIndex) { datas += "'pageindex':'" + yQuery.prototype.pageSettings.pageIndex + "'"; } else { datas += "'pageindex':'" + jsonstring[jsons[i]] + "'"; } } else { datas += "'" + jsons[i] + "':'" + jsonstring[jsons[i]] + "'"; } if (i < jsons.length - 1) datas += ","; } datas += "}" this.setting.data = datas; //alert(this.setting.data); $.ajax(this.setting); } }
基本代码如上 个人感觉调用还是蛮方便的 本来还想做个新增和编辑的 但是后来还是没做。
关于选中后的自定义处理、删除的自定义处理 我是通过$$.extend({ checkFunction: function() { } });这种方式来处理的 感觉还是蛮方便的。
在做的过程中 被js的this的作用域搞的有点头昏 所以也就定义了一些全局变量来调用 不知道有什么好办法没?
还有就是我的代码中 有些地方使用了这样的代码方式 yQuery.prototype.ajaxLoad(yQuery.prototype.ajaxSetting).load();
不知道有啥坏处?而且感觉还是有点别扭,希望高手指导下。
最后附上源码(有兴趣的可以自己下载测试下,包含2种模式)