theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

发版

Browse Source
This commit is contained in:
贤心
2019-06-03 07:57:12 +08:00
parent c20b875946
commit 2257341313
37 changed files with 291 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/layui.css
View File

@@ -864,7 +864,6 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
.laytable-cell-numbers{padding: 0; text-align: center;}
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
.layui-table-body .layui-none{line-height: 26px; padding: 15px; text-align: center; color: #999;}
.layui-table-fixed{position: absolute; left: 0; top: 0; z-index: 101;}
.layui-table-fixed .layui-table-body{overflow: hidden;}
.layui-table-fixed-l{box-shadow: 0 -1px 8px rgba(0,0,0,.08);}
@@ -877,6 +876,12 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
.layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;}
.layui-table-box .layui-none{display: block; line-height: 26px; text-align: center; color: #999;}
.layui-table-box tr.layui-none{transition: none; -webkit-transition: none;}
.layui-table-box .layui-none:hover{background: none!important;}
.layui-table-box .layui-none td{display: block; padding: 0; border: none;}
.layui-table-none{padding: 15px;}
.layui-table-page{position: relative; width: 100%; padding: 7px 7px 0; border-width: 0; border-top-width: 1px; height: 41px; margin-bottom: -1px; font-size: 12px; white-space: nowrap; overflow: hidden;}
.layui-table-page>div{height: 26px;}
@@ -1218,25 +1223,23 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
}
/** 穿梭框 By star1029 **/
.layui-transfer{display: inline-block; position: relative; width: 480px; height: 360px; background-color: #FFF; text-align: left;}
.layui-transfer-left,.layui-transfer-right{display: inline-block; vertical-align: middle; position: relative; width: 200px; height: 340px; border: 1px solid #DDD;}
.layui-transfer-topTitle{padding-left: 12px; height: 36px; border-bottom: 1px solid #DDD; line-height: 36px;}
.layui-transfer{display: inline-block; position: relative; width: 480px; background-color: #FFF; text-align: left;}
.layui-transfer-left,.layui-transfer-right{display: inline-block; vertical-align: middle; position: relative; width: 200px; height: 340px; border: 1px solid #e6e6e6;}
.layui-transfer-topTitle{padding-left: 10px; height: 38px; line-height: 38px; border-bottom: 1px solid #e6e6e6;}
.layui-transfer-btn{display: inline-block; vertical-align: middle; width: 70px; height: 90px; text-align: center;}
.layui-transfer-btn .layui-btn{margin-left: 0; padding: 0 10px; height: 30px; line-height: 30px; background-color: #5FB878; border-color: #5FB878;}
.layui-transfer-btn .layui-btn i{margin-left: 4px; font-size: 14px; color: #FFF;}
.layui-transfer-btn .layui-btn.layui-btn-disabled{background-color: #FBFBFB; border-color: #DDD;}
.layui-transfer-btn .layui-btn.layui-btn-disabled{background-color: #FBFBFB; border-color: #e6e6e6;}
.layui-transfer-btn .layui-btn.layui-btn-disabled i{color: #CCC;}
.layui-transfer-btnRight{margin-bottom: 30px;}
.layui-transfer-search{position: relative; height: 36px; line-height: 36px; border-bottom: 1px solid #DDD; text-align: center;}
.layui-transfer-search .layui-input{display: inline-block; width: 88%; padding-left: 30px; height: 28px; line-height: 28px;}
.layui-transfer-search{position: relative; height: 46px; line-height: 36px; padding: 5px 10px; border-bottom: 1px solid #e6e6e6; text-align: center;}
.layui-transfer-search .layui-input{display: inline-block; width: 100%; padding-left: 30px; height: 28px; line-height: 28px;}
.layui-transfer-searchI{position: absolute; left: 20px;}
.layui-transfer-data{height: 303px; overflow: auto;}
.layui-transfer-data.short{height: 266px;}
.layui-transfer-data li{position: relative; padding-left: 12px; height: 30px; line-height: 30px;}
.layui-transfer-data{height: 300px; overflow: auto;}
.layui-transfer-short{height: 216px;}
.layui-transfer-data li{position: relative; padding-left: 10px; height: 30px; line-height: 30px;}
.layui-transfer-data .layui-form-checkbox[lay-skin="primary"]{width: 100%;}
.layui-transfer-data li:hover{background-color: #EEE;}
.layui-transfer-data::-webkit-scrollbar{width: 5px; background-color: #EEE;}
.layui-transfer-data::-webkit-scrollbar-thumb{background-color: #DDD;}
/** 树组件 By star1029 **/
.layui-tree{line-height: 22px;}

73
src/lay/modules/table.js
View File

@@ -302,6 +302,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}));
options.index = that.index;
that.key = options.id || options.index;
//生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
@@ -635,9 +636,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.setColsWidth(); //自适应列宽
that.scrollPatch(); //滚动条补丁
that.layNone && that.layNone.width(that.elem.width() - 2);
};
//表格完整重载
//表格重载
Class.prototype.reload = function(options, type){
var that = this
,optString = typeof options === 'string'
@@ -654,6 +656,38 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
typs === 'data' ? that.pullData(that.config.page.curr) : that.render();
};
//调整视图
Class.prototype.adjustView = function(type){
var that = this
,isHide = type === 'hide';
that.layFixed[isHide ? 'addClass' : 'removeClass'](HIDE);
that.layTotal[isHide ? 'addClass' : 'removeClass'](HIDE);
that.layPage[isHide ? 'addClass' : 'removeClass'](HIDE);
};
//异常提示
Class.prototype.errorView = function(html){
var that = this
,elemNone = that.layMain.find('.'+ NONE)
,layNone = $(['<tr class="'+ NONE +'" data-off="1">'
,'<td data-off="1"><div class="layui-table-none">'+ html +'</div></td>'
,'</tr>'].join(''));
if(elemNone[0]){
that.layNone.remove();
elemNone.remove();
}
if(!html) return;
layNone.width(that.elem.width() - 2);
that.layMain.find('tbody').html(that.layNone = layNone);
table.cache[that.key] = []; //格式化缓存数据
that.adjustView('hide'); //隐藏无关视图
};
//页码
Class.prototype.page = 1;
@@ -681,6 +715,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(options.contentType && options.contentType.indexOf("application/json") == 0){ //提交 json 格式
data = JSON.stringify(data);
}
that.loading();
$.ajax({
type: options.method || 'get'
@@ -697,10 +733,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//检查数据格式是否符合规范
if(res[response.statusName] != response.statusCode){
that.renderForm();
that.layMain.html('<div class="'+ NONE +'">'+ (
that.errorView(
res[response.msgName] ||
('返回的数据不符合规范，正确的成功状态码 ('+ response.statusName +') 应为：'+ response.statusCode)
) +'</div>');
('返回的数据不符合规范，正确的成功状态码应为："'+ response.statusName +'": '+ response.statusCode)
);
} else {
that.renderData(res, curr, res[response.countName]), sort();
options.time = (new Date().getTime() - that.startTime) + ' ms'; //耗时（接口请求+视图渲染）
@@ -709,7 +745,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
}
,error: function(e, m){
that.layMain.html('<div class="'+ NONE +'">数据接口请求异常：'+ m +'</div>');
that.errorView('数据接口请求异常：'+ m);
that.renderForm();
that.setColsWidth();
}
@@ -833,9 +870,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
that.adjustView();
that.layBody.scrollTop(0);
that.layMain.find('.'+ NONE).remove();
that.layMain.find('tbody').html(trs.join(''));
that.layFixLeft.find('tbody').html(trs_fixed.join(''));
that.layFixRight.find('tbody').html(trs_fixed_r.join(''));
@@ -857,7 +895,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
options.HAS_SET_COLS_PATCH = true;
};
that.key = options.id || options.index;
table.cache[that.key] = data; //记录数据
//显示隐藏分页栏
@@ -870,10 +907,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(data.length === 0){
that.renderForm();
that.layFixed.remove();
that.layMain.find('tbody').html('');
that.layMain.find('.'+ NONE).remove();
return that.layMain.append('<div class="'+ NONE +'">'+ options.text.none +'</div>');
return that.errorView(options.text.none);
}
render(); //渲染数据
@@ -896,8 +930,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用）
that.page = obj.curr; //更新页码
options.limit = obj.limit; //更新每页条数
that.loading();
that.pullData(obj.curr);
}
}
@@ -1154,10 +1187,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//减去分页栏的高度
if(options.page){
bodyHeight = bodyHeight - (that.layPage.outerHeight() || 41) - 2;
bodyHeight = bodyHeight - (that.layPage.outerHeight() || 41);
}
that.layMain.css('height', bodyHeight);
that.layMain.css('height', bodyHeight - 2);
};
//获取滚动条宽度
@@ -1442,7 +1475,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
var othis = $(this)
,index = othis.parents('tr').eq(0).data('index')
,tr = that.layBody.find('tr[data-index="'+ index +'"]')
,data = table.cache[that.key][index];
,data = table.cache[that.key] || [];
data = data[index] || {};
return $.extend({
tr: tr //行元素
@@ -1530,10 +1566,12 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
var othis = $(this)
,index = othis.index();
if(othis.data('off')) return; //不触发事件
that.layBody.find('tr:eq('+ index +')').addClass(ELEM_HOVER)
}).on('mouseleave', 'tr', function(){ //鼠标移出行
var othis = $(this)
,index = othis.index();
if(othis.data('off')) return; //不触发事件
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
}).on('click', 'tr', function(){ //单击行
setRowEvent.call(this, 'row');
@@ -1544,6 +1582,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//创建行单击、双击事件监听
var setRowEvent = function(eventType){
var othis = $(this);
if(othis.data('off')) return; //不触发事件
layui.event.call(this,
MOD_NAME, eventType + '('+ filter +')'
,commonMember.call(othis.children('td')[0])
@@ -1617,6 +1656,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; //不触发事件
if(hide){
othis.find('.layui-table-grid-down').remove();
} else if(elemCell.prop('scrollWidth') > elemCell.outerWidth()){

60
src/lay/modules/transfer.js
View File

@@ -35,15 +35,15 @@ layui.define('form', function(exports){
,options = that.config;
return {
getValue: function(){
return that.getValue();
getData: function(){
return that.getData();
}
,config: options
}
}
//字符常量
,MOD_NAME = 'transfer', ELEM_VIEW = 'layui-transfer', TRAN_LEFT = 'layui-transfer-left', TRAN_RIGHT = 'layui-transfer-right', TRAN_LEFT_LIST = 'layui-transfer-dataLeft'
,MOD_NAME = 'transfer', ELEM_VIEW = 'layui-transfer', ELEM_TOP = 'layui-transfer-topTitle',ELEM_SEARCH = 'layui-transfer-search', ELEM_BOX = 'layui-transfer-box', ELEM_DATA = 'layui-transfer-data', TRAN_LEFT = 'layui-transfer-left', TRAN_RIGHT = 'layui-transfer-right', TRAN_LEFT_LIST = 'layui-transfer-dataLeft'
,TRAN_RIGHT_LIST = 'layui-transfer-dataRight' ,TRAN_BTN_LEFT = 'layui-transfer-btnLeft', TRAN_BTN_RIGHT = 'layui-transfer-btnRight', TRAN_BTN_DIS = 'layui-btn-disabled'
//构造器
@@ -57,6 +57,8 @@ layui.define('form', function(exports){
//默认配置
Class.prototype.config = {
title: ['列表一', '列表二']
,width: 200
,height: 340
,data: [] //数据源
,value: [] //选中的数据
,showSearch: false //是否开启搜索
@@ -97,12 +99,12 @@ layui.define('form', function(exports){
}
});
var temp = ['<div class="layui-transfer layui-form" id="transfer-'+ options.id +'" lay-filter="LAY-Transfer-'+ that.index +'">'
,'<div class="layui-transfer-left" data-total="'+ total1 +'">'
,'<div class="layui-transfer-topTitle"><input lay-skin="primary" name="layTranLeftCheck" lay-filter="layTranLeftCheckAll" type="checkbox" class="layui-input" title="'+ options.title[0] +'"></div>'
var temp = ['<div class="layui-transfer layui-form layui-border-box" id="transfer-'+ options.id +'" lay-filter="LAY-Transfer-'+ that.index +'">'
,'<div class="layui-transfer-left layui-transfer-box" data-total="'+ total1 +'">'
,'<div class="'+ ELEM_TOP +'"><input lay-skin="primary" name="layTranLeftCheck" lay-filter="layTranLeftCheckAll" type="checkbox" class="layui-input" title="'+ options.title[0] +'"></div>'
,function(){
if(options.showSearch){
return '<div class="layui-transfer-search"><input class="layui-input" placeholder="关键字搜索"><i class="layui-icon layui-icon-search layui-transfer-searchI"></i></div><ul class="layui-transfer-data layui-transfer-dataLeft short">';
return '<div class="layui-transfer-search"><input class="layui-input" placeholder="关键字搜索"><i class="layui-icon layui-icon-search layui-transfer-searchI"></i></div><ul class="layui-transfer-data layui-transfer-dataLeft layui-transfer-short">';
}else{
return '<ul class="layui-transfer-data layui-transfer-dataLeft">';
};
@@ -113,11 +115,11 @@ layui.define('form', function(exports){
,'<div class="layui-transfer-btn">'
,'<button type="button" class="layui-btn layui-btn-primary layui-transfer-btnRight layui-btn-disabled"><i class="layui-icon layui-icon-next"></i></button>'
,'<button type="button" class="layui-btn layui-btn-primary layui-transfer-btnLeft layui-btn-disabled"><i class="layui-icon layui-icon-prev"></i></button></div>'
,'<div class="layui-transfer-right" data-arr="'+ arr +'" data-total="'+ total2 +'">'
,'<div class="layui-transfer-topTitle"><input lay-skin="primary" name="layTranRightCheck" lay-filter="layTranRightCheckAll" type="checkbox" class="layui-input" title="'+ options.title[1] +'"></div>'
,'<div class="layui-transfer-right layui-transfer-box" data-arr="'+ arr +'" data-total="'+ total2 +'">'
,'<div class="'+ ELEM_TOP +'"><input lay-skin="primary" name="layTranRightCheck" lay-filter="layTranRightCheckAll" type="checkbox" class="layui-input" title="'+ options.title[1] +'"></div>'
,function(){
if(options.showSearch){
return '<div class="layui-transfer-search"><input class="layui-input" placeholder="关键字搜索"><i class="layui-icon layui-icon-search layui-transfer-searchI"></i></div><ul class="layui-transfer-data layui-transfer-dataRight short">';
return '<div class="layui-transfer-search"><input class="layui-input" placeholder="关键字搜索"><i class="layui-icon layui-icon-search layui-transfer-searchI"></i></div><ul class="layui-transfer-data layui-transfer-dataRight layui-transfer-short">';
}else{
return '<ul class="layui-transfer-data layui-transfer-dataRight">';
};
@@ -134,9 +136,27 @@ layui.define('form', function(exports){
//生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
that.elemTemp = $(temp);
othis.html(that.elemTemp);
that.elem = $(temp);
othis.html(that.elem);
that.layTop = that.elem.find('.'+ ELEM_TOP)
that.layBox = that.elem.find('.'+ ELEM_BOX)
that.laySearch = that.elem.find('.'+ ELEM_SEARCH)
that.layData = that.elem.find('.'+ ELEM_DATA)
//初始化尺寸
that.layBox.css({
width: options.width
,height: options.height
});
that.layData.css({
height: function(){
return options.height - that.layTop.outerHeight() - that.laySearch.outerHeight() - 2
}()
});
that.event();
form.render('checkbox', 'LAY-Transfer-' + that.index);
};
@@ -144,10 +164,10 @@ layui.define('form', function(exports){
Class.prototype.event = function(){
var that = this
,options = that.config
,elem = that.elemTemp
,elem = that.elem
,listLeft = '', listRight = ''
,checkTopLeft = elem.find('.'+ TRAN_LEFT).find('.layui-transfer-topTitle').find('input[name="layTranLeftCheck"]')
,checkTopRight = elem.find('.'+ TRAN_RIGHT).find('.layui-transfer-topTitle').find('input[name="layTranRightCheck"]')
,checkTopLeft = elem.find('.'+ TRAN_LEFT).find('.'+ ELEM_TOP).find('input[name="layTranLeftCheck"]')
,checkTopRight = elem.find('.'+ TRAN_RIGHT).find('.'+ ELEM_TOP).find('input[name="layTranRightCheck"]')
,totalLeft = elem.find('.' + TRAN_LEFT).data('total')
,totalRight = elem.find('.' + TRAN_RIGHT).data('total');
@@ -350,7 +370,7 @@ layui.define('form', function(exports){
elem.find('.' + TRAN_RIGHT).data('total', totalLeft);
elem.find('.' + TRAN_RIGHT).data('arr', arr);
form.render('checkbox', 'LAY-Transfer-' + that.index);
options.onchange && options.onchange(that.getValue());
options.onchange && options.onchange(that.getData());
});
//添加到左边
@@ -389,7 +409,7 @@ layui.define('form', function(exports){
elem.find('.' + TRAN_RIGHT).data('total', totalLeft);
elem.find('.' + TRAN_RIGHT).data('arr', arr);
form.render('checkbox', 'LAY-Transfer-' + that.index);
options.onchange && options.onchange(that.getValue());
options.onchange && options.onchange(that.getData());
});
//搜索
@@ -400,10 +420,10 @@ layui.define('form', function(exports){
};
//得到选中值
Class.prototype.getValue = function(){
Class.prototype.getData = function(){
var that = this
,options = that.config
,arr = that.elemTemp.find('.' + TRAN_RIGHT).data('arr')
,arr = that.elem.find('.' + TRAN_RIGHT).data('arr')
,data = [];
function sortNum(a,b){ return a - b };

222
src/lay/modules/tree.js
View File

@@ -36,11 +36,11 @@ layui.define('form', function(exports){
,options = that.config;
return {
getCheck: function(){
return that.getCheck();
getChecked: function(){
return that.getChecked();
}
,setCheck: function(key){//设置值
return that.setCheck(key);
,setChecked: function(key){//设置值
return that.setChecked(key);
}
,config: options
}
@@ -48,7 +48,7 @@ layui.define('form', function(exports){
//字符常量
,MOD_NAME = 'tree', ELEM_VIEW = 'layui-tree', ELEM_SET = 'layui-tree-set', ICON_CLICK = 'layui-tree-iconClick'
,ICON_ADD = 'layui-icon-addition', ICON_SUB = 'layui-icon-subtraction', ELEM_ENTRY = 'layui-tree-entry', ELEM_MAIN = 'layui-tree-main', ELEM_PACK = 'layui-tree-pack', ELEM_SPREAD = 'layui-tree-spread'
,ICON_ADD = 'layui-icon-addition', ICON_SUB = 'layui-icon-subtraction', ELEM_ENTRY = 'layui-tree-entry', ELEM_MAIN = 'layui-tree-main', ELEM_TEXT = 'layui-tree-txt', ELEM_PACK = 'layui-tree-pack', ELEM_SPREAD = 'layui-tree-spread'
,ELEM_LINE_SHORT = 'layui-tree-setLineShort', ELEM_SHOW = 'layui-tree-showLine', ELEM_EXTEND = 'layui-tree-lineExtend'
//构造器
@@ -68,13 +68,14 @@ layui.define('form', function(exports){
,checked: [] //选中节点(依赖于 showCheckbox 以及 key 参数)
,spread: [] //展开节点(依赖于 key 参数)
,accordion: false //是否开启手风琴模式
,expandClick: true //选择在点击节点(true)/箭头图标(false)的时候展开节点
,onlyIconControl: false //是否仅允许节点左侧图标控制展开收缩
,isJump: false //是否允许点击节点时弹出新窗口跳转
,renderContent: false //是否开启内置的“增加/删除/修改”操作图标
,edit: false //是否开启节点的操作图标
,showSearch: false //是否打开节点过滤
,draggable: false //是否开启节点拖拽
,drag: false //是否开启节点拖拽
,defaultNodeName: '未命名' //节点默认名称
,emptyText: '暂无数据' //数据为空时的文本提示
};
@@ -83,7 +84,7 @@ layui.define('form', function(exports){
var that = this
,options = that.config;
var temp = $('<div class="layui-tree'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'"></div>');
var temp = $('<div class="layui-tree'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'" lay-filter="LAY-tree-'+ that.index +'"></div>');
that.tree(temp);
var othis = $(options.elem)
@@ -105,11 +106,11 @@ layui.define('form', function(exports){
};
//拖拽事件
options.draggable && that.drag();
options.drag && that.drag();
//复选框渲染
if(options.showCheckbox){
form.render('checkbox');
that.renderForm('checkbox');
};
that.elem.find('.layui-tree-set').each(function(){
@@ -161,7 +162,7 @@ layui.define('form', function(exports){
var hasChild = item.children && item.children.length > 0
,packDiv = $('<div class="layui-tree-pack" style="'+ (isOpen(item[options.key]) ? "display: block;" : "") +'"></div>')
,entryDiv = $(['<div '+ (options.key ? 'data-key="'+ (item[options.key] || '') +'"' : '') +' class="layui-tree-set'+ (isOpen(item[options.key]) ? " layui-tree-spread" : "") + (isCheck(item[options.key]) ? " layui-tree-checkedFirst" : "") +'">'
,'<div '+ (options.draggable && !item.fixed ? 'draggable="true"' : '') +' class="layui-tree-entry">'
,'<div '+ (options.drag && !item.fixed ? 'draggable="true"' : '') +' class="layui-tree-entry">'
,'<div class="layui-tree-main layui-inline">'
//箭头
,function(){
@@ -184,20 +185,33 @@ layui.define('form', function(exports){
//节点
,function(){
if(options.isJump && item.href){
return '<a href="'+ item.href +'" target="_blank" class="layui-tree-txt">'+ (item.label || '未命名') +'</a>';
return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'">'+ (item.label || options.defaultNodeName) +'</a>';
}else{
return '<span class="layui-tree-txt">'+ (item.label || '未命名') +'</span>';
return '<span class="'+ ELEM_TEXT +'">'+ (item.label || options.defaultNodeName) +'</span>';
}
}()
,'</div>'
//增删改按钮
//节点操作图标
,function(){
return options.renderContent ? ['<div class="layui-btn-group layui-tree-btnGroup">'
,'<i class="layui-icon layui-icon-add-1" data-type="add"></i>'
,'<i class="layui-icon layui-icon-edit" data-type="edit"></i>'
,'<i class="layui-icon layui-icon-delete" data-type="del"></i>'
,'</div>'].join(''): '';
if(!options.edit) return '';
var editIcon = {
add: '<i class="layui-icon layui-icon-add-1" data-type="add"></i>'
,update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>'
,del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>'
}, arr = ['<div class="layui-btn-group layui-tree-btnGroup">'];
if(options.edit === true){
options.edit = ['update', 'del']
}
if(typeof options.edit === 'object'){
layui.each(options.edit, function(i, val){
arr.push(editIcon[val] || '')
});
return arr.join('') + '</div>';
}
}()
,'</div></div>'].join(''));
@@ -223,8 +237,8 @@ layui.define('form', function(exports){
//选择框
options.showCheckbox && that.checkClick(entryDiv, item);
//增删改
options.renderContent && that.operate(entryDiv, item);
//操作节点
options.edit && that.operate(entryDiv, item);
});
};
@@ -234,14 +248,17 @@ layui.define('form', function(exports){
var that = this
,options = that.config
,entry = elem.children('.'+ELEM_ENTRY)
,touchOpen = options.expandClick ? entry.children('.'+ ELEM_MAIN) : entry.find('.'+ICON_CLICK); //判断展开通过节点还是箭头图标
touchOpen.on('click', function(){
,elemMain = entry.children('.'+ ELEM_MAIN)
,elemIcon = entry.find('.'+ ICON_CLICK)
,elemText = entry.find('.'+ ELEM_TEXT)
,touchOpen = options.onlyIconControl ? elemIcon : elemMain //判断展开通过节点还是箭头图标
,state = '';
//展开收缩
touchOpen.on('click', function(e){
var packCont = elem.children('.'+ELEM_PACK)
,iconClick = touchOpen.children('.layui-icon')[0] ? touchOpen.children('.layui-icon') : touchOpen.find('.layui-tree-icon').children('.layui-icon');
var state = '';
//若没有子节点
if(!packCont[0]){
state = 'normal';
@@ -249,14 +266,12 @@ layui.define('form', function(exports){
if(elem.hasClass(ELEM_SPREAD)){
elem.removeClass(ELEM_SPREAD);
packCont.slideUp(200);
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD);
state = 'close';
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD);
}else{
elem.addClass(ELEM_SPREAD);
packCont.slideDown(200);
iconClick.addClass(ICON_SUB).removeClass(ICON_ADD);
state = 'open';
//是否手风琴
if(options.accordion){
var sibls = elem.siblings('.'+ELEM_SET);
@@ -266,6 +281,16 @@ layui.define('form', function(exports){
};
};
};
});
//点击回调
elemText.on('click', function(){
if(elem.hasClass(ELEM_SPREAD)){
state = options.onlyIconControl ? 'open' : 'close';
} else {
state = options.onlyIconControl ? 'close' : 'open';
}
//点击产生的回调
options.click && options.click({
elem: elem
@@ -274,87 +299,88 @@ layui.define('form', function(exports){
});
});
};
//渲染表单
Class.prototype.renderForm = function(type){
form.render(type, 'LAY-tree-'+ this.index);
};
//复选框选择
Class.prototype.checkClick = function(elem, item){
var that = this
,options = that.config
,entry = elem.children('.'+ELEM_ENTRY)
,elemMain = entry.children('.'+ELEM_MAIN)
,hasChild = false;
,entry = elem.children('.'+ ELEM_ENTRY)
,elemMain = entry.children('.'+ ELEM_MAIN);
elemMain.on('click', 'input[name="layuiTreeCheck"]+', function(e){
layui.stope(e); //阻止点击节点事件
var checked = $(this).prev()[0].checked;
if($(this).prev()[0].disabled) return;
//若有子节点，同步选项
var elemCheckbox = $(this).prev()
,checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return;
//同步子节点选中状态
if(typeof item.children === 'object' || elem.find('.'+ELEM_PACK)[0]){
var childs = elem.find('.'+ELEM_PACK).find('input[name="layuiTreeCheck"]');
childs.each(function(i, item1){
if(item1.disabled) return; //不可点击则跳过
item1.checked = checked;
var childs = elem.find('.'+ ELEM_PACK).find('input[name="layuiTreeCheck"]');
childs.each(function(){
if(this.disabled) return; //不可点击则跳过
this.checked = checked;
});
hasChild = true;
};
//父节点及祖先节点选中
function checkState(elem){
//若无上一级则停止
if(!elem.parents('.'+ELEM_SET)[0]) return;
var siblingTree = elem.siblings().children('.'+ELEM_ENTRY)
,parentTree = elem.parent('.'+ELEM_PACK)
,num = 1;
//若有兄弟节点，判断兄弟节点状态
if(siblingTree[0]){
siblingTree.each(function(i, item1){
var input = $(item1).find('input[name="layuiTreeCheck"]')[0]
//若是节点未选择并且是可选择的属性
if(input.checked == false && !input.disabled){
num = 0;
};
//同步父选中状态
var setParentsChecked = function(thisNodeElem){
//若无父节点，则终止递归
if(!thisNodeElem.parents('.'+ ELEM_SET)[0]) return;
var state
,parentPack = thisNodeElem.parent('.'+ ELEM_PACK)
,parentNodeElem = parentPack.parent()
,parentCheckbox = parentPack.prev().find('input[name="layuiTreeCheck"]');
//如果子节点有任意一条选中，则父节点为选中状态
if(checked){
parentCheckbox.prop('checked', checked);
} else { //如果当前节点取消选中，则根据计算“兄弟和子孙”节点选中状态，来同步父节点选中状态
parentPack.find('input[name="layuiTreeCheck"]').each(function(){
if(this.checked){
state = true;
}
});
};
//若兄弟节点都为选中状态，父节点状态改变
if(num == 1){
parentTree.prev().find('input[name="layuiTreeCheck"]')[0].checked = true;
//向上一级父节点执行
checkState(parentTree.parent('.'+ELEM_SET));
};
//如果兄弟子孙节点全部未选中，则父节点也应为非选中状态
state || parentCheckbox.prop('checked', false);
}
//向父节点递归
setParentsChecked(parentNodeElem);
};
//向上遍历，同步父节点状态
if(checked){
checkState(elem);
}else{
//父节点及祖先节点取消选择
var parentTree = elem.parents('.'+ELEM_PACK).prev();
parentTree.each(function(i, item1){
$(item1).find('input[name="layuiTreeCheck"]')[0].checked = false;
});
};
setParentsChecked(elem);
//复选框点击产生的回调
options.oncheck && options.oncheck({
elem: elem
,checked: checked
,data: item
,hasChild: hasChild
});
form.render('checkbox');
that.renderForm('checkbox');
});
};
//增删改
//节点操作
Class.prototype.operate = function(elem, item){
var that = this
,options = that.config
,entry = elem.children('.'+ELEM_ENTRY)
,elemMain = entry.children('.'+ELEM_MAIN);
,entry = elem.children('.'+ ELEM_ENTRY)
,elemMain = entry.children('.'+ ELEM_MAIN);
entry.children('.layui-tree-btnGroup').on('click', '.layui-icon', function(e){
layui.stope(e); //阻止节点操作
var type = $(this).data("type")
,packCont = elem.children('.'+ELEM_PACK)
,returnObj = {
@@ -381,7 +407,7 @@ layui.define('form', function(exports){
//新增节点
var key = options.operate && options.operate(returnObj)
,obj = {};
obj.label = 'newElemTree';
obj.label = options.defaultNodeName;
obj[options.key] = key;
that.tree(elem.children('.'+ELEM_PACK), [obj]);
@@ -439,12 +465,12 @@ layui.define('form', function(exports){
var packLast = elem.children('.'+ELEM_PACK).children('.'+ELEM_SET).last();
packLast.find('input[name="layuiTreeCheck"]')[0].checked = true;
};
form.render('checkbox');
that.renderForm('checkbox');
//修改
}else if(type == 'edit'){
var text = elemMain.children('.layui-tree-txt').html();
elemMain.children('.layui-tree-txt').html('');
}else if(type == 'update'){
var text = elemMain.children('.'+ ELEM_TEXT).html();
elemMain.children('.'+ ELEM_TEXT).html('');
//添加输入框，覆盖在文字上方
elemMain.append('<input type="text" class="layui-inline layui-tree-editInput">');
//获取焦点
@@ -452,9 +478,9 @@ layui.define('form', function(exports){
//嵌入文字移除输入框
var getVal = function(input){
var textNew = input.val().trim();
textNew = textNew ? textNew : '未命名';
textNew = textNew ? textNew : options.defaultNodeName;
input.remove();
elemMain.children('.layui-tree-txt').html(textNew);
elemMain.children('.'+ ELEM_TEXT).html(textNew);
//同步数据
returnObj.data.label = textNew;
@@ -514,7 +540,7 @@ layui.define('form', function(exports){
if(state == 1 && num == 1){
//勾选父节点
checkState.checked = true;
form.render('checkbox');
that.renderForm('checkbox');
//向上遍历祖先节点
elemDel(parentTree.parent('.'+ELEM_SET));
};
@@ -712,7 +738,7 @@ layui.define('form', function(exports){
if(state == 1 && ndig == 1){
//勾选父节点
checkState.checked = true;
form.render('checkbox');
that.renderForm('checkbox');
//向上遍历祖先节点
elemRemove(parentTree.parent('.'+ELEM_SET) || parentSet);
};
@@ -729,12 +755,12 @@ layui.define('form', function(exports){
if($(this).height() != 0){
//若在本身位置
if((disY > setTop && disY < setTop + setHeight)){
options.dragend && options.dragend('拖拽失败，拖拽在节点本身进行！');
options.dragend && options.dragend('drag error');
return;
};
//若仅有一个子元素
if(num == 1 && disY > parentTop && disY < setTop + setHeight){
options.dragend && options.dragend('拖拽失败，拖拽在节点本身进行！');
options.dragend && options.dragend('drag error');
return;
};
var thisTop = $(this).offset().top;
@@ -811,7 +837,7 @@ layui.define('form', function(exports){
packLast.find('input[name="layuiTreeCheck"]+').click();
};
};
options.dragend && options.dragend('拖拽成功，进入目标节点内', setParent, $(this));
options.dragend && options.dragend('drag success', setParent, $(this));
return false;
//若位于元素上方
@@ -918,7 +944,7 @@ layui.define('form', function(exports){
,arr = [];
//遍历所有的值
pack.find('.layui-tree-txt').each(function(){
pack.find('.'+ ELEM_TEXT).each(function(){
var entry = $(this).parents('.'+ELEM_ENTRY);
//若值匹配，加一个类以作标识
if($(this).html().indexOf(val) != -1){
@@ -963,7 +989,7 @@ layui.define('form', function(exports){
};
//得到选中节点
Class.prototype.getCheck = function(){
Class.prototype.getChecked = function(){
var that = this
,options = that.config
,arr = [];
@@ -981,7 +1007,7 @@ layui.define('form', function(exports){
};
//设置选中节点
Class.prototype.setCheck = function(key){
Class.prototype.setChecked = function(key){
var that = this
,options = that.config;

2
src/layui.js
View File

@@ -19,7 +19,7 @@
}
,Layui = function(){
this.v = '2.5.0'; //版本号
this.v = '2.5.1'; //版本号
}
//获取layui所在目录