multi.select 增加远程获取数据的方法

doc/source/doc.js

@@ -108,7 +108,7 @@ const doc = (isDev, callback) => {
   // 组件文档
   CATES.forEach((c) => {
     const components = getComponents(c.cate).filter((comp) => {
-      if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview)$/.test(comp)) {
+      if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview|MultiSelect)$/.test(comp)) {
         return false;
       }
 

src/js/components/form/KLMultiSelect/index.html

@@ -40,13 +40,13 @@
             <ul r-animation="on: leave; class: animated fadeOutX fast;">
                 <kl-input value={search[level]}  readonly={readonly}></kl-input>
                 {#list tree[level] | search : search[level],level as cate}
-                {#if !filter || (filter && filter(cate))}
+                {#if !filter || (filter && filter(cate, cate_index))}
                 <li class="f-csp {cate.active?'active':''}" on-click={this.viewCate(cate, level)}>
                 	{#if multiple}
                 	<kl-check checked={cate[checkKey]} on-check={this.checkCate(cate, level, cate[checkKey])}  readonly={readonly} ></kl-check>
                     {/if}
                     <span {#if !multiple} class="cateName"  {/if}>{cate[nameKey]}</span>
-                    {#if cate[childKey] && cate[childKey].length}<span class="more" r-class={{onlyChild:!multiple && !onlyChild}} {#if !multiple && !onlyChild} on-click={this.viewCate(cate, level, true, $event)} {/if}><kl-icon type="chevron_right" /></span>{/if}
+                    {#if (cate[childKey] && cate[childKey].length) || (server && cate[hasChildKey])}<span class="more" r-class={{onlyChild:!multiple && !onlyChild}} {#if !multiple && !onlyChild} on-click={this.viewCate(cate, level, true, $event)} {/if}><kl-icon type="chevron_right" /></span>{/if}
                 </li>
                 {/if}
                 {/list}

src/js/components/form/KLMultiSelect/index.js

@@ -23,6 +23,9 @@ const _ = require('../../../ui-base/_');
  * @param {string}          [options.data.rootValue=null]           <=> 模式2种的选择值(具体见文档 demo)
  * @param {string}          [options.data.showRoot=false]           => 是否用模式2(具体见文档 demo)，这种模式下如果 value 和 rootValue 都传入，回显以 rootValue 为准
  * @param {object}          [options.data.selected=null]            <=> 当前选择项
+ * @param {object}          [options.data.server=false]             => 是否远程获取数据
+ * @param {object}          [options.data.hasChildKey=hasChild]     => 远程获取数据时标识是否有子级的字段的 key
+ * @param {object}          [options.data.serverFn]                 => 远程获取数据的方法，传入当前的 item，返回一个 promise，promose.resolve(list)
  * @param {string}          [options.data.placeholder='']           => 默认提示
  * @param {string}          [options.data.separator=,]              => 多选时value分隔符
  * @param {boolean}         [options.data.showPath=false]           => 单选时是否展示路径
@@ -50,6 +53,8 @@ const KLMultiSelect = Dropdown.extend({
       selected: [],
       rootSelected: [],
       separator: ',',
+      server: false,
+      hasChildKey: 'hasChild',
       placeholder: '',
       key: 'id',
       nameKey: 'name',
@@ -231,6 +236,17 @@ const KLMultiSelect = Dropdown.extend({
     if (data.disabled || data.readonly) {
       return;
     }
+    if (data.server && cate[data.hasChildKey] && (!cate[data.childKey] || !cate[data.childKey].length)) {
+      data.serverFn(cate).then((list) => {
+        cate[data.childKey] = list;
+        this.dealCate(cate, level, show);
+      });
+    } else {
+      this.dealCate(cate, level, show);
+    }
+  },
+  dealCate(cate, level, show) {
+    const data = this.data;
     data.tree[level + 1] = cate[data.childKey] || [];
     // 将本级和下一级的active都置为false
     for (let i = level; i < level + 2; i += 1) {

src/js/components/form/KLMultiSelect/index.md

@@ -426,4 +426,59 @@ var component = new NEKUI.Component({
     },
 });
 ```
+<!-- demo_end -->
+
+<!-- demo_start -->
+### 远程数据
+
+server 为 true
+
+serverFn 是一个接受当前 item， return promise 的 方法，在 resolve 里面传入下一级的 list，并且在 list 里面的每一项都需要一个 key 来判断是否还有下一级，key 默认为 hasChild，可以用 hasChildKey 来覆盖。
+
+<div class="m-example"></div>
+
+```xml
+<kl-multi-select 
+    source={source} 
+    value={value}  
+    server={server}
+    serverFn={serverFn}
+    hasChildKey={hasChildKey}
+    />
+<p>选择的是：{value}</p>
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template,
+    data: {
+        source: [
+            {name: '母婴儿童', id: 1, hasChild: true},
+            {name: '美容彩妆', id: 2, hasChild: true},
+            {name: '服饰鞋包', id: 3, hasChild: true}
+        ],
+        value: '',
+        server: true,
+        hasChildKey: 'hasChild',
+        serverFn: function(item) {
+            return new Promise(function(resolve, reject) {
+                setTimeout(function() {
+                    var list = [
+                        {name: '母婴儿童', id: 1, hasChild: true},
+                        {name: '美容彩妆', id: 2, hasChild: true},
+                        {name: '服饰鞋包', id: 3, hasChild: true}
+                    ];
+                    resolve(list)
+                }, 0)
+                // request(url, {
+                //     data: item.id,
+                //     onload: function(json) {
+                //         resolve(json.result.list);
+                //     }
+                // })
+            })
+        }
+    }
+});
+```
 <!-- demo_end -->