tanghc
6 years ago
commit
e229fe884f
@ -0,0 +1,159 @@ |
|||||||
|
/** |
||||||
|
* 表单插件，使用方法： |
||||||
|
* var myform = layui.Form('formId'); |
||||||
|
* myform.setData({...}) |
||||||
|
* |
||||||
|
* var data = myform.getData(); |
||||||
|
* |
||||||
|
* var name = myform.getData('name') |
||||||
|
*/ |
||||||
|
layui.define(function (exports) { |
||||||
|
|
||||||
|
/** |
||||||
|
* form = new Form('formId'); |
||||||
|
* @param formId |
||||||
|
* @constructor |
||||||
|
*/ |
||||||
|
var Form = function (formId) { |
||||||
|
this.$form = $('#' + formId); |
||||||
|
this.parseForm(this.$form); |
||||||
|
} |
||||||
|
|
||||||
|
Form.prototype = { |
||||||
|
fire: function (eventName, data) { |
||||||
|
var handler = this['on' + eventName]; |
||||||
|
handler && handler(data); |
||||||
|
} |
||||||
|
, opt: function (attr) { |
||||||
|
return this[attr]; |
||||||
|
} |
||||||
|
/** |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
, parseForm: function ($form) { |
||||||
|
var that = this; |
||||||
|
this.form = $form[0]; |
||||||
|
} |
||||||
|
|
||||||
|
, getEls: function () { |
||||||
|
return this.$form.find('input,select,textarea'); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 同load(data) |
||||||
|
*/ |
||||||
|
, setData: function (data) { |
||||||
|
this.loadData(data); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
, loadData: function (data) { |
||||||
|
this.reset(); |
||||||
|
for (var name in data) { |
||||||
|
var val = data[name]; |
||||||
|
var $el = this.$form.find('[name="' + name + '"]'); |
||||||
|
|
||||||
|
$el.each(function () { |
||||||
|
var _$el = $(this); |
||||||
|
if (_$el.is(':radio') || _$el.is(':checkbox')) { |
||||||
|
_$el.prop('checked', false); |
||||||
|
var elVal = _$el.val(); |
||||||
|
|
||||||
|
if ($.isArray(val)) { |
||||||
|
for (var i = 0, len = val.length; i < len; i++) { |
||||||
|
if (elVal == val[i]) { |
||||||
|
_$el.prop('checked', true); |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
_$el.prop('checked', elVal == val); |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
_$el.val(val); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
/** |
||||||
|
* 清除表单中的值,清除错误信息 |
||||||
|
*/ |
||||||
|
, clear: function () { |
||||||
|
this.getEls().each(function () { |
||||||
|
var _$el = $(this); |
||||||
|
if (_$el.is(':radio') || _$el.is(':checkbox')) { |
||||||
|
this.checked = false; |
||||||
|
} else { |
||||||
|
this.value = ''; |
||||||
|
} |
||||||
|
|
||||||
|
var msg = _$el.data('msg'); |
||||||
|
if (msg) { |
||||||
|
msg.text(''); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 重置表单 |
||||||
|
*/ |
||||||
|
, reset: function () { |
||||||
|
var form = this.form; |
||||||
|
if (form && form.reset) { |
||||||
|
form.reset(); |
||||||
|
} else { |
||||||
|
this.clear(); |
||||||
|
} |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取表单数据,如果有fieldName参数则返回表单对应的值<br> |
||||||
|
* var id = form.getData('id') 等同于 var id = form.getData().id; |
||||||
|
* @param {String} fieldName |
||||||
|
* @return {Object} 返回JSON对象,如果有fieldName参数,则返回对应的值 |
||||||
|
*/ |
||||||
|
, getData: function (fieldName) { |
||||||
|
var that = this; |
||||||
|
var data = {}; |
||||||
|
|
||||||
|
this.getEls().each(function () { |
||||||
|
var value = that._getInputVal($(this)); |
||||||
|
if (value) { |
||||||
|
var name = this.name; |
||||||
|
var dataValue = data[name]; |
||||||
|
if (dataValue) { |
||||||
|
if ($.isArray(dataValue)) { |
||||||
|
dataValue.push(value); |
||||||
|
} else { |
||||||
|
data[name] = [dataValue, value]; |
||||||
|
} |
||||||
|
} else { |
||||||
|
data[name] = value; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
if (typeof fieldName === 'string') { |
||||||
|
return data[fieldName]; |
||||||
|
} |
||||||
|
|
||||||
|
return data; |
||||||
|
} |
||||||
|
, _getInputVal: function ($input) { |
||||||
|
if ($input.is(":radio") || $input.is(":checkbox")) { |
||||||
|
if ($input.is(':checked')) { |
||||||
|
return $input.val(); |
||||||
|
} |
||||||
|
} else { |
||||||
|
return $input.val(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
exports('Form', function (formId) { |
||||||
|
return new Form(formId); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.treeTable-empty { |
||||||
|
width: 20px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTable-icon { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTable-icon .layui-icon-triangle-d:before { |
||||||
|
content: "\e623"; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTable-icon.open .layui-icon-triangle-d:before { |
||||||
|
content: "\e625"; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,216 @@ |
|||||||
|
layui.define(['layer', 'table'], function (exports) { |
||||||
|
var $ = layui.jquery; |
||||||
|
var layer = layui.layer; |
||||||
|
var table = layui.table; |
||||||
|
|
||||||
|
var treetable = { |
||||||
|
// 渲染树形表格
|
||||||
|
render: function (param) { |
||||||
|
// 检查参数
|
||||||
|
if (!treetable.checkParam(param)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
// 获取数据
|
||||||
|
if (param.data) { |
||||||
|
treetable.init(param, param.data); |
||||||
|
} else { |
||||||
|
// $.getJSON(param.url, param.where, function (res) {
|
||||||
|
// treetable.init(param, res.data);
|
||||||
|
// });
|
||||||
|
$.ajax({ |
||||||
|
url: param.url, |
||||||
|
type: param.method || 'get', |
||||||
|
data: param.where, |
||||||
|
headers: param.headers || {}, |
||||||
|
dataType: "json", |
||||||
|
success: function (res) { |
||||||
|
treetable.init(param, res.data); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 渲染表格
|
||||||
|
init: function (param, data) { |
||||||
|
var mData = []; |
||||||
|
var doneCallback = param.done; |
||||||
|
var tNodes = data; |
||||||
|
// 补上id和pid字段
|
||||||
|
for (var i = 0; i < tNodes.length; i++) { |
||||||
|
var tt = tNodes[i]; |
||||||
|
if (!tt.id) { |
||||||
|
if (!param.treeIdName) { |
||||||
|
layer.msg('参数treeIdName不能为空', {icon: 5}); |
||||||
|
return; |
||||||
|
} |
||||||
|
tt.id = tt[param.treeIdName]; |
||||||
|
} |
||||||
|
if (!tt.pid) { |
||||||
|
if (!param.treePidName) { |
||||||
|
layer.msg('参数treePidName不能为空', {icon: 5}); |
||||||
|
return; |
||||||
|
} |
||||||
|
tt.pid = tt[param.treePidName]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 对数据进行排序
|
||||||
|
var sort = function (s_pid, data) { |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
if (data[i].pid == s_pid) { |
||||||
|
var len = mData.length; |
||||||
|
if (len > 0 && mData[len - 1].id == s_pid) { |
||||||
|
mData[len - 1].isParent = true; |
||||||
|
} |
||||||
|
mData.push(data[i]); |
||||||
|
sort(data[i].id, data); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
sort(param.treeSpid, tNodes); |
||||||
|
|
||||||
|
// 重写参数
|
||||||
|
param.url = undefined; |
||||||
|
param.data = mData; |
||||||
|
param.page = { |
||||||
|
count: param.data.length, |
||||||
|
limit: param.data.length |
||||||
|
}; |
||||||
|
param.cols[0][param.treeColIndex].templet = function (d) { |
||||||
|
var mId = d.id; |
||||||
|
var mPid = d.pid; |
||||||
|
var isDir = d.isParent; |
||||||
|
var emptyNum = treetable.getEmptyNum(mPid, mData); |
||||||
|
var iconHtml = ''; |
||||||
|
for (var i = 0; i < emptyNum; i++) { |
||||||
|
iconHtml += '<span class="treeTable-empty"></span>'; |
||||||
|
} |
||||||
|
if (isDir) { |
||||||
|
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>'; |
||||||
|
} else { |
||||||
|
iconHtml += '<i class="layui-icon layui-icon-file"></i>'; |
||||||
|
} |
||||||
|
iconHtml += ' '; |
||||||
|
var ttype = isDir ? 'dir' : 'file'; |
||||||
|
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">'; |
||||||
|
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>' |
||||||
|
}; |
||||||
|
|
||||||
|
param.done = function (res, curr, count) { |
||||||
|
$(param.elem).next().addClass('treeTable'); |
||||||
|
$('.treeTable .layui-table-page').css('display', 'none'); |
||||||
|
$(param.elem).next().attr('treeLinkage', param.treeLinkage); |
||||||
|
// 绑定事件换成对body绑定
|
||||||
|
/*$('.treeTable .treeTable-icon').click(function () { |
||||||
|
treetable.toggleRows($(this), param.treeLinkage); |
||||||
|
});*/ |
||||||
|
if (param.treeDefaultClose) { |
||||||
|
treetable.foldAll(param.elem); |
||||||
|
} |
||||||
|
if (doneCallback) { |
||||||
|
doneCallback(res, curr, count); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// 渲染表格
|
||||||
|
table.render(param); |
||||||
|
}, |
||||||
|
// 计算缩进的数量
|
||||||
|
getEmptyNum: function (pid, data) { |
||||||
|
var num = 0; |
||||||
|
if (!pid) { |
||||||
|
return num; |
||||||
|
} |
||||||
|
var tPid; |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
if (pid == data[i].id) { |
||||||
|
num += 1; |
||||||
|
tPid = data[i].pid; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
return num + treetable.getEmptyNum(tPid, data); |
||||||
|
}, |
||||||
|
// 展开/折叠行
|
||||||
|
toggleRows: function ($dom, linkage) { |
||||||
|
var type = $dom.attr('lay-ttype'); |
||||||
|
if ('file' == type) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var mId = $dom.attr('lay-tid'); |
||||||
|
var isOpen = $dom.hasClass('open'); |
||||||
|
if (isOpen) { |
||||||
|
$dom.removeClass('open'); |
||||||
|
} else { |
||||||
|
$dom.addClass('open'); |
||||||
|
} |
||||||
|
$dom.closest('tbody').find('tr').each(function () { |
||||||
|
var $ti = $(this).find('.treeTable-icon'); |
||||||
|
var pid = $ti.attr('lay-tpid'); |
||||||
|
var ttype = $ti.attr('lay-ttype'); |
||||||
|
var tOpen = $ti.hasClass('open'); |
||||||
|
if (mId == pid) { |
||||||
|
if (isOpen) { |
||||||
|
$(this).hide(); |
||||||
|
if ('dir' == ttype && tOpen == isOpen) { |
||||||
|
$ti.trigger('click'); |
||||||
|
} |
||||||
|
} else { |
||||||
|
$(this).show(); |
||||||
|
if (linkage && 'dir' == ttype && tOpen == isOpen) { |
||||||
|
$ti.trigger('click'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 检查参数
|
||||||
|
checkParam: function (param) { |
||||||
|
if (!param.treeSpid && param.treeSpid != 0) { |
||||||
|
layer.msg('参数treeSpid不能为空', {icon: 5}); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (!param.treeColIndex && param.treeColIndex != 0) { |
||||||
|
layer.msg('参数treeColIndex不能为空', {icon: 5}); |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true; |
||||||
|
}, |
||||||
|
// 展开所有
|
||||||
|
expandAll: function (dom) { |
||||||
|
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { |
||||||
|
var $ti = $(this).find('.treeTable-icon'); |
||||||
|
var ttype = $ti.attr('lay-ttype'); |
||||||
|
var tOpen = $ti.hasClass('open'); |
||||||
|
if ('dir' == ttype && !tOpen) { |
||||||
|
$ti.trigger('click'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 折叠所有
|
||||||
|
foldAll: function (dom) { |
||||||
|
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { |
||||||
|
var $ti = $(this).find('.treeTable-icon'); |
||||||
|
var ttype = $ti.attr('lay-ttype'); |
||||||
|
var tOpen = $ti.hasClass('open'); |
||||||
|
if ('dir' == ttype && tOpen) { |
||||||
|
$ti.trigger('click'); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
layui.link(layui.cache.base + 'treetable-lay/treetable.css'); |
||||||
|
|
||||||
|
// 给图标列绑定事件
|
||||||
|
$('body').on('click', '.treeTable .treeTable-icon', function () { |
||||||
|
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage'); |
||||||
|
if ('true' == treeLinkage) { |
||||||
|
treetable.toggleRows($(this), true); |
||||||
|
} else { |
||||||
|
treetable.toggleRows($(this), false); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
exports('treetable', treetable); |
||||||
|
}); |
||||||
Loading…
Reference in new issue