v3.6

Author: hikki

resources/assets/component.css

@@ -158,9 +158,10 @@
     flex-wrap: wrap;
     padding: 0;
     border-radius: 3px;
+    background: #ededed;
 }
 .dlp-dot-menu>.menu-list .dot-search{height: 24px}
-.dlp-dot-menu>.menu-list>.list{width:100%;max-height: 150px;overflow-y: auto;}
+.dlp-dot-menu>.menu-list>.list{width:100%;max-height: 150px;overflow-y: auto;padding: 0 0 2px 0;}
 .dlp-dot-menu>.menu-list .option{
     display: flex;
     margin: 0 2px 0 2px;
@@ -309,7 +310,7 @@
 .dlp-table .dlp-input{height: 24px!important;}
 .dlp-table .dlp-tbody{display:block;height:100%;overflow-y:scroll!important;background: rgb(50 50 50 / 80%);}
 .dlp-table .dlp-tr{display:table;width:100%;table-layout:fixed;position: relative;}
-.dlp-tr>th,.dlp-tr>td{overflow: hidden;padding:  7px 3px 7px 3px;text-align: left}
+.dlp-tr>th,.dlp-tr>td{padding:  7px 3px 7px 3px;text-align: left}
 .dlp-table .dlp-thead>.dlp-tr{height: 45px;border-bottom: 1px solid #060606;}
 .dlp-table .dlp-tbody>.dlp-tr{background:#1e1e1e}
 .dlp-table .dlp-tbody>.dlp-tr:nth-child(even){background:#2a2a2a}

resources/assets/component.js

@@ -244,7 +244,7 @@ window.ComponentDot = class {
         menu_select.insertAdjacentHTML('afterbegin',`<div class="dlp dlp-text">${this.menu_placeholder}</div><div>▼</div>`);
 
         let menu_list = document.createElement('div');
-        menu_list.className = 'dlp-input menu-list';
+        menu_list.className = 'menu-list';
         let search_box = document.createElement('div');
         search_box.className = 'search-box';
         let input = document.createElement('input');
@@ -840,7 +840,7 @@ window.ComponentLine = class {
             insert: true
         }, options);
         /*head foot*/
-        let foot = this.makeHead();
+        let foot = this.makeHeadFoot();
         /*hidden data container*/
         this.DATA_INPUT = document.createElement('input');
         this.DATA_INPUT.setAttribute('name', name);
@@ -857,7 +857,7 @@ window.ComponentLine = class {
         if (this.OPTIONS.sortable) this.sortable();
     }
 
-    makeHead() {
+    makeHeadFoot() {
         let head = '<tr class="dlp-tr">';
         let foot = '<tr class="dlp-tr">';
         let columns = this.COLUMNS;
@@ -1053,6 +1053,9 @@ window.ComponentLine = class {
                 }, false);
                 td.appendChild(input);
                 break;
+            case 'select':
+                td.append(this.menuMake([],settings.options,settings.options_limit,settings.name));
+                break;
             default:
                 td.insertAdjacentHTML('afterbegin', `<p style="display: block;" class="dlp text-white dlp-text" title="${value}">${value}</p>`);
                 break;
@@ -1097,6 +1100,61 @@ window.ComponentLine = class {
         td.className = 'operate-column';
     }
 
+    menuMake(selected, select,limit,placeholder){
+        let menu = document.createElement('div');
+        menu.className = 'dlp-dot-menu';
+
+        let menu_select = document.createElement('div');
+        menu_select.className = 'dlp-input dlp-dot-menu-select';
+        menu_select.insertAdjacentHTML('afterbegin',`<div class="dlp dlp-text">${placeholder}</div><div>▼</div>`);
+
+        let menu_list = document.createElement('div');
+        menu_list.className = 'menu-list';
+        let search_box = document.createElement('div');
+        search_box.className = 'search-box';
+        let input = document.createElement('input');
+        input.className = 'dlp dlp-input dot-search';
+        input.setAttribute('placeholder','搜索');
+
+        let list = document.createElement('div');
+        list.className = 'list dlp-scroll';
+
+        let check = _component.check;
+        check = check.replace(`width="16" height="16"`,`width="12" height="12"`);
+        this.id_line_hash = [];
+        let line = 0;
+        for (let id in select){
+            if(!select.hasOwnProperty(id))continue;
+            this.id_line_hash[id] = line;
+            line++;
+            let option = document.createElement('div');
+            option.className = 'option';
+            option.setAttribute('data-id',id);
+            option.insertAdjacentHTML('afterbegin',`<div class="dlp dlp-text" data-v="${id}">${select[id]}</div><div></div>`);
+            option.addEventListener('click', ()=>{
+                id = parseInt(id);
+
+            }, false);
+            list.append(option);
+        }
+
+        menu.append(menu_select);
+        search_box.append(input);
+        menu_list.append(search_box);
+        menu_list.append(list);
+        menu.append(menu_list);
+        menu.addEventListener('click',()=>{
+            menu_list.style.display = 'flex';
+        });
+        menu.addEventListener('mouseleave',()=>{
+            menu_list.style.display = 'none';
+            let search = this.DOM.querySelector(`.dot-search`);
+            search.value = '';
+        });
+
+        return menu;
+    }
+
     sortable() {
         let object = this;
         new ComponentSortable(this.TBODY_DOM, function (sort) {

test/index.html

@@ -185,7 +185,7 @@
 </div>
 </body>
 <script>
-    new ComponentDot('test', [2, 5, 10], {
+    new ComponentDot('test', {
         "2": "西宮このみ",
         "5": "瀨名光莉",
         "7": "日菜々はのん",
@@ -342,9 +342,9 @@
         "298": "椎葉みくる",
         "299": "佐伯奈々",
         "300": "小谷みのり"
-    });
+    }, [2, 5, 10]);
 
-    new ComponentDot('test7', [], {
+    new ComponentDot('test7', {
         "2": "西宮このみ",
         "5": "瀨名光莉",
         "7": "日菜々はのん",
@@ -359,7 +359,7 @@
         "31": "AIKA -",
         "33": "永井みひな",
         "36": "河北彩花"
-    },30,true,'请选择');
+    },[],1,true,'请选择');
 
     new ComponentLine("test2", {
             "name": {"name": "名称", "type": "input"},
@@ -844,7 +844,7 @@
     ];
     let cascadeData2 = JSON.parse(JSON.stringify(cascadeData));
 
-    new ComponentCascadeDot('test4', [1102, 542], cascadeData);
+    new ComponentCascadeDot('test4', cascadeData, [1102, 542]);
 
     new ComponentCascadeLine('test5', cascadeData2,'http://url...');
 </script>