github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(transfer): 新增 `dblclick` 选项 (#1491) 

* feat(transfer): 新增 `dblclick` 选项

* style(transfer): 优化代码书写风格

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
pull/1510/head^2
morning-star 11 months ago committed by GitHub
parent
ed3bab52e5
commit
e5aa6c3a87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 150 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      docs/transfer/detail/options.md
  2. 162
      src/modules/transfer.js

24
docs/transfer/detail/options.md
Unescape View File

@ -163,6 +163,30 @@ onchange: function(data, index){
`false`
</td>
</tr>
<tr>
<td>dblclick <sup>2.9.3+</sup></td>
<td>
双击时的回调函数。返回的参数如下：
```
dblclick: function(obj){
console.log(obj.elem); // 点击的元素
console.log(obj.data); // 得到点击项的数据
console.log(obj.index); // 如果数据来自左边，index 为 0，否则为 1
return false // 返回 false 会阻止穿梭
}
```
</td>
<td>function</td>
<td>
`null`
</td>
</tr>
<tr>

162
src/modules/transfer.js
Unescape View File

@ -73,39 +73,39 @@ layui.define(['laytpl', 'form'], function(exports){
// 穿梭框模板
var TPL_BOX = function(obj){
obj = obj || {};
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">'
,'<div class="layui-transfer-header">'
,'<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{= d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">'
,'</div>'
,'{{# if(d.data.showSearch){ }}'
,'<div class="layui-transfer-search">'
,'<i class="layui-icon layui-icon-search"></i>'
,'<input type="text" class="layui-input" placeholder="关键词搜索">'
,'</div>'
,'{{# } }}'
,'<ul class="layui-transfer-data"></ul>'
,'</div>'].join('');
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">',
'<div class="layui-transfer-header">',
'<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{= d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">',
'</div>',
'{{# if(d.data.showSearch){ }}',
'<div class="layui-transfer-search">',
'<i class="layui-icon layui-icon-search"></i>',
'<input type="text" class="layui-input" placeholder="关键词搜索">',
'</div>',
'{{# } }}',
'<ul class="layui-transfer-data"></ul>',
'</div>'].join('');
};
// 主模板
var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">'
,TPL_BOX({
index: 0
,checkAllName: 'layTransferLeftCheckAll'
})
,'<div class="layui-transfer-active">'
,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">'
,'<i class="layui-icon layui-icon-next"></i>'
,'</button>'
,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">'
,'<i class="layui-icon layui-icon-prev"></i>'
,'</button>'
,'</div>'
,TPL_BOX({
index: 1
,checkAllName: 'layTransferRightCheckAll'
})
,'</div>'].join('');
var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">',
TPL_BOX({
index: 0,
checkAllName: 'layTransferLeftCheckAll'
}),
'<div class="layui-transfer-active">',
'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">',
'<i class="layui-icon layui-icon-next"></i>',
'</button>',
'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">',
'<i class="layui-icon layui-icon-prev"></i>',
'</button>',
'</div>',
TPL_BOX({
index: 1,
checkAllName: 'layTransferRightCheckAll'
}),
'</div>'].join('');
// 构造器
var Class = function(options){
@ -147,8 +147,8 @@ layui.define(['laytpl', 'form'], function(exports){
open: '{{', // 标签符前缀
close: '}}' // 标签符后缀
}).render({
data: options
,index: that.index //索引
data: options,
index: that.index // 索引
}));
var othis = options.elem = $(options.elem);
@ -176,8 +176,8 @@ layui.define(['laytpl', 'form'], function(exports){
// 初始化尺寸
that.layBox.css({
width: options.width
,height: options.height
width: options.width,
height: options.height
});
that.layData.css({
height: function(){
@ -240,20 +240,21 @@ layui.define(['laytpl', 'form'], function(exports){
// 同步复选框和按钮状态
Class.prototype.renderCheckBtn = function(obj){
var that = this
,options = that.config;
var that = this;
var options = that.config;
obj = obj || {};
that.layBox.each(function(_index){
var othis = $(this)
,thisDataElem = othis.find('.'+ ELEM_DATA)
,allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]')
,listElemCheckbox = thisDataElem.find('input[type="checkbox"]');
var othis = $(this);
var thisDataElem = othis.find('.'+ ELEM_DATA);
var allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]');
var listElemCheckbox = thisDataElem.find('input[type="checkbox"]');
// 同步复选框和按钮状态
var nums = 0
,haveChecked = false;
var nums = 0;
var haveChecked = false;
listElemCheckbox.each(function(){
var isHide = $(this).data('hide');
if(this.checked || this.disabled || isHide){
@ -288,9 +289,10 @@ layui.define(['laytpl', 'form'], function(exports){
// 同步 value 属性值
Class.prototype.setValue = function(){
var that = this
,options = that.config
,arr = [];
var that = this;
var options = that.config;
var arr = [];
that.layBox.eq(1).find('.'+ ELEM_DATA +' input[type="checkbox"]').each(function(){
var isHide = $(this).data('hide');
isHide || arr.push(this.value);
@ -302,9 +304,9 @@ layui.define(['laytpl', 'form'], function(exports){
// 解析数据
Class.prototype.parseData = function(callback){
var that = this
,options = that.config
,newData = [];
var that = this;
var options = that.config;
var newData = [];
layui.each(options.data, function(index, item){
// 解析格式
@ -328,9 +330,9 @@ layui.define(['laytpl', 'form'], function(exports){
// 获得右侧面板数据
Class.prototype.getData = function(value){
var that = this
,options = that.config
,selectedData = [];
var that = this;
var options = that.config;
var selectedData = [];
that.setValue();
@ -347,21 +349,21 @@ layui.define(['laytpl', 'form'], function(exports){
// 执行穿梭
Class.prototype.transfer = function (_index, elem) {
var that = this
,options = that.config
,thisBoxElem = that.layBox.eq(_index)
,arr = []
var that = this;
var options = that.config;
var thisBoxElem = that.layBox.eq(_index);
var arr = [];
if (!elem) {
// 通过按钮触发找到选中的进行移动
thisBoxElem.each(function(_index){
var othis = $(this)
,thisDataElem = othis.find('.'+ ELEM_DATA);
var othis = $(this);
var thisDataElem = othis.find('.'+ ELEM_DATA);
thisDataElem.children('li').each(function(){
var thisList = $(this)
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
,isHide = thisElemCheckbox.data('hide');
var thisList = $(this);
var thisElemCheckbox = thisList.find('input[type="checkbox"]');
var isHide = thisElemCheckbox.data('hide');
if(thisElemCheckbox[0].checked && !isHide){
thisElemCheckbox[0].checked = false;
@ -377,8 +379,8 @@ layui.define(['laytpl', 'form'], function(exports){
});
} else {
// 双击单条记录移动
var thisList = elem
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
var thisList = elem;
var thisElemCheckbox = thisList.find('input[type="checkbox"]');
thisElemCheckbox[0].checked = false;
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
@ -402,14 +404,14 @@ layui.define(['laytpl', 'form'], function(exports){
// 事件
Class.prototype.events = function(){
var that = this
,options = that.config;
var that = this;
var options = that.config;
// 左右复选框
that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){
var thisElemCheckbox = $(this).prev()
,checked = thisElemCheckbox[0].checked
,thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA);
var thisElemCheckbox = $(this).prev();
var checked = thisElemCheckbox[0].checked;
var thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA);
if(thisElemCheckbox[0].disabled) return;
@ -428,22 +430,32 @@ layui.define(['laytpl', 'form'], function(exports){
// 双击穿梭
that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
var elemThis = $(this)
,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
,thisDataElem = elemThis.parent()
,thisBoxElem = thisDataElem.parent()
var elemThis = $(this);
var thisElemCheckbox = elemThis.children('input[type="checkbox"]');
var thisDataElem = elemThis.parent();
var thisBoxElem = thisDataElem.parent();
var index = thisBoxElem.data('index');
if(thisElemCheckbox[0].disabled) return;
that.transfer(thisBoxElem.data('index'), elemThis);
// 根据 dblclick 回调函数返回值决定是否执行穿梭 --- 2.9.3+
var ret = typeof options.dblclick === 'function' ? options.dblclick({
elem: elemThis,
data: that.getData([thisElemCheckbox[0].value])[0],
index: index
}) : null;
if(ret === false) return;
that.transfer(index, elemThis);
})
// 穿梭按钮事件
that.layBtn.on('click', function(){
var othis = $(this)
,_index = othis.data('index')
if(othis.hasClass(DISABLED)) return;
var othis = $(this);
var _index = othis.data('index');
if(othis.hasClass(DISABLED)) return;
that.transfer(_index);
});

Write Preview
Loading…
Cancel
Save