jQuery扩展方法测试

var global = {
    pageSize: 20,
    pageList: [10, 20, 50, 100, 200]
};

var _1 = new Function(), loadOnce = true;

$.fn.extend({
    table: function (k, p) {

        "use strict";
        var id = $(this).selector;

        var setData = function () {
            jQuery.prototype.allow = id;
            jQuery.prototype.data = p;
        };

        var getData = function () {
            if (id != jQuery.prototype.allow) {
                return;
            }
            return jQuery.prototype.data;
        };

        var _6 = function () {
            if (_1.prototype.url == undefined) {
                throw new Error("请求地址不存在");
            }
            var param = p == undefined ? {} : p;
            var _2 = _1.prototype.queryParam;
            if (_2 != undefined) {
                if (_2 instanceof Object && !(_2 instanceof Array)) {
                    param = Object.assign(_2, param);
                }
                else {
                    console.warn("请求参数queryParam错误，未计入条件查询");
                }
            }
            param.rows = $("#_p").val() == undefined ? _1.prototype.pageList[0] : $("#_p").val();
            param.page = _1.prototype.queryParam.page == undefined ? 1 : _1.prototype.queryParam.page;
            return param;
        }

        var get = function (num) {
            var param = _6();
            $.ajax({
                url: _1.prototype.url,
                type: num == 1 ? "get" : "post",
                dataType: "json",
                data: param,
                success: function (data) {
                    $(id).table("setData", data.rows);
                    _1.prototype.total = data.total;
                    wrapHtml();
                },
                error: function (data) {
                    console.error(data);
                }
            })
        }

        var post = function () {
            var param = _6();
            var form = $("<form id='_1f' action='" + _1.prototype.url + "' method='post'></form>");
            $.each(param, function (key, val) {
                var inp = $("<input name='" + key + "' value='" + val + "' />");
                form.append(inp);
            })
            $(document.body).append(form);
            form.submit();
            $("#_1f").remove();
        }

        var wrapHtml = function () {
            var th = $(id).find("thead tr th");
            var width = $(".d_table").height();
            $.each($(".d_table").children(), function (i, o) {
                if (!$(o).hasClass("table")) {
                    width -= $(o).height();
                }
            })
            $(id).css("height", width - 36);
            var optsList = [];
            $.each(th, function (i, o) {
                var opts = $(o).attr("options");
                var arr = opts.split(",");
                var _2 = {};
                $.each(arr, function (i, o) {
                    if (o.startsWith("field:")) {
                        _2.field = o.substr(6);
                    }
                    if (o.startsWith("align:")) {
                        _2.align = o.substr(6);
                    }
                    if (o.startsWith("width:")) {
                        _2.width = o.substr(6);
                    }
                })
                optsList.push(_2);
            })
            var data = $(id).table("getData");
            $("tbody").remove();
            var tbody = $("<tbody></tbody>");
            var currentSize = $("#_p").val() == undefined ? _1.prototype.pageList[0] : $("#_p").val();
            var page = _1.prototype.queryParam.page;
            for (var i = 0; i < data.length; i++) {
                var o = data[i];
                var tr = $("<tr></tr>");
                if ($(id).hasClass("table-striped")) {
                    if (i % 2 == 1) {
                        tr.addClass("striped")
                    }
                }
                for (var j = 0; j < optsList.length; j++) {
                    if (optsList[j].field == "ck") {
                        var td = $("<td style='width:20px;text-align:center;'><input type='checkbox' name='ck' mark='_" + i + "'/></td>");
                        tr.append(td);
                    }
                    else {
                        var val = o[optsList[j].field] == undefined ? " " : o[optsList[j].field];
                        if (o[optsList[j].field] == undefined) {
                            console.error("字段 " + optsList[j].field + " 不存在");
                        }
                        var td = $("<td>" + val + "</td>");
                        if (optsList[j].align != undefined) {
                            td.css("text-align", optsList[j].align);
                        }
                        if (optsList[j].width != undefined) {
                            td.css("width", optsList[j].width);
                        }
                        tr.append(td);
                    }
                }
                tbody.append(tr);
            }
            $(id).append(tbody);
            if (loadOnce) {
                var select = "<select id='_p' οnchange='_3(this)'>";
                $.each(_1.prototype.pageList, function (i, o) {
                    select += "<option value='" + o + "'>" + o + "</option>";
                })
                select += "</select>";
                var div = $("<div class='p_div'> 显示<span> " + select + " </span>项结果，共<span> " + _1.prototype.total + " </span>项数据</div>");
                $(id).after(div);
                loadOnce = false;
                _4(_1.prototype.pageList[0]);
            }
        }

        var getSelect = function () {
            var indexArr = [], resArr = [];
            $.each($(id + " tbody input[type='checkbox']"), function (i, o) {
                if ($(o).is(":checked")) {
                    indexArr.push($(o).attr("mark").substr(1));
                }
            })
            $.each(getData(), function (i, o) {
                for (var j = 0; j < indexArr.length; j++) {
                    if (indexArr[j] == i) {
                        resArr.push(o);
                    }
                }
            })
            return resArr;
        }

        var _4 = function () {
            $("#p_btns").remove();
            var left = $("<div id='p_btns'></div>");
            var first = $("<button style='width:56px' οnclick='_p(this)'>首页</button>");
            var prev = $("<button style='width:56px' οnclick='_p(this)'>上一页</button>");
            var next = $("<button style='width:56px' οnclick='_p(this)'>下一页</button>");
            var end = $("<button style='width:56px' οnclick='_p(this)'>末页</button>");
            var total = _1.prototype.total;
            var currentPage = _1.prototype.queryParam.page;
            var pages = Math.ceil(total / _1.prototype.pageSize);
            var div = $("<div class='p_div_1'> 当前第 <span>" + currentPage + "</span> 页，共 <span>" + pages + "页 </span></div>")
            left.append(first);
            left.append(prev);
            left.append(div);
            left.append(next);
            left.append(end);
            $(".p_div").append(left);
        }

        var _5 = function (obj) {
            var _6 = $(obj).text();
            var currentPage = _1.prototype.queryParam.page;
            var endPage = Math.ceil(_1.prototype.total / _1.prototype.queryParam.rows);
            if (_6 == "首页") {
                _6 = 1;
            }
            if (_6 == "末页") {
                _6 = endPage;
            }
            if (_6 == "上一页") {
                if (currentPage - 1 <= 0) {
                    return;
                }
                _6 = currentPage - 1 <= 0 ? 1 : currentPage - 1;
            }
            if (_6 == "下一页") {
                if (currentPage + 1 > endPage) {
                    return;
                }
                _6 = currentPage + 1 > endPage ? endPage : currentPage + 1;
            }
            $("#p_btns button.p_btn_selected").removeClass("p_btn_selected");
            _1.prototype.queryParam.page = _6;
            $(_1.prototype.id).table("load");
            _4();
        }

        if (k instanceof Object && !(k instanceof Array)) {
            _1.prototype = {
                url: k.url,
                id: id,
                pageSize: k.pageSize == undefined ? 20 : k.pageSize,
                pageList: k.pageList == undefined ? [10, 20, 30, 40, 50] : k.pageList,
                queryParam: k.queryParam
            }
        }

        if (typeof k == "string") {
            var res;
            switch (k) {
                case "setData":
                    setData();
                    break;
                case "getData":
                    res = getData();
                    break;
                case "load":
                    get(1);
                    break;
                case "pload":
                    get(2);
                    break;
                case "getSelect":
                    res = getSelect();
                    break;
                case "_5":
                    _5(p);
                    break;
                case "_4":
                    _4(p);
                    break;
            }
            if (res != null && res != undefined) {
                return res;
            }
        }

    }
})

