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

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

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

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/transfer/detail/options.md

@@ -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>

src/modules/transfer.js

@@ -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 +'">'
+    return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">',
-      ,'<div class="layui-transfer-header">'
+      '<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) +'\' }}">'
+        '<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>'
+      '</div>',
-      ,'{{# if(d.data.showSearch){ }}'
+      '{{# if(d.data.showSearch){ }}',
-      ,'<div class="layui-transfer-search">'
+      '<div class="layui-transfer-search">',
-        ,'<i class="layui-icon layui-icon-search"></i>'
+        '<i class="layui-icon layui-icon-search"></i>',
-        ,'<input type="text" class="layui-input" placeholder="关键词搜索">'
+        '<input type="text" class="layui-input" placeholder="关键词搜索">',
-      ,'</div>'
+      '</div>',
-      ,'{{# } }}'
+      '{{# } }}',
-      ,'<ul class="layui-transfer-data"></ul>'
+      '<ul class="layui-transfer-data"></ul>',
-    ,'</div>'].join('');
+    '</div>'].join('');
   };
   
   // 主模板
-  var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">'
+  var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">',
-    ,TPL_BOX({
+    TPL_BOX({
-      index: 0
+      index: 0,
-      ,checkAllName: 'layTransferLeftCheckAll'
+      checkAllName: 'layTransferLeftCheckAll'
-    })
+    }),
-    ,'<div class="layui-transfer-active">'
+    '<div class="layui-transfer-active">',
-      ,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">'
+      '<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>'
+        '<i class="layui-icon layui-icon-next"></i>',
-      ,'</button>'
+      '</button>',
-      ,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">'
+      '<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>'
+        '<i class="layui-icon layui-icon-prev"></i>',
-      ,'</button>'
+      '</button>',
-    ,'</div>'
+    '</div>',
-    ,TPL_BOX({
+    TPL_BOX({
-      index: 1
+      index: 1,
-      ,checkAllName: 'layTransferRightCheckAll'
+      checkAllName: 'layTransferRightCheckAll'
-    })
+    }),
-  ,'</div>'].join('');
+  '</div>'].join('');
 
   // 构造器
   var Class = function(options){
@@ -147,8 +147,8 @@ layui.define(['laytpl', 'form'], function(exports){
       open: '{{', // 标签符前缀
       close: '}}' // 标签符后缀
     }).render({
-      data: options
+      data: options,
-      ,index: that.index //索引
+      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
+      width: options.width,
-      ,height: options.height
+      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
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
     
     obj = obj || {};
     
     that.layBox.each(function(_index){
-      var othis = $(this)
+      var othis = $(this);
-      ,thisDataElem = othis.find('.'+ ELEM_DATA)
+      var thisDataElem = othis.find('.'+ ELEM_DATA);
-      ,allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]')
+      var allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]');
-      ,listElemCheckbox =  thisDataElem.find('input[type="checkbox"]');
+      var listElemCheckbox =  thisDataElem.find('input[type="checkbox"]');
       
       // 同步复选框和按钮状态
-      var nums = 0
+      var nums = 0;
-      ,haveChecked = false;
+      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
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,arr = [];
+    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
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,newData = [];
+    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
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,selectedData = [];
+    var selectedData = [];
     
     that.setValue();
     
@@ -347,21 +349,21 @@ layui.define(['laytpl', 'form'], function(exports){
 
   // 执行穿梭
   Class.prototype.transfer = function (_index, elem) {
-    var that = this
+    var that = this;
-      ,options = that.config
+    var options = that.config;
-      ,thisBoxElem = that.layBox.eq(_index)
+    var thisBoxElem = that.layBox.eq(_index);
-      ,arr = []
+    var arr = [];
 
     if (!elem) {
       // 通过按钮触发找到选中的进行移动
       thisBoxElem.each(function(_index){
-        var othis = $(this)
+        var othis = $(this);
-          ,thisDataElem = othis.find('.'+ ELEM_DATA);
+        var thisDataElem = othis.find('.'+ ELEM_DATA);
 
         thisDataElem.children('li').each(function(){
-          var thisList = $(this)
+          var thisList = $(this);
-            ,thisElemCheckbox = thisList.find('input[type="checkbox"]')
+          var thisElemCheckbox = thisList.find('input[type="checkbox"]');
-            ,isHide = thisElemCheckbox.data('hide');
+          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
+      var thisList = elem;
-        ,thisElemCheckbox = thisList.find('input[type="checkbox"]')
+      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
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
     
     // 左右复选框
     that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){ 
-      var thisElemCheckbox = $(this).prev()
+      var thisElemCheckbox = $(this).prev();
-      ,checked = thisElemCheckbox[0].checked
+      var checked = thisElemCheckbox[0].checked;
-      ,thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA);
+      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)
+      var elemThis = $(this);
-        ,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
+      var thisElemCheckbox = elemThis.children('input[type="checkbox"]');
-        ,thisDataElem = elemThis.parent()
+      var thisDataElem = elemThis.parent();
-        ,thisBoxElem = thisDataElem.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)
+      var othis = $(this);
-      ,_index = othis.data('index')
+      var _index = othis.data('index');
-      if(othis.hasClass(DISABLED)) return;
 
+      if(othis.hasClass(DISABLED)) return;
       that.transfer(_index);
     });