From 277cfb2e1130b094267adb9d7c05b485b9a5a400 Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Thu, 25 Aug 2022 17:02:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84layui-select=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E4=B8=8E=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/assets/js/common/layui-select.js | 214 ++++++++++++++++++ docs/pom.xml | 14 ++ .../wgink/code/layui/util/layui-input-tree.md | 173 ++++++++++++++ .../doc/wgink/code/layui/util/layui-select.md | 198 ++++++++++++++++ 4 files changed, 599 insertions(+) create mode 100644 common/src/main/resources/static/assets/js/common/layui-select.js create mode 100644 docs/pom.xml create mode 100644 docs/src/main/resources/doc/wgink/code/layui/util/layui-input-tree.md create mode 100644 docs/src/main/resources/doc/wgink/code/layui/util/layui-select.md diff --git a/common/src/main/resources/static/assets/js/common/layui-select.js b/common/src/main/resources/static/assets/js/common/layui-select.js new file mode 100644 index 00000000..b4142c4c --- /dev/null +++ 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(``); + + /** + * 初始化选项 + */ + function initOption() { + $('#' + name).empty(); + ajax.get(url, {}, null, function (code, data) { + let options = ''; + $.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 += `` + }) + $('#' + 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(''); + $.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(``); + }); + // 渲染表单下拉框 + 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 + }) + } + +} \ No newline at end of file diff --git a/docs/pom.xml b/docs/pom.xml new file mode 100644 index 00000000..b7eafd30 --- /dev/null +++ b/docs/pom.xml @@ -0,0 +1,14 @@ + + + + wg-basic + ink.wgink + 1.0-SNAPSHOT + + 4.0.0 + + docs + + \ No newline at end of file diff --git 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 new file mode 100644 index 00000000..79b81165 --- /dev/null +++ b/docs/src/main/resources/doc/wgink/code/layui/util/layui-input-tree.md @@ -0,0 +1,173 @@ +# 输入框树形选择 + +layui需要引入 **ztree** 模块 + +js + +```html + +``` + +初始化 + +```js +var layuiInputTree = new LayuiInputTree(layui); +``` + +## 渲染 + +### 单选 + +html + +```html +
+ + +
+``` + +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 +
+ + +
+``` + +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对象 | diff --git 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 new file mode 100644 index 00000000..a5431c2a --- /dev/null +++ b/docs/src/main/resources/doc/wgink/code/layui/util/layui-select.md @@ -0,0 +1,198 @@ +# 下拉选择 + +## 静态 + +### 表单 + +```html + +
+ +
+ +
+
+``` + +### 列表搜索 + +```html + +
+ +
+``` + +## 动态 + +js + +```js + +``` + +初始化 + +```js +var layuiSelect = new LayuiSelect(layui); +``` + +### 单下拉 + +#### 通用 + +html + +```html + +
+ + +
+
+``` + +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 + +
+ 户籍地 +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+``` + +`