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