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});

页面调用

$(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() });
});

操作(返回所选中的CHECKBOX)

二、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、一些全局变量以及参数(详细)

全局变量方法（参数）详解

//对象初始化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:根据表头参数生成表头

createHead:

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:根据表头以及数据显示所要显示的数据

createGrid:

//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:加载分页栏

pageLoad:

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:绑定事件

bindEvent:

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 删除事件

editFunctionBase、editFunctionLib、editFunction

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: 分页事件方法

pageIndexChange:

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: 选中事件方法

checkFunction:

checkFunction: function() 
{
    var selectString = '';
    var arrChk = $("input[name='checkbox']:checked");
    $(arrChk).each(function() {
        selectString += this.value + ',';
    });
    alert(selectString);
}
//selectString则为选中的key的字符串 如18,21,31

load: 插件加载方法

load:

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获取数据方法

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

源码下载

posted on 2012-07-03 16:38 小菜接口阅读(2143) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小菜接口

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

导航

公告