feature: 下拉选择列表支持多选 #559

docs/zh/guide/sheet.md

@@ -1344,8 +1344,10 @@ options.data示例如下：
     + `"date"`(日期)
     + `"validity"`(有效性)；
   + {String | Null} [type2]: 条件类型；
-    + 类型`type`值为`"dropdown"/"checkbox"`时，`type2`值可为        
+    + 类型`type`值为`"checkbox"`时，`type2`值可为        
         + `null`；
+    + 类型`type`值为`"dropdown"`时，`type2`值可为
+        + `true` （多选） `false` （单选）
     + 类型`type`值为`"number"/"number_integer"/"number_decimal"/"text_length"`时，`type2`值可为
       + `"bw"`(介于)
       + `"nb"`(不介于)

src/controllers/dataVerificationCtrl.js

@@ -114,6 +114,10 @@ const dataVerificationCtrl = {
                                             <input class="formulaInputFocus data-verification-value1" placeholder="${dvText.placeholder1}" spellcheck="false">
                                             <i class="fa fa-table" aria-hidden="true" title="${dvText.selectCellRange}"></i>
                                         </div>
+                                        <div class="multi">
+                                            <input type="checkbox" id="data-verification-multi" class="data-verification-multi">
+                                            <label for="data-verification-multi">${dvText.allowMultiSelect}</label>
+                                        </div>
                                     </div>
                                     <div class="show-box-item show-box-item-checkbox">
                                         <div class="check-box">
@@ -257,9 +261,16 @@ const dataVerificationCtrl = {
             e.stopPropagation();
         });
         $(document).off("click.dropdownListItem").on("click.dropdownListItem", "#luckysheet-dataVerification-dropdown-List .dropdown-List-item", function(e) {
-            $("#luckysheet-dataVerification-dropdown-List").hide();
-            
+            var $item = $(this);
             let value = e.target.innerText;
+            if ($item.hasClass('multi')) {
+                $item.toggleClass('checked');
+                value = $.map($("#luckysheet-dataVerification-dropdown-List").children().filter('.checked'), function(el) {
+                    return el.innerText;
+                }).join(',');
+            } else {
+                $("#luckysheet-dataVerification-dropdown-List").hide();
+            }
             let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
             let rowIndex = last.row_focus;
             let colIndex = last.column_focus;
@@ -437,6 +448,8 @@ const dataVerificationCtrl = {
                 }
 
                 $("#luckysheet-dataVerification-dialog .show-box-item-dropdown .data-verification-value1").val(value1);
+                
+                $('#luckysheet-dataVerification-dialog #data-verification-multi').prop('checked', item.type2 ? true : false);
             }
             else if(value == 'checkbox'){
                 $("#luckysheet-dataVerification-dialog .show-box .show-box-item-checkbox").show();
@@ -635,6 +648,7 @@ const dataVerificationCtrl = {
                     tooltip.info('<i class="fa fa-exclamation-triangle"></i>', dvText.tooltipInfo1);
                     return;
                 }
+                type2 = $("#luckysheet-dataVerification-dialog #data-verification-multi").is(':checked');
             }
             else if(type == 'checkbox'){
                 value1 = $("#luckysheet-dataVerification-dialog .show-box-item-checkbox .data-verification-value1").val().trim();
@@ -839,6 +853,7 @@ const dataVerificationCtrl = {
         if(item.type == 'dropdown'){
             $("#luckysheet-dataVerification-dialog .show-box .show-box-item-dropdown").show();
             $("#luckysheet-dataVerification-dialog .show-box-item-dropdown .data-verification-value1").val(item.value1);
+            $('#luckysheet-dataVerification-dialog #data-verification-multi').prop('checked', item.type2 ? true : false);
         }
         else if(item.type == 'checkbox'){
             $("#luckysheet-dataVerification-dialog .show-box .show-box-item-checkbox").show();
@@ -1270,6 +1285,13 @@ const dataVerificationCtrl = {
         if(type == 'dropdown'){
             let list = _this.getDropdownList(value1);
 
+            // 多选的情况 检查每个都在下拉列表中
+            if(type2 && cellValue){
+                return cellValue.split(',').every(function (i) {
+                    return list.indexOf(i) !== -1;
+                });
+            }
+
             let result = false;
 
             for(let i = 0; i < list.length; i++){
@@ -1464,9 +1486,19 @@ const dataVerificationCtrl = {
         let list = _this.getDropdownList(item.value1);
 
         let optionHtml = '';
+        if (item.type === 'dropdown' && item.type2) {
+            // 下拉多选的情况下 将已经选择的标出来
+            let cellValue = getcellvalue(rowIndex, colIndex, null);
+            let valueArr = isRealNull(cellValue) ? [] : cellValue.split(',');
+            list.forEach(i => {
+                let checked = valueArr.indexOf(i) !== -1;
+                optionHtml += `<div class="dropdown-List-item  luckysheet-mousedown-cancel multi${checked ? ' checked': ''}">${i}</div>`;
+            });
+        } else {
             list.forEach(i => {
                 optionHtml += `<div class="dropdown-List-item luckysheet-mousedown-cancel">${i}</div>`;
-        })
+            });
+        }
 
         $("#luckysheet-dataVerification-dropdown-List")
         .html(optionHtml)

src/css/luckysheet-core.css

@@ -7200,6 +7200,14 @@ fieldset[disabled] .btn-danger.focus {
     cursor: pointer;
     color: #6598F3;
 }
+#luckysheet-dataVerification-dialog .box-item .multi {
+    margin-top: 10px;
+    line-height: 30px;
+    font-size: 12px;
+}
+#luckysheet-dataVerification-dialog .box-item .multi input {
+    vertical-align: text-top;
+}
 #luckysheet-dataVerification-dialog .box-item .show-box{
     margin-top: 10px;
 }
@@ -7303,6 +7311,24 @@ fieldset[disabled] .btn-danger.focus {
     box-sizing: border-box;
     cursor: pointer;
 }
+
+#luckysheet-dataVerification-dropdown-List .dropdown-List-item.multi {
+    padding-left: 0;
+}
+#luckysheet-dataVerification-dropdown-List .dropdown-List-item.multi:before{
+    content: "";
+    width: 14px;
+    font-family: "iconfont" !important;
+    font-size: 12px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    margin-right: 2px;
+}
+#luckysheet-dataVerification-dropdown-List .dropdown-List-item.multi.checked:before{
+    content: "\e7c8"; 
+}
 #luckysheet-dataVerification-dropdown-List .dropdown-List-item:hover{
     background-color: #E1E1E1;
 }