var _3 = function (obj) {
    var rows = $(obj).val();
    _1.prototype.queryParam.page = 1;
    _1.prototype.pageSize = rows;
    $(_1.prototype.id).table("load");
    $(_1.prototype.id).table("_4");
}

var _p = function (obj) {
    $(_1.prototype.id).table("_5", obj);
}

$().ready(function () {
    $(_1.prototype.id + " thead input[type='checkbox']").change(function () {
        if ($(this).is(":checked")) {
            $.each($(_1.prototype.id + " tbody input[type='checkbox']"), function (i, o) {
                $(o).prop("checked", true);
            })
        } else {
            $.each($(_1.prototype.id + " tbody input[type='checkbox']"), function (i, o) {
                $(o).removeAttr("checked");
            })
        }
    })
})

js 部分

body ,html
{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

table
{
    width: 100%;
    display:block;  
    height:550px;  
    overflow-y:auto;
}

table.table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}

table.table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color:#dedede
}

table.table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    word-break: keep-all;
    white-space:nowrap;
}
 
table.table tr
{
    height: 36px;
}

.d_table
{
    margin:auto;
    position: relative;
    width:80%;
    margin-left:10%;
    top: 10px;
    height:100%;
}

.striped
{
    background-color:#eee;    
}

.p_div
{
    position: absolute;
    bottom: 32px;
    font-size: 16px;
    line-height: 40px;
    width:100%;
    background-color: #dcd8d8;
    height: 40px;
}

.p_div span
{
    font-size:18px;
}

#p_btns
{
    position: absolute;
    right: 10px;
    top: 5px;
}

#p_btns button
{
    margin-left:10px;
    height: 25px;
    line-height: 25px;
    border: 1px solid gray;
    cursor:pointer;
    float:  left;
    position:  relative;
    top: 5px;
    background-color: white;
}

.p_div_1
{
    float:  left;
    line-height: 34px;
}

.p_div select
{
    height: 30px;
    position: relative;
    top: -2px;
    font-size: 16px;    
}

css 部分

<head>
    <title>功能测试</title>
    <style type="text/css">
        @import url("/Css/base/table.utils.css")
    </style>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <script type="text/javascript" src="/Scripts/frame/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/utils/table.utils.js"></script>
</head>

    <div class="d_table">
        <table id="table" class="table table-striped" title="数据列表">
            <thead>
                <tr>
                    <th options="field:ck"><input type="checkbox" name="ck"/></th>
                    <th options="field:id,width:10%">编号</th>
                    <th options="field:name,align:center,width:70%">姓名</th>
                    <th options="field:sex,width:20%">性别</th>
                </tr>
            </thead>
        </table>
    </div>
    <script type="text/javascript">
        $("#table").table({
            url: url,
            pageSize: global.pageSize,
            pageList: global.pageList,
            queryParam: { "test": "test" }
        })
        $("#table").table("load");
    </script>

html 部分