JavaScript 学习笔记之二：编写自己的jQuery扩展分页插件(分享yQuery)

// $(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("#sortpager", 0, josnData, { checkbox: true, name: "姓名", age: "年龄", dofac: true }, { pageSize: 4, pageCount: 8 }, { key: "age", editfac: false });
//$$.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); } });
$("#CAOZUO").click(function() { $$.checkFunction() });
});
// ]]>

最近在学习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});

ajaxLoad:

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种模式)

源码下载