v1.0.10

下拉自定义
2019-10-20 18:01:27 +08:00
parent de672117e1
commit 6d23654a43
27 changed files with 2136 additions and 133 deletions
--- a/docs/mds/XM07.md
+++ b/docs/mds/XM07.md
@@ -2,7 +2,7 @@

 ### 随便试试

-修改一下背景色和外边距吧
+修改一下外边距, 加上圆角, 更改一下高度

 :::demo 
 ```html
@@ -12,8 +12,9 @@
 var demo1 = xmSelect.render({
    el: '#demo1', 
    style: {
-        backgroundColor: 'red',
        marginLeft: '200px',
+        borderRadius: '50px',
+        height: '50px',
    },
    data: [
        {name: '张三', value: 1},
--- a/docs/mds/XM16.md
+++ b/docs/mds/XM16.md
@@ -9,6 +9,10 @@
 ```html
 <div id="demo1" class="xm-select-demo"></div>

+<br/><br/>
+<button class="btn" id="setValue1">监听setValue(['zhangsan'], null, true)</button>
+<button class="btn" id="setValue2">不监听setValue(['zhangsan'])</button>
+
 <script>
 var demo1 = xmSelect.render({
    el: '#demo1', 
@@ -21,6 +25,14 @@ var demo1 = xmSelect.render({
        {name: '王五', value: 'wangwu'},
    ]
 })
+
+document.getElementById('setValue1').onclick = function(){
+    demo1.setValue(['zhangsan'], null, true);
+}
+
+document.getElementById('setValue2').onclick = function(){
+    demo1.setValue(['zhangsan']);
+}
 </script>
 ```
 :::
--- a/docs/mds/XM21.md
+++ b/docs/mds/XM21.md
@@ -1,12 +1,6 @@
 ## 分组


-
-:::tip
-使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!!
-:::
-
-
 ### optgroup模式

 :::demo 指定选项中的`optgroup`为`true`
@@ -134,3 +128,37 @@ var demo4 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 带有分页的分组
+
+:::demo 
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    toolbar:{
+        show: true,
+    },
+    filterable: true,
+    height: '500px',
+    paging: true,
+    pageSize: 2,
+    data: [
+        {name: '销售员', children: [
+            {name: '张三1', value: 1},
+            {name: '李四1', value: 2},
+            {name: '王五13', value: 3},
+        ]},
+        {name: '奖品', children: [
+            {name: '苹果23', value: 4},
+            {name: '香蕉2', value: 5},
+            {name: '葡萄2', value: 6},
+        ]},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/ZP01.md
+++ b/docs/mds/ZP01.md
@@ -0,0 +1,53 @@
+## 下拉自定义
+
+
+
+### 下拉表格
+
+至于能干什么, 就看你们的想象了~~
+
+:::demo 
+```html
+
+<div id="demo1"></div>
+
+<script>
+//先渲染多选
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    content: `
+        <table class="layui-table">
+          <colgroup>
+            <col width="150">
+            <col width="200">
+            <col>
+          </colgroup>
+          <thead>
+            <tr>
+              <th>昵称</th>
+              <th>加入时间</th>
+              <th>签名</th>
+            </tr> 
+          </thead>
+          <tbody>
+            <tr>
+              <td>贤心</td>
+              <td>2016-11-29</td>
+              <td>人生就像是一场修行</td>
+            </tr>
+            <tr>
+              <td>许闲心</td>
+              <td>2016-11-28</td>
+              <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
+            </tr>
+          </tbody>
+        </table>
+    `,
+})
+
+
+
+
+</script>
+```
+:::
--- a/docs/mds/ZP02.md
+++ b/docs/mds/ZP02.md
@@ -0,0 +1,88 @@
+## 下拉树
+
+### eleTree
+
+结合 `layui` 插件中心的 `eleTree`, <a href='https://fly.layui.com/extend/eleTree/' target='_blank'>传送门</a>
+
+
+:::demo 
+```html
+
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+//先渲染多选
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    theme: {
+        color: '#5FB878',
+    },
+    content: '<div id="ele1" lay-filter="ele1"></div>',
+})
+
+//渲染自定义内容
+var ele = layui.eleTree.render({
+    elem: '#ele1',
+    data: [
+        {
+            id: 1,
+            label: "安徽省",
+            children: [
+                {
+                    id: 2,
+                    label: "马鞍山市",
+                    disabled: true,
+                    children: [
+                        {
+                            id: 3,
+                            label: "和县",
+                        },
+                        {
+                            id: 4,
+                            label: "花山区",
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            id: 5,
+            label: "河南省",
+            children: [
+                {
+                    id: 6,
+                    label: "郑州市"
+                }
+            ]
+        }
+    ],
+    showCheckbox: true,
+    defaultExpandAll: true,
+});
+
+//监听下拉多选的选择
+demo1.update({
+   on({ arr, change, isAdd }){
+       if(isAdd === false){//监听取消
+           ele.setChecked(arr.map(item => item.id), true);
+       }
+   },
+});
+
+//监听树的选择
+layui.eleTree.on("nodeChecked(ele1)", function(d) {
+    var arr = ele.getChecked(true, false)
+    demo1.update({
+        prop: {
+            name: 'label',
+            value: 'id',
+        },
+        data: arr,
+    }).setValue(arr)
+})
+
+
+
+</script>
+```
+:::
--- a/docs/mds/ZTEST.md
+++ b/docs/mds/ZTEST.md
@@ -7,28 +7,29 @@
 <div id="demo1" class="xm-select-demo"></div>

 <script>
+//先渲染多选
 var demo1 = xmSelect.render({
    el: '#demo1', 
-    filterable: true,
-    toolbar: {
-        show: true
-    },
-    height: '500px',
-    model: {
-        icon: 'hidden',
-    },
-    autoRow: true,
-    data: [
-        {name: '城市', optgroup: true},
-        {name: '北京13', value: 1},
-        {name: '天津1', value: 2, selected: true, disabled: true},
-        {name: '上海1', value: 3},
-        {name: '销售员', children: [
-            {name: '李四23', value: 4, selected: true},
-            {name: '王五2', value: 5},
-        ]},
-    ],
+    paging: true,
+    pageSize: 2,
+    data(){
+        return [
+            {name: '销售员', children: [
+                {name: '张三1', value: 1, selected: true},
+                {name: '李四1', value: 2, selected: true},
+                {name: '王五1', value: 3, disabled: true},
+            ]},
+            {name: '奖品', children: [
+                {name: '苹果2', value: 4, selected: true, disabled: true},
+                {name: '香蕉2', value: 5},
+                {name: '葡萄2', value: 6},
+            ]},
+        ]
+    }
 })
+
+
+
 </script>
 ```
 :::
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -8,6 +8,7 @@
 | el                | 渲染对象, css选择器      | string          |    -    |    -      |
 | language          | 语言选择              | string           |    zn / en    |    zn    |
 | data              | 显示的数据              | array           |    -    |    [ ]    |
+| content           | 自定义下拉框html              | string           |    -    |    -    |
 | initValue         | 初始化选中的数据, 需要在data中存在 | array           |    -    |    null    |
 | tips              | 默认提示, 类似于placeholder | string           |    -    |    请选择    |
 | empty             | 空数据提示 | string           |    -    |    暂无数据    |
@@ -38,7 +39,7 @@
 | name              | 表单提交时的name  |  string  |   -  |    select    |
 | toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
 | showCount         | 展示在下拉框中的最多选项数量  |  int  |   -  |    0    |
-| autoRow           | 是否开启自动换行(选项过多时)  |  boolean  |   -  |    false    |
+| autoRow           | 是否开启自动换行(选项过多时)  |  boolean  |   true / false  |    false    |
 | size              | 尺寸  |  string  |  large / medium / small / mini  |    medium    |


@@ -171,7 +172,7 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 | 事件名 | 说明               | 参数 |
 | ------ | ------------------ | -------- |
 | getValue  | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
-| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉, 不传默认当前显示状态, 取值: true/false) |
+| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
 | append  | 追加赋值 | (array: 追加的数据) |
 | delete  | 删除赋值 | (array: 删除的数据) |
 | opened  | 主动展开下拉 | - |
--- a/docs/mds/question.md
+++ b/docs/mds/question.md
@@ -22,3 +22,8 @@

 - 打开控制台查看是否报错
 - 加群: 660408068, 询问
+
+
+### 4.占位标签为什么是div
+
+演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签