家谱现有接口调试50%
This commit is contained in:
rain
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
@ Name：表格冗余列可展开显示
|
||||
@ Author：hbm
|
||||
@ License：MIT
|
||||
*/
|
||||
|
||||
layui.define(['form', 'table'], function (exports) {
|
||||
var $ = layui.$
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
, VERSION = 1.0, MOD_NAME = 'openTable', ELEM = '.layui-openTable', ON = 'on', OFF = 'off'
|
||||
|
||||
//外部接口
|
||||
, openTable = {
|
||||
index: layui.openTable ? (layui.openTable.index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
, set: function (options) {
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件监听
|
||||
, on: function (events, callback) {
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//操作当前实例
|
||||
, thisIns = function () {
|
||||
var that = this
|
||||
, options = that.config
|
||||
, id = options.id || options.index;
|
||||
|
||||
return {
|
||||
reload: function (options) {
|
||||
that.reload.call(that, options);
|
||||
}
|
||||
, config: options
|
||||
}
|
||||
}
|
||||
|
||||
//构造器
|
||||
, Class = function (options) {
|
||||
var that = this;
|
||||
that.index = ++openTable.index;
|
||||
that.config = $.extend({}, that.config, openTable.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
openType: 0
|
||||
};
|
||||
|
||||
//渲染视图
|
||||
Class.prototype.render = function () {
|
||||
var that = this
|
||||
, options = that.config
|
||||
, colArr = options.cols[0]
|
||||
, openCols = options.openCols || []
|
||||
, done = options.done;
|
||||
|
||||
delete options["done"];
|
||||
// 1、在第一列 插入可展开操作
|
||||
colArr.splice(0, 0, {
|
||||
align: 'left',
|
||||
width: 50,
|
||||
templet: function (item) {
|
||||
return "<i class='openTable-i-table-open ' status='off' data='"
|
||||
// 把当前列的数据绑定到控件
|
||||
+ (JSON.stringify(item))
|
||||
+ "' title='展开'></i>";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 2、表格Render
|
||||
table.render(
|
||||
$.extend({
|
||||
done: function (res, curr, count) {
|
||||
initExpandedListener();
|
||||
if (done) {
|
||||
done(res, curr, count)
|
||||
}
|
||||
}
|
||||
}, options));
|
||||
|
||||
|
||||
// 3、展开事件
|
||||
function initExpandedListener() {
|
||||
|
||||
|
||||
//扩大点击事件范围 为父级div
|
||||
$(".openTable-i-table-open")
|
||||
.parent()
|
||||
.unbind()
|
||||
.click(function () {
|
||||
var that = $(this).children();
|
||||
|
||||
// 关闭类型
|
||||
if (options.openType === 0) {
|
||||
var sta = $(".openTable-open-dow").attr("status"),
|
||||
isThis = (that.attr("data") === $(".openTable-open-dow").attr("data"));
|
||||
//1、关闭展开的
|
||||
$(".openTable-open-dow")
|
||||
.addClass("openTable-open-up")
|
||||
.removeClass("openTable-open-dow")
|
||||
.attr("status", OFF);
|
||||
|
||||
//2、如果当前 = 展开 && 不等于当前的 关闭
|
||||
if (sta === ON && isThis) {
|
||||
$(".openTable-open-td").slideUp(100, function () {
|
||||
$(".openTable-open-td").remove();
|
||||
});
|
||||
|
||||
return;
|
||||
} else {
|
||||
that.attr("status", OFF)
|
||||
$(".openTable-open-td").remove();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
var _this = this
|
||||
, item = JSON.parse(that.attr("data"))
|
||||
, status = that.attr("status") === 'on';
|
||||
|
||||
// 1、如果当前为打开，再次点击则关闭
|
||||
if (status) {
|
||||
that.removeClass("openTable-open-dow");
|
||||
that.attr("status", 'off');
|
||||
this.addTR.find("div").slideUp(100, function () {
|
||||
_this.addTR.remove();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var html = ["<div style='margin-left: 50px;display: none'>"];
|
||||
|
||||
// 2、从左到右依次排列 Item
|
||||
openCols.forEach(function (val, index) {
|
||||
// 1、自定义模板
|
||||
if (val.templet) {
|
||||
html.push("<div class='openTable-open-item-div'>")
|
||||
html.push(val.templet(item));
|
||||
html.push("</div>")
|
||||
// 2、可下拉选择类型
|
||||
} else if (val.type && val.type === 'select') {
|
||||
var child = ["<div id='" + val.field + "' class='openTable-open-item-div' >"];
|
||||
child.push("<span style='color: #99a9bf'>" + val["title"] + "：</span>");
|
||||
child.push("<div class='layui-input-inline'><select lay-filter='" + val.field + "'>");
|
||||
val.items.forEach(function (it) {
|
||||
it = val.onDraw(it, item);
|
||||
child.push("<option value='" + it.id + "' ");
|
||||
child.push(it.isSelect ? " selected='selected' " : "");
|
||||
child.push(" >" + it.value + "</option>");
|
||||
});
|
||||
child.push("</select></div>");
|
||||
child.push("</div>");
|
||||
html.push(child.join(""));
|
||||
setTimeout(function () {
|
||||
layui.form.render();
|
||||
// 监听 select 修改
|
||||
layui.form.on('select(' + val.field + ')', function (data) {
|
||||
if (options.edit && val.onSelect(data, item)) {
|
||||
var json = {};
|
||||
json.value = data.value;
|
||||
json.field = val.field;
|
||||
item[val.field] = data.value;
|
||||
json.data = JSON.parse(JSON.stringify(item));
|
||||
options.edit(json);
|
||||
}
|
||||
});
|
||||
}, 20);
|
||||
} else {
|
||||
// 3、默认类型
|
||||
html.push("<div class='openTable-open-item-div'>");
|
||||
html.push("<span class='openTable-item-title'>" + val["title"] + "：</span>");
|
||||
html.push((val.edit ?
|
||||
("<input class='openTable-exp-value openTable-exp-value-edit' autocomplete='off' name='" + val["field"] + "' value='" + item[val["field"]] + "'/>")
|
||||
: ("<span class='openTable-exp-value' >" + item[val["field"]] + "</span>")
|
||||
));
|
||||
html.push("</div>");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
that.addClass("openTable-open-dow");
|
||||
|
||||
// 把添加的 tr 绑定到当前 移除时使用
|
||||
this.addTR = $([
|
||||
"<tr><td class='openTable-open-td' colspan='" + (colArr.length + 1) + "'>"
|
||||
, html.join("") + "</div>"
|
||||
, "</td></tr>"].join("")
|
||||
);
|
||||
that.parent().parent().parent().after(this.addTR);
|
||||
this.addTR.find("div").slideDown(200);
|
||||
that.attr("status", 'on');
|
||||
|
||||
$(".openTable-exp-value-edit")
|
||||
.blur(function () {
|
||||
var that = $(this), name = that.attr("name"), val = that.val();
|
||||
// 设置了回调 &&发生了修改
|
||||
if (options.edit && item[name] + "" !== val) {
|
||||
var json = {};
|
||||
json.value = that.val();
|
||||
json.field = that.attr("name");
|
||||
item[name] = val;
|
||||
json.data = item;
|
||||
options.edit(json);
|
||||
}
|
||||
}).keypress(function (even) {
|
||||
even.which === 13 && $(this).blur()
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 4、监听排序事件
|
||||
var elem = $(options.elem).attr("lay-filter");
|
||||
|
||||
// 5、监听表格排序
|
||||
table.on('sort(' + elem + ')', function (obj) {
|
||||
if (options.sort) {
|
||||
options.sort(obj)
|
||||
}
|
||||
// 重新绑定事件
|
||||
initExpandedListener();
|
||||
});
|
||||
|
||||
// 6、单元格编辑
|
||||
layui.table.on('edit(' + elem + ')', function (obj) {
|
||||
if (options.edit) {
|
||||
options.edit(obj)
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//核心入口
|
||||
openTable.render = function (options) {
|
||||
var ins = new Class(options);
|
||||
return thisIns.call(ins);
|
||||
};
|
||||
|
||||
//加载组件所需样式
|
||||
layui.link(layui.cache.base + "openTable/openTable.css?v="+(new Date).getTime(), function () {
|
||||
//此处的“openTable”要对应 openTable.css 中的样式： html #layuicss-openTable{}
|
||||
}, 'openTable');
|
||||
|
||||
exports('openTable', openTable);
|
||||
});
|
||||
Reference in New Issue
Block a user