尝试实现一个jQuery组件

(function($, layer) {
            "use strict";
            if (!$)
                throw "需要jQuery支持";
            if (!layer)
                throw "需要layer支持";
            $.fn.materialTable = function(options) {
                var el = $(this);
                if (options == "upload") {
                    if (!$.fn.materialTable.options.el) {
                        $.error("组件未初始化");
                        return;
                    }
                    subInit(arguments[1]);
                    return;
                }
                options = $.extend($.fn.materialTable.options, options || {});
                $.fn.materialTable.options.el = el;
                el.addClass("table table-bordered table-hover").css("padding", "0px").css("margin", "0px");
                el.append(baseInit(options.base));
                options.base.forEach(function(item) {
                    subInit(item.material_no);
                });
                el.on("click", ".cls-uploadUI", uploadUI);
                el.on("click", ".cls-download", download);
                el.on("click", ".cls-remove", remove);
            };
            var thArr = [ "序号", "单证种类", "状态", "操作" ];

            function baseInit(base) {
                var html = "<tr><th></th></th>";
                thArr.forEach(function(item) {
                    html += "<th style='text-align: center'>" + item + "</th>";
                });
                html += "</tr>";
                base.forEach(function(item) {
                    html += "<tr id='p_" + item.material_no + "'>";
                    html += "<td class='center' width='38px'><input type='checkbox' onclick='return false'></td>";
                    html += "<td class='center' width='50px'>" + item.material_no + "</td><td>" + item.material_name + "</td>";
                    html += "<td width='50px'><span class='label label-sm label-warning'>未上传</span></td>";
                    html += "<td width='50px'><button class='btn btn-xs btn-success cls-uploadUI'>添加</button></td>";
                    html += "</tr>";
                    html += "<tr><td colspan='5' class='hidden cls-container'></td></tr>";

                });
                return html;
            }
            function subInit(mNo) {
                var dId = $.fn.materialTable.options.declare_id;
                $.ajax({
                    type : "get",
                    url : $.fn.materialTable.options.subUrl,
                    data : {
                        declare_id : dId,
                        material_no : mNo
                    },
                    success : function(sub) {
                        $.fn.materialTable.options.el.find("[class=p_" + mNo + "]").remove();
                        var tr = $.fn.materialTable.options.el.find("tr#p_" + mNo);
                        if (!sub.length) {
                            tr.find("span").removeClass("label-success").addClass("label-warning").text("未上传");
                            tr.find("[type=checkbox]").removeAttr("checked");
                        } else {
                            tr.find("[type=checkbox]").attr("checked", true);
                            tr.find("span").removeClass("label-warning").addClass("label-success").text("已上传");
                            var html = "";
                            sub.forEach(function(item) {
                                html += "<tr id='c_" + item.serial_no + "' class='p_" + mNo + "'>";
                                html += "<td class='center' colspan='3'>下载我吧:" + item.file_name + "</td>";
                                html += "<td class='center' colspan='2'>";
                                html += "<button class='btn btn-xs btn-info cls-download'>下载</button>";
                                html += "<button class='btn btn-xs btn-danger cls-remove'>删除</button>";
                                html += "</td>";
                                html += "</tr>";
                            });
                            tr.next().after(html);

                        }
                    },
                    dataType : "json"
                });
            }
            $.fn.materialTable.options = {
                el : null,
                declare_id : null,
                baseUrl : null,
                subUrl : null,
                removeUrl : null,
                base : null,
            };
            function uploadUI() {
                var me = $(this);
                var container = $("#uploadUI").parent();
                if (container.hasClass("clsContainer"))
                    container.hide();
                me.parent().parent().next().find("td").removeClass("hidden").append($("#uploadUI").removeClass("hidden"));
            }
            function download() {
                var me = $(this);
                layer.alert("declare_id: " + $.fn.materialTable.options.declare_id + " material_no: " + me.parent().parent().attr("class").slice(2) + " serial_no: "
                        + me.parent().parent().attr("id").slice(2) + " ,开始下载...");
            }
            function remove() {
                var me = $(this);
                layer.confirm("是否删除文件", function(index) {
                    $.ajax({
                        type : "get",
                        url : $.fn.materialTable.options.removeUrl,
                        data : {
                            declare_id : $.fn.materialTable.options.declare_id,
                            material_no : me.parent().parent().attr("class").slice(2),
                            serial_no : me.parent().parent().attr("id").slice(2)
                        },
                        success : function(msg) {
                            layer.msg(msg == "true" ? "删除成功" : "删除失败");
                            $.fn.materialTable.options.el.materialTable("upload", me.parent().parent().attr("class").slice(2));
                        },
                        dataType : "text"
                    });
                    layer.close(index);
                });
            }

        })(jQuery, layer);