实现jquery的grid插件

2019独角兽企业重金招聘Python工程师标准>>>

前几天刚写的例子，还热着呢，有分页，按钮及其事件，表格绘制回调用函数，自定义列（模板和可执行简单的表达式${xxxxx}）

如下：

/**
 * Created by chenhao on 2016/3/31.
 */
(function ($) {
    $.fn.extend({
        "grid": function (options) {
            var opts = $.extend({}, defaluts, options);
            var timestamp = new Date().getTime();
            opts.gridId = "gridId" + timestamp;
            opts.paginationId = "pagination" + timestamp;
            opts.paginationDesId = "paginationDesId" + timestamp;
            opts.selectAllId = "selectAllId" + timestamp;
            opts.selectName = "selectName" + timestamp;
            var $this = $(this);
            var html = "";
            if (opts.buttons != null) {
                for (var i = 0; i < opts.buttons.length; i++) {
                    var btn_id = opts.buttons[i]["id"];
                    html += "<input type='button' id='" + btn_id + "' style='margin:0 5px;' class='btn btn-default' value='" 
                        + opts.buttons[i]["text"] + "'/>";
                    if (opts.buttons[i]["action"] != null)
                        $(document).on('click', '#' + btn_id, eval(opts.buttons[i]["action"]));
                }
            }
            html += "<table id='" + opts.gridId + "' class='table'><thead><tr>";
            if (opts.ennableSelect) {
                html += "<th width='50px'><input id='" + opts.selectAllId + "' type='checkbox'></th>";
            }
            for (var i = 0; i < opts.columns.length; i++) {
                if (opts.columns[i]["hidden"]) {
                    html += "<th style='display: none'>" + opts.columns[i]["display"] + "</th>";
                } else {
                    html += "<th>" + opts.columns[i]["display"] + "</th>";
                }
            }
            html += "</tr></thead><tbody></tbody></table>";
            html += "<span id='" + opts.paginationDesId + "' style='float: right'>第 1 / 1 页</span><nav><ul class='pagination' id='" 
                + opts.paginationId + "'>";
            html += "<li><a href='javascript:;' class='firstPage'>首页</a></li>";
            html += "<li><a href='javascript:;' class='prevPage'>向前</a></li>";
            html += "<li><a href='javascript:;' class='nextPage'>向后</a></li>";
            html += "<li><a href='javascript:;' class='lastPage'>末页</a></li>";
            html += "</ul></nav>";
            $this.html(html);
            loadData($this, opts);
            return {
                getGridId: function () {
                    return opts.gridId;
                },
                reload: function (params) {
                    opts.pagination.pageNo = 1;
                    if (params) {
                        opts.ajax.params = params;
                    }
                    loadData($this, opts);
                },
                getSelectedRows: function () {
                    var rows = [];
                    $("#" + opts.gridId + " input[name='" + opts.selectName + "']").each(function (index) {
                        if ($(this).is(':checked')) {
                            rows.push(opts.data[index]);
                        }
                    });
                    return rows;
                }
            };
        }
    });

    var defaluts = {
        ennableSelect: false,
        columns: [],
        data: [],
        pagination: {
            pageSizes: [10, 20, 30, 50, 100],
            pageSize: 10,
            pageNo: 1,
            count: 0
        },
        callback: function () {
            //console.log("操作成功");
        }
    };

    function initTool(obj, opts) {

        $("#" + opts.selectAllId).removeAttr("checked");

        $("#" + opts.paginationDesId).html("第 " + opts.pagination.pageNo + " / " 
        + Math.ceil(opts.pagination.count / opts.pagination.pageSize) + " 页");

        $("#" + opts.paginationId).find(".firstPage").parent().removeClass("disabled");
        $("#" + opts.paginationId).find(".prevPage").parent().removeClass("disabled");
        $("#" + opts.paginationId).find(".nextPage").parent().removeClass("disabled");
        $("#" + opts.paginationId).find(".lastPage").parent().removeClass("disabled");

        if (opts.pagination.pageNo == 1) {
            $("#" + opts.paginationId).find(".firstPage").parent().addClass("disabled");
            $("#" + opts.paginationId).find(".prevPage").parent().addClass("disabled");
        }

        if (opts.pagination.pageNo == Math.ceil(opts.pagination.count / opts.pagination.pageSize)) {
            $("#" + opts.paginationId).find(".nextPage").parent().addClass("disabled");
            $("#" + opts.paginationId).find(".lastPage").parent().addClass("disabled");
        }

        $("#" + opts.paginationId).find(".firstPage").unbind().click(function () {
            if (opts.pagination.pageNo != 1) {
                opts.pagination.pageNo = 1;
                loadData(obj, opts);
            }
        });
        $("#" + opts.paginationId).find(".prevPage").unbind().click(function () {
            if (opts.pagination.pageNo > 1) {
                opts.pagination.pageNo--;
                loadData(obj, opts);
            }
        });
        $("#" + opts.paginationId).find(".nextPage").unbind().click(function () {
            if (opts.pagination.pageNo < Math.ceil(opts.pagination.count / opts.pagination.pageSize)) {
                opts.pagination.pageNo++;
                loadData(obj, opts);
            }
        });
        $("#" + opts.paginationId).find(".lastPage").unbind().click(function () {
            if (opts.pagination.pageNo != Math.ceil(opts.pagination.count / opts.pagination.pageSize)) {
                opts.pagination.pageNo = Math.ceil(opts.pagination.count / opts.pagination.pageSize);
                loadData(obj, opts);
            }
        });
        $("#" + opts.selectAllId).unbind().click(function () {
            if ($(this).is(':checked')) {
                $("input[name='" + opts.selectName + "']").prop("checked", "checked");
            } else {
                $("input[name='" + opts.selectName + "']").removeAttr("checked");
            }
        });
        $("input[name='" + opts.selectName + "']").unbind().click(function () {
            var allSelected = true;
            $("input[name='" + opts.selectName + "']").each(function () {
                if (!$(this).is(':checked')) {
                    allSelected = false;
                }
            });
            if (allSelected) {
                $("#" + opts.selectAllId).prop("checked", "checked");
            } else {
                $("#" + opts.selectAllId).removeAttr("checked");
            }
        });
    }

    function loadData(obj, opts) {
        opts.ajax.params.pageSize = opts.pagination.pageSize;
        opts.ajax.params.pageNo = opts.pagination.pageNo;
        $.ajax({
            url: opts.ajax.url,
            type: "post",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(opts.ajax.params),
            success: function (result) {
                if (!result.data) return;
                opts.pagination.count = result.count;
                opts.data = result.data;
                var html = "";
                for (var i = 0; i < result.data.length && i < opts.pagination.pageSize; i++) {
                    html += "<tr>";
                    if (opts.ennableSelect) {
                        html += "<th><input name='" + opts.selectName + "' type='checkbox'></th>";
                    }
                    for (var j = 0; j < opts.columns.length; j++) {
                        if (opts.columns[j]["hidden"]) {
                            html += "<td style='display: none'>";
                        } else {
                            html += "<td>";
                        }
                        if (opts.columns[j]["template"]) {
                            var temp = opts.columns[j]["template"];
                            while (temp.indexOf("value") > -1) {
                                temp = temp.replace("value", "'" + result.data[i][opts.columns[j]["name"]] + "'");
                            }
                            while (temp.indexOf("${") > -1) {
                                temp = temp.replace(
                                        temp.substring(temp.indexOf("${"), temp.indexOf("}") + 1), 
                                        eval(temp.substring(temp.indexOf("${") + 2, temp.indexOf("}")))
                                      );
                            }
                            html += temp;
                        } else {
                            html += result.data[i][opts.columns[j]["name"]];
                        }
                        html += "</td>";
                    }
                    html += "</tr>";
                }
                html += "</tbody></table>";
                obj.find("tbody").html(html);
                initTool(obj, opts);
                eval(opts.callback());
            }
        });
    }

})(jQuery);

使用demo：

//初始化codeGrid
var codeGridApi = $("#codeTable").grid({
    ennableSelect: true,
    columns: [
        {name: "codeid", display: "codeid", hidden: true},
        {name: "code", "display": "代码"},
        {name: "description", "display": "描述"},
        {
            name: "codeid",
            display: "操作",
            template: "<button class='btn btn-primary' onclick='initDataBookValue(\"${value}\")'><span class='btn-span'>查看值</span></button>"
        }
    ],
    ajax: {
        url: window.serviceUrl + "bookCodeController/queryBookCode?token=" + (localStorage.getItem("token") || ""),
        params: {}
    },
    callback: function () {
        $("#valueTable").html("");
        $("#insertValue").unbind();
        $("#updateValue").unbind();
        $("#deleteValue").unbind();
    }
});


//获取选择的内容
var data = codeGridApi.getSelectedRows();

//根据参数重载，参数可为空
codeGridApi.reload(json参数);

转载于:https://my.oschina.net/chenhao901007/blog/654073