(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);
尝试实现一个jQuery组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 2016年送给自己的最后一份礼物 CZT#23 CZTAsia#1木木带领大家禅绕画深度游,用31天时间,送给自己...