src/locale/en.js

@@ -9733,6 +9733,7 @@ export default {
         selectCellRange: 'Click to select a cell range',
         selectCellRange2: 'Please select a range of cells',
         verificationCondition: 'Verification condition',
+        allowMultiSelect: "Allow multiple selection",
         dropdown: 'drop-down list',
         checkbox: 'Checkbox',
         number: 'Number',

src/locale/es.js

@@ -9716,6 +9716,7 @@ export default {
         selectCellRange: 'Haz clic para seleccionar un rango de celdas',
         selectCellRange2: 'Selecciona un rango de celdas',
         verificationCondition: 'Condición de verificación',
+        allowMultiSelect: "Permitir selección múltiple",
         dropdown: 'lista desplegable',
         checkbox: 'Casilla de verificación',
         number: 'Número',

src/locale/zh.js

@@ -9976,6 +9976,7 @@ export default {
         selectCellRange: '点击选择单元格范围',
         selectCellRange2: '请选择单元格范围',
         verificationCondition: '验证条件',
+        allowMultiSelect: '是否允许多选',
         dropdown: '下拉列表',
         checkbox: '复选框',
         number: '数字',

src/locale/zh_tw.js

@@ -9969,6 +9969,7 @@ export default {
         selectCellRange      : '點擊選擇儲存格範圍',
         selectCellRange2     : '請選擇儲存格範圍',
         verificationCondition: '驗證條件',
+        allowMultiSelect     : "是否允許多選",
         dropdown             : '下拉清單',
         checkbox             : '核取方塊',
         number               : '數位',