完善layui-select功能与文档

2022-08-25 17:02:40 +08:00 · 2022-08-25 17:02:40 +08:00 · 277cfb2e11
commit 277cfb2e11
parent afaa364499
4 changed files with 599 additions and 0 deletions
--- a/common/src/main/resources/static/assets/js/common/layui-select.js
+++ b/common/src/main/resources/static/assets/js/common/layui-select.js
@ -0,0 +1,214 @@
+function LayuiSelect(layui) {
+    let $ = layui.$;
+    let form = layui.form;
+    let ajax = top.restAjax;
+    let dialog = top.dialog;
+    let layuiSelectSelf = this;
+
+    /**
+     * 下拉选择
+     */
+    this.select = function (opt) {
+        let self = this;
+        let url = opt.url;
+        let domId = opt.domId;
+        let name = opt.name;
+        let valueKey = opt.valueKey;
+        let nameKey = opt.nameKey;
+        let dataForm = opt.dataForm;
+        let required = opt.required;
+        let selectedValue = opt.selectedValue;
+        let optionDataKeyArray = opt.optionDataKeyArray ? opt.optionDataKeyArray : [];
+        let onInit = opt.onInit;
+        let onSelect = opt.onSelect;
+
+        $('#' + domId).empty();
+        $('#' + domId).append(`<select id="${name}" name="${name}" lay-filter="${name}Filter" ${required ? 'lay-verify="required"' : ''}></select>`);
+
+        /**
+         * 初始化选项
+         */
+        function initOption() {
+            $('#' + name).empty();
+            ajax.get(url, {}, null, function (code, data) {
+                let options = '<option value="">请选择</option>';
+                $.each(data, function (i, item) {
+                    let optionDatas = '';
+                    $.each(optionDataKeyArray, function (j, optionDataKey) {
+                        let optionDataValue = item[optionDataKey];
+                        if (!optionDataValue) {
+                            return;
+                        }
+                        optionDatas += ` data-data${j}="${item[optionDataKey]}"`;
+                    });
+                    options += `<option value="${item[valueKey]}" ${(selectedValue && selectedValue === item[valueKey]) ? 'selected' : ''} ${optionDatas}>${item[nameKey]}</option>`
+                })
+                $('#' + name).append(options)
+                form.render(null, dataForm);
+
+                if (selectedValue) {
+                    // 监听初始化
+                    onInit ? onInit(selectedValue, layuiSelectSelf.selectedOption('#' + name, selectedValue)) : null;
+                }
+            }, function (code, data) {
+                dialog.msg(data.msg);
+            });
+        }
+
+        /**
+         * 初始化选择
+         */
+        function initSelectEvent() {
+            form.on('select(' + name + 'Filter)', function (data) {
+                let option = self.selectedOption('#' + name, data.value);
+                onSelect ? onSelect(data, option) : null;
+                // 联动
+                if (data.value) {
+                    onInit ? onInit(data.value) : null;
+                }
+            });
+        }
+
+        initOption();
+        initSelectEvent();
+
+    }
+
+    /**
+     * 下拉数据字典
+     * @param opt
+     */
+    this.selectData = function (opt) {
+        this.select({
+            url: ajax.path('api/data/listbyparentid/{parentId}', [opt.parentId]),
+            domId: opt.domId,
+            name: opt.name,
+            required: opt.required,
+            dataForm: opt.dataForm,
+            valueKey: 'dataId',
+            nameKey: 'dataName',
+            selectedValue: opt.selectedValue,
+            optionDataKeyArray: opt.optionDataKeyArray,
+            onInit: opt.onInit,
+            onSelect: opt.onSelect
+        })
+    }
+
+    /**
+     * 获取选择的option
+     *
+     * @param selectId 下拉框ID
+     * @param selectedValue 选择的值
+     * @return {DOMStringMap|null}
+     */
+    this.selectedOption = function (selectId, selectedValue) {
+        let options = $(selectId).children();
+        for (let i = 0, option; option = options[i++];) {
+            if (selectedValue === option.value) {
+                return option;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * 级联下拉
+     * @param opt
+     */
+    this.selectLinkage = function (opt) {
+        let self = this;
+        // 级联url
+        let url = opt.url;
+        // option key
+        let valueKey = opt.valueKey;
+        // option text key
+        let nameKey = opt.nameKey;
+        let optionDataKeyArray = opt.optionDataKeyArray && (opt.optionDataKeyArray instanceof Array) ? opt.optionDataKeyArray : [];
+        // 级联数量
+        let linkageSize = opt.linkageSize ? opt.linkageSize : 1;
+        // 选择ID
+        let selectId = opt.selectId;
+        let baseRootId = opt.baseRootId;
+        let onSelect = opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null;
+
+        /**
+         * 初始化
+         * @param parentId 上级ID
+         * @param selectIndex 选择下标
+         */
+        function initSelect(parentId, selectIndex) {
+            if (parentId === '') {
+                return;
+            }
+            let refreshSelectId = (selectId + parseInt(selectIndex));
+            ajax.get(ajax.path(url, [parentId]), {}, null, function (code, data) {
+                $('#' + refreshSelectId).append('<option value="">请选择</option>');
+                $.each(data, function (index, item) {
+                    // option携带的值
+                    let optionDatas = '';
+                    for (let i = 0, optionDataKey; optionDataKey = optionDataKeyArray[i++];) {
+                        let optionDataValue = item[optionDataKey];
+                        if (!optionDataValue) {
+                            continue;
+                        }
+                        optionDatas += ` data-data${i}="${item[optionDataKey]}"`;
+                    }
+                    $('#' + refreshSelectId).append(`<option value="${item[valueKey]}"${optionDatas}>${item[nameKey]}</option>`);
+                });
+                // 渲染表单下拉框
+                form.render('select');
+            }, function (code, data) {
+                dialog.msg(data.msg);
+            })
+        }
+
+        /**
+         * 初始化级联事件
+         * @param selectId 选择ID
+         * @param size 级联长度
+         */
+        function addLinkageEvent() {
+            for (let i = 0; i < linkageSize; i++) {
+                form.on('select(' + (selectId + i) + 'Select)', function (data) {
+                    let index = parseInt(data.elem.id.replace(selectId, ''));
+                    let nextIndex = index + 1;
+                    // 级联清空
+                    for (let j = nextIndex; j < linkageSize; j++) {
+                        $('#' + (selectId + j)).empty();
+                    }
+                    form.render('select');
+                    // 最后一个不触发初始化事件
+                    if (index < (linkageSize - 1)) {
+                        initSelect(data.value, nextIndex);
+                    }
+
+                    if (onSelect) {
+                        let option = self.selectedOption('#' + data.elem.id, data.value);
+                        onSelect(data, option, index);
+                    }
+                })
+            }
+        }
+
+        initSelect(baseRootId, 0);
+        addLinkageEvent();
+    }
+
+    /**
+     * 地区级联下拉
+     * @param opt
+     */
+    this.selectLinkageArea = function (opt) {
+        this.selectLinkage({
+            url: 'api/area/listbyparentid/{parentId}',
+            valueKey: 'areaId',
+            nameKey: 'areaName',
+            linkageSize: opt.linkageSize ? opt.linkageSize : 5,
+            baseRootId: opt.baseRootId,
+            selectId: opt.selectId,
+            optionDataKeyArray: opt.optionDataKeyArray,
+            onSelect: opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null
+        })
+    }
+
+}
--- a/docs/pom.xml
+++ b/docs/pom.xml
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <artifactId>wg-basic</artifactId>
+        <groupId>ink.wgink</groupId>
+        <version>1.0-SNAPSHOT</version>
+    </parent>
+    <modelVersion>4.0.0</modelVersion>
+
+    <artifactId>docs</artifactId>
+
+</project>
--- a/docs/src/main/resources/doc/wgink/code/layui/util/layui-input-tree.md
+++ b/docs/src/main/resources/doc/wgink/code/layui/util/layui-input-tree.md
@ -0,0 +1,173 @@
+# 输入框树形选择
+
+layui需要引入 **ztree** 模块
+
+js
+
+```html
+<script src="assets/js/common/layui-input-tree.js"></script>
+```
+
+初始化
+
+```js
+var layuiInputTree = new LayuiInputTree(layui);
+```
+
+## 渲染
+
+### 单选
+
+html
+
+```html
+<div class="layui-input-block">
+    <input type="hidden" id="roleId">
+    <input type="text" id="roleName" class="layui-input" placeholder="勾选角色">
+</div>
+```
+
+js
+
+```js
+layuiInputTree.initSelect({
+    id: 'roleName',
+    url: 'api/role/listztree',
+    key: {
+        id: 'roleId',
+        name: 'roleName',
+        title: 'roleName',
+        pId: 'roleParentId',
+        checked: 'checked',
+        children: 'subs',
+        isParent: 'isParent',
+        isHidden: 'isHidden',
+        url: 'url',
+    },
+    defaultParams: {id: '123123'},
+    selectedData: {id: '', name: ''},
+    onConfirm: function(zTree, selectedNode) {
+        if(!selectedNode) {
+            $('#roleId').val('');
+            return;
+        }
+        $('#roleId').val(selectedNode.id);
+    },
+    onClear: function(zTree) {}
+})
+```
+
+参数
+
+|名称|类型|描述|是否必填|
+|---|---|---|---|
+|url|string|请求地址|是|
+|id|string|触发选择的input输入框ID|是|
+|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填|否|
+|defaultParams|obj|请求默认携带的参数|否|
+|getSelectedData|function|返回已经选择的数据|否|
+|onConfirm|function|点击确定按钮后触发|否|
+|onClear|function|点击清除按钮后触发|否|
+
+方法
+
+getSelectedData：返回ztree回显时的数据
+
+事件
+
+onConfirm：树形列表点击确定按钮后触发
+
+|名称|类型| 描述      |
+|---|---|---------|
+|zTree|obj| ztree对象 |
+|selectedNode|obj| 选择的节点   |
+
+onClear：树形列表点击清空按钮后触发
+
+|名称|类型| 描述      |
+|---|---|---------|
+|zTree|obj| ztree对象 |
+
+### 多选
+
+html
+
+```html
+<div class="layui-input-block">
+    <input type="hidden" id="roleIds">
+    <input type="text" id="roleNames" class="layui-input" placeholder="勾选角色">
+</div>
+```
+
+js
+
+```js
+var selectedRoles = [{id:'', name:''}]
+layuiInputTree.initMultiSelect({
+    id: 'roleNames',
+    url: 'api/role/listztree',
+    key: {
+        id: 'roleId',
+        name: 'roleName',
+        title: 'roleName',
+        pId: 'roleParentId',
+        checked: 'checked',
+        children: 'subs',
+        isParent: 'isParent',
+        isHidden: 'isHidden',
+        url: 'url',
+    },
+    checkboxType: {Y: '', N: ''},
+    defaultParams: {id: '123123'},
+    getSelectedDatas: function() {
+        return [{id:'', name:''}]
+    },
+    onConfirm: function (zTree, selectedNodes) {
+        // 将返回结果保存，回显时用
+        if (selectedNodes.length == 0) {
+            $('#roleIds').val('');
+            return;
+        }
+        var roleIds = '';
+        $.each(selectedNodes, function (index, item) {
+            if (roleIds != '') {
+                roleIds += ',';
+            }
+            roleIds += item.id;
+        })
+        $('#roleIds').val(roleIds);
+    }
+})
+```
+
+参数
+
+|名称|类型|描述| 是否必填 |
+|---|---|---|------|
+|url|string|请求地址| 是    |
+|id|string|触发选择的input输入框ID| 是    |
+|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填| 否    |
+|checkboxType|obj|复选框类型，Y 属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示作会影响父级节点；"s" 表示操作会影响子级节点。默认均为"ps"| 否    |
+|defaultParams|obj|请求默认携带的参数| 否    |
+|getSelectedDatas|function|返回已经选择的数据列表| 否    |
+|onConfirm|function|点击确定按钮后触发| 否    |
+|onClear|function|点击清除按钮后触发| 否    |
+
+方法
+
+getSelectedDatas：返回ztree回显时的数据列表
+
+事件
+
+onConfirm：树形列表点击确定按钮后触发
+
+|名称|类型| 描述        |
+|---|---|-----------|
+|zTree|obj| ztree对象   |
+|selectedNodes|array| 触发选择的节点列表 |
+
+onClear：树形列表点击清空按钮后触发
+
+|名称|类型| 描述      |
+|---|---|---------|
+|zTree|obj| ztree对象 |
--- a/docs/src/main/resources/doc/wgink/code/layui/util/layui-select.md
+++ b/docs/src/main/resources/doc/wgink/code/layui/util/layui-select.md
@ -0,0 +1,198 @@
+# 下拉选择
+
+## 静态
+
+### 表单
+
+```html
+
+<div class="layui-form-item">
+    <label class="layui-form-label"></label>
+    <div class="layui-input-block">
+        <select id="selector" name="selector" lay-filter="selectorSelect">
+            <option value="">选择类型</option>
+            <option value="type1">类型1</option>
+            <option value="type2">类型2</option>
+        </select>
+    </div>
+</div>
+```
+
+### 列表搜索
+
+```html
+
+<div class="layui-inline layui-form search-item">
+    <select id="type" name="type" lay-filter="typeFilter">
+        <option value="">选择类型</option>
+        <option value="type1">类型1</option>
+        <option value="type2">类型2</option>
+    </select>
+</div>
+```
+
+## 动态
+
+js
+
+```js
+<script src="assets/js/common/layui-select.js"></script>
+```
+
+初始化
+
+```js
+var layuiSelect = new LayuiSelect(layui);
+```
+
+### 单下拉
+
+#### 通用
+
+html
+
+```html
+
+<div class="layui-form-item">
+    <label class="layui-form-label">最高学历</label>
+    <input type="hidden" id="xxxName" name="xxxName">
+    <div class="layui-input-block" id="xxxIdBox"></div>
+</div>
+```
+
+js
+
+```js
+layuiSelect.select({
+    url: top.restAjax.path('', []),
+    domId: 'xxxIdBox',
+    name: 'xxxId',
+    required: true,
+    dataForm: 'dataForm',
+    valueKey: 'dataId',
+    nameKey: 'dataName',
+    onSelect: function (data, option) {
+        var optionValue = option.value;
+        var optionText = option.innerText;
+    }
+});
+```
+
+> xxx为需要替换的名称
+
+#### 数据字典
+
+js
+
+```js
+layuiSelect.selectData({
+    parentId: '',
+    domId: 'xxxIdBox',
+    name: 'xxxId',
+    required: true,
+    dataForm: 'dataForm',
+    onSelect: function (data, option) {
+        $('#xxxName').val(option.innerText);
+    }
+});
+```
+
+参数
+
+|名称| 类型       | 描述                                                       | 是否必填 |
+|---|----------|----------------------------------------------------------|------|
+|url| string   | 请求地址                                                     | 是    |
+|domId| string   | 加载下拉的div                                                 | 是    |
+|name| string   | select的ID与NAME属性值                                        | 是    |
+|required| boolean  | 是否校验                                                     | 否    |
+|dataForm| string   | 表单的lay-filter值                                           | 是    |
+|valueKey| string   | 接口返回的数据渲染到option的value属性的值                               | 是    |
+|nameKey| string   | 接口返回的数据渲染到option的innerText的值                             | 是    |
+|selectedValue| string   | 选中的默认值                                                   | 否    |
+|optionDataKeyArray| array    | 需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标 | 否    |
+|onInit| function | 渲染时触发回调                                                  | 否    |
+|onSelect| function | 选择时触发回调                                                  | 否    |
+
+事件
+
+onInit：渲染或更新时触发事件
+
+|名称| 类型     | 描述                   |
+|---|--------|----------------------|
+|selectedValue| string | 选中的默认值，空字符串时，不触发数据加载 |
+|option| dom    | 默认选中的option          |
+
+onSelect：选择时触发事件
+
+|名称|类型| 描述                               |
+|---|---|----------------------------------|
+|data|obj| 选择的option数据，包含原始DOM，美化后的DOM，选中的值 |
+|option|dom| 选中的option                        |
+
+### 下拉联动
+
+#### 多级地区联动（示例）
+
+> 树形结构，下拉联动需要配合dom实现
+
+html
+
+```html
+
+<div class="layui-row" style="margin-top: 10px;">
+    <span class="search-item-key">户籍地</span>
+    <div class="layui-inline layui-form search-item ">
+        <select id="registerArea0" name="registerArea0" lay-filter="registerArea0Select"></select>
+    </div>
+    <div class="layui-inline layui-form search-item ">
+        <select id="registerArea1" name="registerArea1" lay-filter="registerArea1Select"></select>
+    </div>
+    <div class="layui-inline layui-form search-item ">
+        <select id="registerArea2" name="registerArea2" lay-filter="registerArea2Select"></select>
+    </div>
+    <div class="layui-inline layui-form search-item ">
+        <select id="registerArea3" name="registerArea3" lay-filter="registerArea3Select"></select>
+    </div>
+    <div class="layui-inline layui-form search-item ">
+        <select id="registerArea4" name="registerArea4" lay-filter="registerArea4Select"></select>
+    </div>
+</div>
+```
+
+`<select>` 的 **id**、**name** 需要相同，下标从**0**开始，**lay-filter** 为 **id** 值 + **Select**。
+固定写法，下标递增
+
+```js
+layuiSelect.selectLinkageArea({
+    baseRootId: 0,
+    selectId: 'registerArea',
+    optionDataKeyArray: ['areaCode'],
+    onSelect: function (data, option, index) {
+        var value = data.value;
+        // 删除元素
+        selectedRegisterAreaArray.splice(index, 5 - index);
+        if (value) {
+            selectedRegisterAreaArray[index] = option.innerText;
+        }
+    }
+});
+```
+
+参数
+
+|名称|类型|描述| 是否必填 |
+|---|---|---|------|
+|baseRootId|string|第一个下拉框的根节点ID| 是    |
+|selectId|string|select的ID（不包含下标）| 是    |
+|optionDataKeyArray|array|需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标| 否    |
+|onSelect|function|选择事件| 是    |
+
+事件
+
+onSelect：选择时触发事件
+
+|名称|类型| 描述                               |
+|---|---|----------------------------------|
+|data|obj| 选择的option数据，包含原始DOM，美化后的DOM，选中的值 |
+|option|dom| 选中的option                        |
+|index|number| select下标                         |