v1.0.8

2019-10-16 23:22:54 +08:00
parent eaa25889c3
commit 9416e64e7e
22 changed files with 448 additions and 65 deletions
--- a/docs/assets/common.less
+++ b/docs/assets/common.less
@@ -178,6 +178,9 @@ button, input, select, textarea {
 	display: inline-block;
 	width: 300px;
 }
+.xm-select-demo-alert:extend(.xm-select-demo){
+    margin: 20px;
+}

 .btn{
 	outline: 0;
@@ -206,10 +209,6 @@ button, input, select, textarea {
 }

 .demo-ZM03{
-    .layui-table-cell{
-        height: auto;
-    }
-    
    table{
        margin-bottom: -1px !important;
        border-collapse: unset !important;
@@ -227,4 +226,4 @@ button, input, select, textarea {
    display: flex;
    align-items: center;
    justify-content: center;
-}
+}
--- a/docs/mds/XM05.md
+++ b/docs/mds/XM05.md
@@ -140,14 +140,13 @@ var demo5 = xmSelect.render({
    remoteMethod: function(val, cb, show){
        axios({
            method: 'get',
-            url: 'https://easy-mock.com/mock/5da028e2cda1720dffee5f85/xm-select/search',
+            url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
            params: {
                keyword: val,
            }
        }).then(response => {
            var res = response.data;
            cb(res.data)
-            demo1.setValue([ 1, 2, 3 ], show) 
        }).catch(err => {
            cb([]);
        });
@@ -157,3 +156,28 @@ var demo5 = xmSelect.render({
 </script>
 ```
 :::
+
+
+###  搜索完成回调
+
+:::demo 
+```html
+<div id="demo6" class="xm-select-demo"></div>
+
+<script>
+var demo6 = xmSelect.render({
+    el: '#demo6', 
+    filterable: true,
+    filterDone: function(val){
+        alert('搜索完毕')
+    },
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/XM16.md
+++ b/docs/mds/XM16.md
@@ -12,8 +12,8 @@
 <script>
 var demo1 = xmSelect.render({
    el: '#demo1', 
-    on({ arr, item, selected }){
-        alert(`name: ${item.name}, 状态: ${selected}`)
+    on({ arr, change, isAdd }){
+        alert(`已有: ${arr.length} 变化: ${change.length}, 状态: ${isAdd}`)
    },
    data: [
        {name: '张三', value: 'zhangsan', selected: true},
@@ -37,8 +37,16 @@ var demo1 = xmSelect.render({
 <script>
 var demo2 = xmSelect.render({
    el: '#demo2', 
-    on({ arr, item, selected }){
-        if(selected){
+    toolbar: {
+        show: true
+    },
+    on({ arr, change, isAdd }){
+        //arr:  当前多选已选中的数据
+        //change, 此次选择变化的数据,数组
+        //isAdd, 此次操作是新增还是删除
+        console.log(arr);
+        if(isAdd){
+            var item = change[0];
            var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
            if(index != -1){
                arr.splice(index, 1);
--- a/docs/mds/XM21.md
+++ b/docs/mds/XM21.md
@@ -99,3 +99,38 @@ var demo3 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 分组的单击事件
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    toolbar:{
+        show: true,
+    },
+    height: '500px',
+    data: [
+        {name: '选中', optgroup: true, click: 'SELECT'},
+        {name: '张三', value: 1},
+        {name: '李四', value: 2, disabled: true},
+        {name: '清空', optgroup: true, click: 'CLEAR'},
+        {name: '王五', value: 3, disabled: true},
+        {name: '苹果', value: 4, selected: true},
+        {name: '自动', optgroup: true, click: 'AUTO'},
+        {name: '香蕉', value: 5},
+        {name: '葡萄', value: 6},
+        {name: '自定义', optgroup: true, click: function(item){
+            alert('自定义的, 想干嘛干嘛');
+        }},
+        {name: '小米', value: 7},
+        {name: '华为', value: 8},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/ZM01.md
+++ b/docs/mds/ZM01.md
@@ -8,9 +8,13 @@
 :::demo 
 ```html
 <div id="demo1" class="xm-select-demo"></div>
+<br/><br/>
 <button class="btn" id="demo1-test1">赋值张三</button>
 <button class="btn" id="demo1-test2">赋值张三(value方式)</button>
-<button class="btn" id="demo1-test3">清空</button>
+<button class="btn" id="demo1-test3">追加赋值李四</button>
+<br/><br/>
+<button class="btn" id="demo1-test4">清除李四</button>
+<button class="btn" id="demo1-test5">清空</button>
 <pre id="demo1-result"></pre>

 <script>
@@ -25,8 +29,8 @@ var demo1 = xmSelect.render({

 document.getElementById('demo1-test1').onclick = function(){
    demo1.setValue([
-		{name: '张三', value: 1},
-	])
+        {name: '张三', value: 1},
+    ])
 };

 document.getElementById('demo1-test2').onclick = function(){
@@ -34,6 +38,14 @@ document.getElementById('demo1-test2').onclick = function(){
 };

 document.getElementById('demo1-test3').onclick = function(){
+    demo1.append([ 2 ]);
+};
+
+document.getElementById('demo1-test4').onclick = function(){
+    demo1.delete([ 2 ])
+};
+
+document.getElementById('demo1-test5').onclick = function(){
    demo1.setValue([ ])
 };

--- a/docs/mds/ZM03.md
+++ b/docs/mds/ZM03.md
@@ -15,15 +15,15 @@ layui.use('table', function() {
    //第一个实例
    table.render({
        elem: '#demo',
-        height: 312,
-        page: true, //开启分页
+        page: true, //开启分页
+        height: 500,
        cols: [
            [ //表头
                { field: 'id', title: 'ID', width: 80, sort: true }, 
                { field: 'username', title: '用户名', width: 80 }, 
                { field: 'sex', title: '性别', width: 80, sort: true }, 
                { field: 'city', title: '城市', width: 80 }, 
-                { field: 'sign', title: '爱好', width: 177, templet: function(d){
+                { field: 'sign', title: '爱好', width: 200, templet: function(d){
                    return '<div id="XM-' + d.id + '" ></div>'
                } }, 
                { field: 'experience', title: '积分', width: 80, sort: true }, 
@@ -45,9 +45,17 @@ layui.use('table', function() {
            {"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
        ],
        done: function(res){
+            //修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
+            var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
+            for(var i = 0 ; i < cells.length ; i++ ){
+                cells[i].style.overflow = 'unset';
+                cells[i].style.height = 'auto';
+            }
+            //渲染多选
            res.data.forEach(item =>  {
                var xm = xmSelect.render({
                    el: '#XM-' + item.id, 
+                    autoRow: true,
                    data: [
                        {name: '张三', value: 1},
                        {name: '李四', value: 2},
--- a/docs/mds/ZM04.md
+++ b/docs/mds/ZM04.md
@@ -0,0 +1,35 @@
+## 远程搜索
+
+:::demo 
+```html
+<div id="demo1"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    autoRow: true,
+    toolbar: { show: true },
+	filterable: true,
+	remoteSearch: true,
+	remoteMethod: function(val, cb, show){
+		//这里如果val为空, 则不触发搜索
+		if(!val){
+			return cb([]);
+		}
+	    axios({
+	        method: 'get',
+	        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+	        params: {
+	            keyword: val,
+	        }
+	    }).then(response => {
+	        var res = response.data;
+	        cb(res.data)
+	    }).catch(err => {
+	        cb([]);
+	    });
+	},
+})
+</script>
+```
+:::
--- a/docs/mds/ZM05.md
+++ b/docs/mds/ZM05.md
@@ -0,0 +1,56 @@
+## 动态数据
+
+
+### 本地数据动态赋值
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: []
+})
+
+demo1.update({
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3, disabled: true},
+    ]
+})
+
+</script>
+```
+:::
+
+
+### 远程数据动态赋值
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    toolbar: {show: true},
+    data: []
+})
+
+axios({
+    method: 'get',
+    url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+}).then(response => {
+    var res = response.data;
+    
+    demo2.update({
+        data: res.data,
+        autoRow: true,
+    })
+});
+
+</script>
+```
+:::
--- a/docs/mds/ZM06.md
+++ b/docs/mds/ZM06.md
@@ -0,0 +1,33 @@
+## 远程搜索
+
+
+### layer弹出框
+
+:::demo 
+```html
+<button class="btn" id="demo1-btn">弹出多选</button>
+
+<script>
+document.getElementById('demo1-btn').onclick = function(){
+    layer.open({
+        type: 1,
+        title: '多选',
+        content: '<div id="demo1" class="xm-select-demo-alert"></div>',
+        success: function(layero, index){
+            //这里因为内容过少, 会被遮挡, 所以简单修改了下样式
+            document.getElementById('layui-layer' + index).getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset';
+            //渲染多选
+            var demo1 = xmSelect.render({
+                el: '#demo1', 
+                data: [
+                    {name: '张三', value: 1, selected: true},
+                    {name: '李四', value: 2, disabled: true},
+                    {name: '王五', value: 3},
+                ]
+            })
+        }
+    });
+}
+</script>
+```
+:::
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -15,6 +15,7 @@
 | searchTips        | 搜索提示 | string           |    -    |    请选择    |
 | delay             | 搜索延迟 ms | int           |    -    |    500    |
 | filterMethod      | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key           |    -    |    -    |
+| filterDone        | 搜索完成函数 | function(val)  val: 当前搜索值           |    -    |    -    |
 | remoteSearch      | 是否开启自定义搜索 (远程搜索)| boolean           |    true / false   |    false    |
 | remoteMethod      | 自定义搜索回调函数 | function(val, cb, show)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态         |    -    |    -    |
 | direction         | 下拉方向| string           |    auto / up / down   |    auto    |
@@ -31,7 +32,7 @@
 | show              | 展开下拉的回调 | function           |   -  |    -    |
 | hide              | 隐藏下拉的回调 | function           |   -  |    -    |
 | template          | 自定义渲染选项 | function({ item, sels, name, value })  |   -  |    -    |
-| on                | 监听选中变化 | function({ arr, item, selected })  |   -  |    -    |
+| on                | 监听选中变化 | function({ arr, change, isAdd })  |   -  |    -    |
 | max               | 设置多选选中上限 | int  |   -  |    0    |
 | maxMethod         | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值  |   -  |    -    |
 | name              | 表单提交时的name  |  string  |   -  |    select    |
@@ -45,13 +46,41 @@
 | 参数              | 说明                             | 类型            | 可选值 | 默认值 |
 | ----------------- | ------------------------------  | --------------- | ------ | ------ |
 | name        | 显示名称      | string     |    -    |    name      |
-| value       | 选中值        | string     |    -    |    value     |
+| value       | 选中值, 当前多选唯一        | string     |    -    |    value     |
 | selected    | 是否选中      | string     |    -    |    selected      |
 | disabled    | 是否禁用      | string     |    -    |    disabled      |
 | children    | 分组children | string     |    -    |    children      |
 | optgroup    | 分组optgroup | string     |    -    |    optgroup      |


+### 分组说明
+
+如果children属性为数组, 或者optgroup=true的时候开启分组模式
+
+```
+//平级结构下面的数据为一组
+{name: '城市', optgroup: true},
+
+//children下的数组为一组
+{name: '销售员', children: [
+    {name: '李四', value: 4, selected: true},
+    {name: '王五', value: 5},
+]},
+
+//可在分组上定义click属性, 来定义点击事件
+//这里以optgroup模式为例, children模式同理
+{name: '选中', optgroup: true, click: 'SELECT'},
+{name: '清空', optgroup: true, click: 'CLEAR'},
+{name: '自动', optgroup: true, click: 'AUTO'},
+{name: '自定义', optgroup: true, click: function(item){
+    alert('自定义的, 想干嘛干嘛');
+}},
+
+
+
+```
+
+
 ### theme

 | 参数          | 说明      | 类型            | 可选值 | 默认值 |
@@ -109,7 +138,7 @@ model: {
 | showIcon     | 是否显示工具图标 | boolean     |    true / false    |    true   |
 | list         | 工具条数组 (默认有 全选/清空, 可以自定义)     | array       |    -    |   [ "ALL", "CLEAR" ] |

- 自定义方式
+> 自定义方式

 ```

@@ -141,9 +170,10 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 | 事件名 | 说明               | 参数 |
 | ------ | ------------------ | -------- |
 | getValue  | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
-| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉) |
+| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉, 不传默认当前显示状态, 取值: true/false) |
+| append  | 追加赋值 | (array: 追加的数据) |
+| delete  | 删除赋值 | (array: 删除的数据) |
 | opened  | 主动展开下拉 | - |
 | closed  | 主动关闭下拉 | - |
-| render  | 重新渲染多选 | (options: 见配置项) |
 | reset  | 重置为上一次的render状态 | - |
-| update  | 更新多选选中, reset不保留 | - |
+| update  | 更新多选选中, reset不保留 | (options: 见配置项) |
--- a/docs/router.js
+++ b/docs/router.js
@@ -78,7 +78,10 @@ export default [{
 		children: [
            { path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
            { path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
-            // { path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
+            { path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
+            { path: '/example-custom/ZM04', name: '远程搜索', component: importMd('/ZM04') },
+            { path: '/example-custom/ZM05', name: '动态数据', component: importMd('/ZM05') },
+            { path: '/example-custom/ZM06', name: '弹框中的多选', component: importMd('/ZM06') },
            // { path: '/example-custom/ZTEST', name: '测试', component: importMd('/ZTEST') },
        ]
 	}, {