diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java index f53537b6..8c2f38ba 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java @@ -3,10 +3,13 @@ package com.ruoyi.web.controller.demo.controller; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; +import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; +import com.alibaba.fastjson.JSON; import com.ruoyi.common.core.domain.AjaxResult; +import com.ruoyi.common.core.domain.CxSelect; /** * 表单相关 @@ -172,6 +175,59 @@ public class DemoFormController return prefix + "/autocomplete"; } + /** + * 多级联动下拉 + */ + @GetMapping("/cxselect") + public String cxselect(ModelMap mmap) + { + CxSelect cxSelectTB = new CxSelect(); + cxSelectTB.setN("淘宝"); + cxSelectTB.setV("taobao"); + CxSelect cxSelectTm = new CxSelect(); + cxSelectTm.setN("天猫"); + cxSelectTm.setV("tm"); + CxSelect cxSelectJhs = new CxSelect(); + cxSelectJhs.setN("聚划算"); + cxSelectJhs.setV("jhs"); + List tmList = new ArrayList(); + tmList.add(cxSelectTm); + tmList.add(cxSelectJhs); + cxSelectTB.setS(tmList); + + CxSelect cxSelectJD = new CxSelect(); + cxSelectJD.setN("京东"); + cxSelectJD.setV("jd"); + CxSelect cxSelectCs = new CxSelect(); + cxSelectCs.setN("京东超市"); + cxSelectCs.setV("jdcs"); + CxSelect cxSelectSx = new CxSelect(); + cxSelectSx.setN("京东生鲜"); + cxSelectSx.setV("jdsx"); + List jdList = new ArrayList(); + jdList.add(cxSelectCs); + jdList.add(cxSelectSx); + cxSelectJD.setS(jdList); + + List cxList = new ArrayList(); + cxList.add(cxSelectTB); + cxList.add(cxSelectJD); + + mmap.put("data", JSON.toJSON(cxList)); + return prefix + "/cxselect"; + } + + /** + * 模拟数据 + */ + @GetMapping("/cityData") + @ResponseBody + public String cityData() + { + String data = "[{\"n\":\"湖南省\",\"s\":[{\"n\":\"长沙市\",\"s\":[{\"n\":\"芙蓉区\"},{\"n\":\"天心区\"},{\"n\":\"岳麓区\"},{\"n\":\"开福区\"},{\"n\":\"雨花区\"},{\"n\":\"望城区\"},{\"n\":\"长沙县\"},{\"n\":\"宁乡县\"},{\"n\":\"浏阳市\"}]},{\"n\":\"株洲市\",\"s\":[{\"n\":\"荷塘区\"},{\"n\":\"芦淞区\"},{\"n\":\"石峰区\"},{\"n\":\"天元区\"},{\"n\":\"株洲县\"},{\"n\":\"攸县\"},{\"n\":\"茶陵县\"},{\"n\":\"炎陵县\"},{\"n\":\"醴陵市\"}]},{\"n\":\"湘潭市\",\"s\":[{\"n\":\"雨湖区\"},{\"n\":\"岳塘区\"},{\"n\":\"湘潭县\"},{\"n\":\"湘乡市\"},{\"n\":\"韶山市\"}]},{\"n\":\"衡阳市\",\"s\":[{\"n\":\"珠晖区\"},{\"n\":\"雁峰区\"},{\"n\":\"石鼓区\"},{\"n\":\"蒸湘区\"},{\"n\":\"南岳区\"},{\"n\":\"衡阳县\"},{\"n\":\"衡南县\"},{\"n\":\"衡山县\"},{\"n\":\"衡东县\"},{\"n\":\"祁东县\"},{\"n\":\"耒阳市\"},{\"n\":\"常宁市\"}]},{\"n\":\"邵阳市\",\"s\":[{\"n\":\"双清区\"},{\"n\":\"大祥区\"},{\"n\":\"北塔区\"},{\"n\":\"邵东县\"},{\"n\":\"新邵县\"},{\"n\":\"邵阳县\"},{\"n\":\"隆回县\"},{\"n\":\"洞口县\"},{\"n\":\"绥宁县\"},{\"n\":\"新宁县\"},{\"n\":\"城步苗族自治县\"},{\"n\":\"武冈市\"}]},{\"n\":\"岳阳市\",\"s\":[{\"n\":\"岳阳楼区\"},{\"n\":\"云溪区\"},{\"n\":\"君山区\"},{\"n\":\"岳阳县\"},{\"n\":\"华容县\"},{\"n\":\"湘阴县\"},{\"n\":\"平江县\"},{\"n\":\"汨罗市\"},{\"n\":\"临湘市\"}]},{\"n\":\"常德市\",\"s\":[{\"n\":\"武陵区\"},{\"n\":\"鼎城区\"},{\"n\":\"安乡县\"},{\"n\":\"汉寿县\"},{\"n\":\"澧县\"},{\"n\":\"临澧县\"},{\"n\":\"桃源县\"},{\"n\":\"石门县\"},{\"n\":\"津市市\"}]},{\"n\":\"张家界市\",\"s\":[{\"n\":\"永定区\"},{\"n\":\"武陵源区\"},{\"n\":\"慈利县\"},{\"n\":\"桑植县\"}]},{\"n\":\"益阳市\",\"s\":[{\"n\":\"资阳区\"},{\"n\":\"赫山区\"},{\"n\":\"南县\"},{\"n\":\"桃江县\"},{\"n\":\"安化县\"},{\"n\":\"沅江市\"}]},{\"n\":\"郴州市\",\"s\":[{\"n\":\"北湖区\"},{\"n\":\"苏仙区\"},{\"n\":\"桂阳县\"},{\"n\":\"宜章县\"},{\"n\":\"永兴县\"},{\"n\":\"嘉禾县\"},{\"n\":\"临武县\"},{\"n\":\"汝城县\"},{\"n\":\"桂东县\"},{\"n\":\"安仁县\"},{\"n\":\"资兴市\"}]},{\"n\":\"永州市\",\"s\":[{\"n\":\"零陵区\"},{\"n\":\"冷水滩区\"},{\"n\":\"祁阳县\"},{\"n\":\"东安县\"},{\"n\":\"双牌县\"},{\"n\":\"道县\"},{\"n\":\"江永县\"},{\"n\":\"宁远县\"},{\"n\":\"蓝山县\"},{\"n\":\"新田县\"},{\"n\":\"江华瑶族自治县\"}]},{\"n\":\"怀化市\",\"s\":[{\"n\":\"鹤城区\"},{\"n\":\"中方县\"},{\"n\":\"沅陵县\"},{\"n\":\"辰溪县\"},{\"n\":\"溆浦县\"},{\"n\":\"会同县\"},{\"n\":\"麻阳苗族自治县\"},{\"n\":\"新晃侗族自治县\"},{\"n\":\"芷江侗族自治县\"},{\"n\":\"靖州苗族侗族自治县\"},{\"n\":\"通道侗族自治县\"},{\"n\":\"洪江市\"}]},{\"n\":\"娄底市\",\"s\":[{\"n\":\"娄星区\"},{\"n\":\"双峰县\"},{\"n\":\"新化县\"},{\"n\":\"冷水江市\"},{\"n\":\"涟源市\"}]},{\"n\":\"湘西土家族苗族自治州\",\"s\":[{\"n\":\"吉首市\"},{\"n\":\"泸溪县\"},{\"n\":\"凤凰县\"},{\"n\":\"花垣县\"},{\"n\":\"保靖县\"},{\"n\":\"古丈县\"},{\"n\":\"永顺县\"},{\"n\":\"龙山县\"}]}]},{\"n\":\"广东省\",\"s\":[{\"n\":\"广州市\",\"s\":[{\"n\":\"荔湾区\"},{\"n\":\"越秀区\"},{\"n\":\"海珠区\"},{\"n\":\"天河区\"},{\"n\":\"白云区\"},{\"n\":\"黄埔区\"},{\"n\":\"番禺区\"},{\"n\":\"花都区\"},{\"n\":\"南沙区\"},{\"n\":\"萝岗区\"},{\"n\":\"增城市\"},{\"n\":\"从化市\"}]},{\"n\":\"韶关市\",\"s\":[{\"n\":\"武江区\"},{\"n\":\"浈江区\"},{\"n\":\"曲江区\"},{\"n\":\"始兴县\"},{\"n\":\"仁化县\"},{\"n\":\"翁源县\"},{\"n\":\"乳源瑶族自治县\"},{\"n\":\"新丰县\"},{\"n\":\"乐昌市\"},{\"n\":\"南雄市\"}]},{\"n\":\"深圳市\",\"s\":[{\"n\":\"罗湖区\"},{\"n\":\"福田区\"},{\"n\":\"南山区\"},{\"n\":\"宝安区\"},{\"n\":\"龙岗区\"},{\"n\":\"盐田区\"}]},{\"n\":\"珠海市\",\"s\":[{\"n\":\"香洲区\"},{\"n\":\"斗门区\"},{\"n\":\"金湾区\"}]},{\"n\":\"汕头市\",\"s\":[{\"n\":\"龙湖区\"},{\"n\":\"金平区\"},{\"n\":\"濠江区\"},{\"n\":\"潮阳区\"},{\"n\":\"潮南区\"},{\"n\":\"澄海区\"},{\"n\":\"南澳县\"}]},{\"n\":\"佛山市\",\"s\":[{\"n\":\"禅城区\"},{\"n\":\"南海区\"},{\"n\":\"顺德区\"},{\"n\":\"三水区\"},{\"n\":\"高明区\"}]},{\"n\":\"江门市\",\"s\":[{\"n\":\"蓬江区\"},{\"n\":\"江海区\"},{\"n\":\"新会区\"},{\"n\":\"台山市\"},{\"n\":\"开平市\"},{\"n\":\"鹤山市\"},{\"n\":\"恩平市\"}]},{\"n\":\"湛江市\",\"s\":[{\"n\":\"赤坎区\"},{\"n\":\"霞山区\"},{\"n\":\"坡头区\"},{\"n\":\"麻章区\"},{\"n\":\"遂溪县\"},{\"n\":\"徐闻县\"},{\"n\":\"廉江市\"},{\"n\":\"雷州市\"},{\"n\":\"吴川市\"}]},{\"n\":\"茂名市\",\"s\":[{\"n\":\"茂南区\"},{\"n\":\"茂港区\"},{\"n\":\"电白县\"},{\"n\":\"高州市\"},{\"n\":\"化州市\"},{\"n\":\"信宜市\"}]},{\"n\":\"肇庆市\",\"s\":[{\"n\":\"端州区\"},{\"n\":\"鼎湖区\"},{\"n\":\"广宁县\"},{\"n\":\"怀集县\"},{\"n\":\"封开县\"},{\"n\":\"德庆县\"},{\"n\":\"高要市\"},{\"n\":\"四会市\"}]},{\"n\":\"惠州市\",\"s\":[{\"n\":\"惠城区\"},{\"n\":\"惠阳区\"},{\"n\":\"博罗县\"},{\"n\":\"惠东县\"},{\"n\":\"龙门县\"}]},{\"n\":\"梅州市\",\"s\":[{\"n\":\"梅江区\"},{\"n\":\"梅县\"},{\"n\":\"大埔县\"},{\"n\":\"丰顺县\"},{\"n\":\"五华县\"},{\"n\":\"平远县\"},{\"n\":\"蕉岭县\"},{\"n\":\"兴宁市\"}]},{\"n\":\"汕尾市\",\"s\":[{\"n\":\"城区\"},{\"n\":\"海丰县\"},{\"n\":\"陆河县\"},{\"n\":\"陆丰市\"}]},{\"n\":\"河源市\",\"s\":[{\"n\":\"源城区\"},{\"n\":\"紫金县\"},{\"n\":\"龙川县\"},{\"n\":\"连平县\"},{\"n\":\"和平县\"},{\"n\":\"东源县\"}]},{\"n\":\"阳江市\",\"s\":[{\"n\":\"江城区\"},{\"n\":\"阳西县\"},{\"n\":\"阳东县\"},{\"n\":\"阳春市\"}]},{\"n\":\"清远市\",\"s\":[{\"n\":\"清城区\"},{\"n\":\"清新区\"},{\"n\":\"佛冈县\"},{\"n\":\"阳山县\"},{\"n\":\"连山壮族瑶族自治县\"},{\"n\":\"连南瑶族自治县\"},{\"n\":\"英德市\"},{\"n\":\"连州市\"}]},{\"n\":\"东莞市\"},{\"n\":\"中山市\"},{\"n\":\"潮州市\",\"s\":[{\"n\":\"湘桥区\"},{\"n\":\"潮安区\"},{\"n\":\"饶平县\"}]},{\"n\":\"揭阳市\",\"s\":[{\"n\":\"榕城区\"},{\"n\":\"揭东区\"},{\"n\":\"揭西县\"},{\"n\":\"惠来县\"},{\"n\":\"普宁市\"}]},{\"n\":\"云浮市\",\"s\":[{\"n\":\"云城区\"},{\"n\":\"新兴县\"},{\"n\":\"郁南县\"},{\"n\":\"云安县\"},{\"n\":\"罗定市\"}]}]}]"; + return data; + } + /** * 获取用户数据 */ diff --git a/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.js b/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.js new file mode 100644 index 00000000..18aaddd4 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.js @@ -0,0 +1,406 @@ +/*! + * jQuery cxSelect + * @name jquery.cxselect.js + * @version 1.4.2 + * @date 2017-09-26 + * @author ciaoca + * @email ciaoca@gmail.com + * @site https://github.com/ciaoca/cxSelect + * @license Released under the MIT license + */ +(function(factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else { + factory(window.jQuery || window.Zepto || window.$); + }; +}(function($) { + var cxSelect = function() { + var self = this; + var dom, settings, callback; + + // 分配参数 + for (var i = 0, l = arguments.length; i < l; i++) { + if (cxSelect.isJquery(arguments[i]) || cxSelect.isZepto(arguments[i])) { + dom = arguments[i]; + } else if (cxSelect.isElement(arguments[i])) { + dom = $(arguments[i]); + } else if (typeof arguments[i] === 'function') { + callback = arguments[i]; + } else if (typeof arguments[i] === 'object') { + settings = arguments[i]; + }; + }; + + var api = new cxSelect.init(dom, settings); + + if (typeof callback === 'function') { + callback(api); + }; + + return api; + }; + + cxSelect.isElement = function(o){ + if (o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) { + return true; + } else { + return (o && o.nodeType && o.nodeType === 1) ? true : false; + }; + }; + + cxSelect.isJquery = function(o){ + return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false; + }; + + cxSelect.isZepto = function(o){ + return (o && o.length && (typeof Zepto === 'function' || typeof Zepto === 'object') && Zepto.zepto.isZ(o)) ? true : false; + }; + + cxSelect.getIndex = function(n, required) { + return required ? n : n - 1; + }; + + cxSelect.getData = function(data, space) { + if (typeof space === 'string' && space.length) { + space = space.split('.'); + for (var i = 0, l = space.length; i < l; i++) { + data = data[space[i]]; + }; + }; + return data; + }; + + cxSelect.init = function(dom, settings) { + var self = this; + + if (!cxSelect.isJquery(dom) && !cxSelect.isZepto(dom)) {return}; + + var theSelect = { + dom: { + box: dom + } + }; + + self.attach = cxSelect.attach.bind(theSelect); + self.detach = cxSelect.detach.bind(theSelect); + self.setOptions = cxSelect.setOptions.bind(theSelect); + self.clear = cxSelect.clear.bind(theSelect); + + theSelect.changeEvent = function() { + cxSelect.selectChange.call(theSelect, this.className); + }; + + theSelect.settings = $.extend({}, $.cxSelect.defaults, settings, { + url: theSelect.dom.box.data('url'), + emptyStyle: theSelect.dom.box.data('emptyStyle'), + required: theSelect.dom.box.data('required'), + firstTitle: theSelect.dom.box.data('firstTitle'), + firstValue: theSelect.dom.box.data('firstValue'), + jsonSpace: theSelect.dom.box.data('jsonSpace'), + jsonName: theSelect.dom.box.data('jsonName'), + jsonValue: theSelect.dom.box.data('jsonValue'), + jsonSub: theSelect.dom.box.data('jsonSub') + }); + + var _dataSelects = theSelect.dom.box.data('selects'); + + if (typeof _dataSelects === 'string' && _dataSelects.length) { + theSelect.settings.selects = _dataSelects.split(','); + }; + + self.setOptions(); + self.attach(); + + // 使用独立接口获取数据 + if (!theSelect.settings.url && !theSelect.settings.data) { + cxSelect.start.apply(theSelect); + + // 设置自定义数据 + } else if ($.isArray(theSelect.settings.data)) { + cxSelect.start.call(theSelect, theSelect.settings.data); + + // 设置 URL，通过 Ajax 获取数据 + } else if (typeof theSelect.settings.url === 'string' && theSelect.settings.url.length) { + $.getJSON(theSelect.settings.url, function(json) { + cxSelect.start.call(theSelect, json); + }); + }; + }; + + // 设置参数 + cxSelect.setOptions = function(opts) { + var self = this; + + if (opts) { + $.extend(self.settings, opts); + }; + + // 初次或重设选择器组 + if (!$.isArray(self.selectArray) || !self.selectArray.length || (opts && opts.selects)) { + self.selectArray = []; + + if ($.isArray(self.settings.selects) && self.settings.selects.length) { + var _tempSelect; + + for (var i = 0, l = self.settings.selects.length; i < l; i++) { + _tempSelect = self.dom.box.find('select.' + self.settings.selects[i]); + + if (!_tempSelect || !_tempSelect.length) {break}; + + self.selectArray.push(_tempSelect); + }; + }; + }; + + if (opts) { + if (!$.isArray(opts.data) && typeof opts.url === 'string' && opts.url.length) { + $.getJSON(self.settings.url, function(json) { + cxSelect.start.call(self, json); + }); + + } else { + cxSelect.start.call(self, opts.data); + }; + }; + }; + + // 绑定 + cxSelect.attach = function() { + var self = this; + + if (!self.attachStatus) { + self.dom.box.on('change', 'select', self.changeEvent); + }; + + if (typeof self.attachStatus === 'boolean') { + cxSelect.start.call(self); + }; + + self.attachStatus = true; + }; + + // 移除绑定 + cxSelect.detach = function() { + var self = this; + self.dom.box.off('change', 'select', self.changeEvent); + self.attachStatus = false; + }; + + // 清空选项 + cxSelect.clear = function(index) { + var self = this; + var _style = { + display: '', + visibility: '' + }; + + index = isNaN(index) ? 0 : index; + + // 清空后面的 select + for (var i = index, l = self.selectArray.length; i < l; i++) { + self.selectArray[i].empty().prop('disabled', true); + + if (self.settings.emptyStyle === 'none') { + _style.display = 'none'; + } else if (self.settings.emptyStyle === 'hidden') { + _style.visibility = 'hidden'; + }; + + self.selectArray[i].css(_style); + }; + }; + + cxSelect.start = function(data) { + var self = this; + + if ($.isArray(data)) { + self.settings.data = cxSelect.getData(data, self.settings.jsonSpace); + }; + + if (!self.selectArray.length) {return}; + + // 保存默认值 + for (var i = 0, l = self.selectArray.length; i < l; i++) { + if (typeof self.selectArray[i].attr('data-value') !== 'string' && self.selectArray[i][0].options.length) { + self.selectArray[i].attr('data-value', self.selectArray[i].val()); + }; + }; + + if (self.settings.data || (typeof self.selectArray[0].data('url') === 'string' && self.selectArray[0].data('url').length)) { + cxSelect.getOptionData.call(self, 0); + } else if (self.selectArray[0][0].options.length && typeof self.selectArray[0].attr('data-value') === 'string' && self.selectArray[0].attr('data-value').length) { + self.selectArray[0].val(self.selectArray[0].attr('data-value')); + cxSelect.getOptionData.call(self, 1); + } else { + self.selectArray[0].prop('disabled', false).css({ + 'display': '', + 'visibility': '' + }); + }; + }; + + // 获取选项数据 + cxSelect.getOptionData = function(index) { + var self = this; + + if (typeof index !== 'number' || isNaN(index) || index < 0 || index >= self.selectArray.length) {return}; + + var _indexPrev = index - 1; + var _select = self.selectArray[index]; + var _selectData; + var _valueIndex; + var _dataUrl = _select.data('url'); + var _jsonSpace = typeof _select.data('jsonSpace') === 'undefined' ? self.settings.jsonSpace : _select.data('jsonSpace'); + var _query = {}; + var _queryName; + var _selectName; + var _selectValue; + + cxSelect.clear.call(self, index); + + // 使用独立接口 + if (typeof _dataUrl === 'string' && _dataUrl.length) { + if (index > 0) { + for (var i = 0, j = 1; i < index; i++, j++) { + _queryName = self.selectArray[j].data('queryName'); + _selectName = self.selectArray[i].attr('name'); + _selectValue = self.selectArray[i].val(); + + if (typeof _queryName === 'string' && _queryName.length) { + _query[_queryName] = _selectValue; + } else if (typeof _selectName === 'string' && _selectName.length) { + _query[_selectName] = _selectValue; + }; + }; + }; + + $.getJSON(_dataUrl, _query, function(json) { + _selectData = cxSelect.getData(json, _jsonSpace); + + cxSelect.buildOption.call(self, index, _selectData); + }); + + // 使用整合数据 + } else if (self.settings.data && typeof self.settings.data === 'object') { + _selectData = self.settings.data; + + for (var i = 0; i < index; i++) { + _valueIndex = cxSelect.getIndex(self.selectArray[i][0].selectedIndex, typeof self.selectArray[i].data('required') === 'boolean' ? self.selectArray[i].data('required') : self.settings.required); + + if (typeof _selectData[_valueIndex] === 'object' && $.isArray(_selectData[_valueIndex][self.settings.jsonSub]) && _selectData[_valueIndex][self.settings.jsonSub].length) { + _selectData = _selectData[_valueIndex][self.settings.jsonSub]; + } else { + _selectData = null; + break; + }; + }; + + cxSelect.buildOption.call(self, index, _selectData); + }; + }; + + // 构建选项列表 + cxSelect.buildOption = function(index, data) { + var self = this; + + var _select = self.selectArray[index]; + var _required = typeof _select.data('required') === 'boolean' ? _select.data('required') : self.settings.required; + var _firstTitle = typeof _select.data('firstTitle') === 'undefined' ? self.settings.firstTitle : _select.data('firstTitle'); + var _firstValue = typeof _select.data('firstValue') === 'undefined' ? self.settings.firstValue : _select.data('firstValue'); + var _jsonName = typeof _select.data('jsonName') === 'undefined' ? self.settings.jsonName : _select.data('jsonName'); + var _jsonValue = typeof _select.data('jsonValue') === 'undefined' ? self.settings.jsonValue : _select.data('jsonValue'); + + if (!$.isArray(data)) {return}; + + var _html = !_required ? '' : ''; + + // 区分标题、值的数据 + if (typeof _jsonName === 'string' && _jsonName.length) { + // 无值字段时使用标题作为值 + if (typeof _jsonValue !== 'string' || !_jsonValue.length) { + _jsonValue = _jsonName; + }; + + for (var i = 0, l = data.length; i < l; i++) { + _html += ''; + }; + + // 数组即为值的数据 + } else { + for (var i = 0, l = data.length; i < l; i++) { + _html += ''; + }; + }; + + _select.html(_html).prop('disabled', false).css({ + 'display': '', + 'visibility': '' + }); + + // 初次加载设置默认值 + if (typeof _select.attr('data-value') === 'string') { + _select.val(String(_select.attr('data-value'))).removeAttr('data-value'); + + if (_select[0].selectedIndex < 0) { + _select[0].options[0].selected = true; + }; + }; + + if (_required || _select[0].selectedIndex > 0) { + _select.trigger('change'); + }; + + }; + + // 改变选择时的处理 + cxSelect.selectChange = function(name) { + var self = this; + + if (typeof name !== 'string' || !name.length) {return}; + + var index; + + name = name.replace(/\s+/g, ','); + name = ',' + name + ','; + + // 获取当前 select 位置 + for (var i = 0, l = self.selectArray.length; i < l; i++) { + if (name.indexOf(',' + self.settings.selects[i] + ',') > -1) { + index = i; + break; + }; + }; + + if (typeof index === 'number' && index > -1) { + index += 1; + cxSelect.getOptionData.call(self, index); + }; + }; + + $.cxSelect = function() { + return cxSelect.apply(this, arguments); + }; + + // 默认值 + $.cxSelect.defaults = { + selects: [], // 下拉选框组 + url: null, // 列表数据文件路径（URL）或数组数据 + data: null, // 自定义数据 + emptyStyle: null, // 无数据状态显示方式 + required: false, // 是否为必选 + firstTitle: '请选择', // 第一个选项的标题 + firstValue: '', // 第一个选项的值 + jsonSpace: '', // 数据命名空间 + jsonName: 'n', // 数据标题字段名称 + jsonValue: '', // 数据值字段名称 + jsonSub: 's' // 子集数据字段名称 + }; + + $.fn.cxSelect = function(settings, callback) { + this.each(function(i) { + $.cxSelect(this, settings, callback); + }); + return this; + }; +})); diff --git a/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.min.js b/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.min.js new file mode 100644 index 00000000..0e53c4e0 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.min.js @@ -0,0 +1,11 @@ +/*! + * jQuery cxSelect + * @name jquery.cxselect.js + * @version 1.4.2 + * @date 2017-09-26 + * @author ciaoca + * @email ciaoca@gmail.com + * @site https://github.com/ciaoca/cxSelect + * @license Released under the MIT license + */ +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(window.jQuery||window.Zepto||window.$)}(function(a){var b=function(){var d,e,f,g,h,i;for(g=0,h=arguments.length;h>g;g++)b.isJquery(arguments[g])||b.isZepto(arguments[g])?d=arguments[g]:b.isElement(arguments[g])?d=a(arguments[g]):"function"==typeof arguments[g]?f=arguments[g]:"object"==typeof arguments[g]&&(e=arguments[g]);return i=new b.init(d,e),"function"==typeof f&&f(i),i};b.isElement=function(a){return a&&("function"==typeof HTMLElement||"object"==typeof HTMLElement)&&a instanceof HTMLElement?!0:a&&a.nodeType&&1===a.nodeType?!0:!1},b.isJquery=function(a){return a&&a.length&&("function"==typeof jQuery||"object"==typeof jQuery)&&a instanceof jQuery?!0:!1},b.isZepto=function(a){return a&&a.length&&("function"==typeof Zepto||"object"==typeof Zepto)&&Zepto.zepto.isZ(a)?!0:!1},b.getIndex=function(a,b){return b?a:a-1},b.getData=function(a,b){if("string"==typeof b&&b.length){b=b.split(".");for(var c=0,d=b.length;d>c;c++)a=a[b[c]]}return a},b.init=function(c,d){var f,g,e=this;(b.isJquery(c)||b.isZepto(c))&&(f={dom:{box:c}},e.attach=b.attach.bind(f),e.detach=b.detach.bind(f),e.setOptions=b.setOptions.bind(f),e.clear=b.clear.bind(f),f.changeEvent=function(){b.selectChange.call(f,this.className)},f.settings=a.extend({},a.cxSelect.defaults,d,{url:f.dom.box.data("url"),emptyStyle:f.dom.box.data("emptyStyle"),required:f.dom.box.data("required"),firstTitle:f.dom.box.data("firstTitle"),firstValue:f.dom.box.data("firstValue"),jsonSpace:f.dom.box.data("jsonSpace"),jsonName:f.dom.box.data("jsonName"),jsonValue:f.dom.box.data("jsonValue"),jsonSub:f.dom.box.data("jsonSub")}),g=f.dom.box.data("selects"),"string"==typeof g&&g.length&&(f.settings.selects=g.split(",")),e.setOptions(),e.attach(),f.settings.url||f.settings.data?a.isArray(f.settings.data)?b.start.call(f,f.settings.data):"string"==typeof f.settings.url&&f.settings.url.length&&a.getJSON(f.settings.url,function(a){b.start.call(f,a)}):b.start.apply(f))},b.setOptions=function(c){var e,f,g,d=this;if(c&&a.extend(d.settings,c),(!a.isArray(d.selectArray)||!d.selectArray.length||c&&c.selects)&&(d.selectArray=[],a.isArray(d.settings.selects)&&d.settings.selects.length))for(f=0,g=d.settings.selects.length;g>f&&(e=d.dom.box.find("select."+d.settings.selects[f]),e&&e.length);f++)d.selectArray.push(e);c&&(!a.isArray(c.data)&&"string"==typeof c.url&&c.url.length?a.getJSON(d.settings.url,function(a){b.start.call(d,a)}):b.start.call(d,c.data))},b.attach=function(){var a=this;a.attachStatus||a.dom.box.on("change","select",a.changeEvent),"boolean"==typeof a.attachStatus&&b.start.call(a),a.attachStatus=!0},b.detach=function(){var a=this;a.dom.box.off("change","select",a.changeEvent),a.attachStatus=!1},b.clear=function(a){var d,e,b=this,c={display:"",visibility:""};for(a=isNaN(a)?0:a,d=a,e=b.selectArray.length;e>d;d++)b.selectArray[d].empty().prop("disabled",!0),"none"===b.settings.emptyStyle?c.display="none":"hidden"===b.settings.emptyStyle&&(c.visibility="hidden"),b.selectArray[d].css(c)},b.start=function(c){var e,f,d=this;if(a.isArray(c)&&(d.settings.data=b.getData(c,d.settings.jsonSpace)),d.selectArray.length){for(e=0,f=d.selectArray.length;f>e;e++)"string"!=typeof d.selectArray[e].attr("data-value")&&d.selectArray[e][0].options.length&&d.selectArray[e].attr("data-value",d.selectArray[e].val());d.settings.data||"string"==typeof d.selectArray[0].data("url")&&d.selectArray[0].data("url").length?b.getOptionData.call(d,0):d.selectArray[0][0].options.length&&"string"==typeof d.selectArray[0].attr("data-value")&&d.selectArray[0].attr("data-value").length?(d.selectArray[0].val(d.selectArray[0].attr("data-value")),b.getOptionData.call(d,1)):d.selectArray[0].prop("disabled",!1).css({display:"",visibility:""})}},b.getOptionData=function(c){var f,g,h,i,j,k,l,m,n,o,p,d=this;if(!("number"!=typeof c||isNaN(c)||0>c||c>=d.selectArray.length))if(f=d.selectArray[c],i=f.data("url"),j="undefined"==typeof f.data("jsonSpace")?d.settings.jsonSpace:f.data("jsonSpace"),k={},b.clear.call(d,c),"string"==typeof i&&i.length){if(c>0)for(o=0,p=1;c>o;o++,p++)l=d.selectArray[p].data("queryName"),m=d.selectArray[o].attr("name"),n=d.selectArray[o].val(),"string"==typeof l&&l.length?k[l]=n:"string"==typeof m&&m.length&&(k[m]=n);a.getJSON(i,k,function(a){g=b.getData(a,j),b.buildOption.call(d,c,g)})}else if(d.settings.data&&"object"==typeof d.settings.data){for(g=d.settings.data,o=0;c>o;o++){if(h=b.getIndex(d.selectArray[o][0].selectedIndex,"boolean"==typeof d.selectArray[o].data("required")?d.selectArray[o].data("required"):d.settings.required),"object"!=typeof g[h]||!a.isArray(g[h][d.settings.jsonSub])||!g[h][d.settings.jsonSub].length){g=null;break}g=g[h][d.settings.jsonSub]}b.buildOption.call(d,c,g)}},b.buildOption=function(b,c){var k,l,m,d=this,e=d.selectArray[b],f="boolean"==typeof e.data("required")?e.data("required"):d.settings.required,g="undefined"==typeof e.data("firstTitle")?d.settings.firstTitle:e.data("firstTitle"),h="undefined"==typeof e.data("firstValue")?d.settings.firstValue:e.data("firstValue"),i="undefined"==typeof e.data("jsonName")?d.settings.jsonName:e.data("jsonName"),j="undefined"==typeof e.data("jsonValue")?d.settings.jsonValue:e.data("jsonValue");if(a.isArray(c)){if(k=f?"":'","string"==typeof i&&i.length)for("string"==typeof j&&j.length||(j=i),l=0,m=c.length;m>l;l++)k+='";else for(l=0,m=c.length;m>l;l++)k+='";e.html(k).prop("disabled",!1).css({display:"",visibility:""}),"string"==typeof e.attr("data-value")&&(e.val(String(e.attr("data-value"))).removeAttr("data-value"),e[0].selectedIndex<0&&(e[0].options[0].selected=!0)),(f||e[0].selectedIndex>0)&&e.trigger("change")}},b.selectChange=function(a){var d,e,f,c=this;if("string"==typeof a&&a.length){for(a=a.replace(/\s+/g,","),a=","+a+",",e=0,f=c.selectArray.length;f>e;e++)if(a.indexOf(","+c.settings.selects[e]+",")>-1){d=e;break}"number"==typeof d&&d>-1&&(d+=1,b.getOptionData.call(c,d))}},a.cxSelect=function(){return b.apply(this,arguments)},a.cxSelect.defaults={selects:[],url:null,data:null,emptyStyle:null,required:!1,firstTitle:"请选择",firstValue:"",jsonSpace:"",jsonName:"n",jsonValue:"",jsonSub:"s"},a.fn.cxSelect=function(b,c){return this.each(function(){a.cxSelect(this,b,c)}),this}}); \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/templates/demo/form/cxselect.html b/ruoyi-admin/src/main/resources/templates/demo/form/cxselect.html new file mode 100644 index 00000000..d1c4fd4e --- /dev/null +++ b/ruoyi-admin/src/main/resources/templates/demo/form/cxselect.html @@ -0,0 +1,161 @@ + + + + + + +
+
+
+
+
+
多级联动下拉https://github.com/ciaoca/cxSelect
+
+
+

简单联动示例。

+
+
+ +
+
+ +
+
+
+ +

国内省市区联动。

+
+
+ +
+
+ +
+
+ +
+
+
+ +

自定义选项。

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ + + + + diff --git a/ruoyi-admin/src/main/resources/templates/demo/table/search.html b/ruoyi-admin/src/main/resources/templates/demo/table/search.html index 0ddb6657..57fe48ac 100644 --- a/ruoyi-admin/src/main/resources/templates/demo/table/search.html +++ b/ruoyi-admin/src/main/resources/templates/demo/table/search.html @@ -62,6 +62,29 @@ +
+

多级联动下拉查询

+
+
+
    +
  • + 商户编号： +
    • +
  • + 充值类型： +
    • +
  • + 充值路由： +
    • +
  • +  搜索 +  重置 +
    • +
+
+
+
+

下拉多选条件查询

@@ -164,5 +187,16 @@
+ + + diff --git a/ruoyi-admin/src/main/resources/templates/include.html b/ruoyi-admin/src/main/resources/templates/include.html index 02b48f6e..34ee343d 100644 --- a/ruoyi-admin/src/main/resources/templates/include.html +++ b/ruoyi-admin/src/main/resources/templates/include.html @@ -139,6 +139,11 @@ + +
+ +
+
diff --git a/ruoyi-admin/src/main/resources/templates/index.html b/ruoyi-admin/src/main/resources/templates/index.html index 4a04f659..1ea2980c 100644 --- a/ruoyi-admin/src/main/resources/templates/index.html +++ b/ruoyi-admin/src/main/resources/templates/index.html @@ -95,6 +95,7 @@
  • 富文本编辑器
  • 左右互选组件
  • 搜索自动补全
    • +
  • 多级联动下拉
  • 表格 diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/CxSelect.java b/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/CxSelect.java new file mode 100644 index 00000000..28c12352 --- /dev/null +++ b/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/CxSelect.java @@ -0,0 +1,69 @@ +package com.ruoyi.common.core.domain; + +import java.io.Serializable; +import java.util.List; + +/** + * CxSelect树结构实体类 + * + * @author ruoyi + */ +public class CxSelect implements Serializable +{ + private static final long serialVersionUID = 1L; + + /** + * 数据值字段名称 + */ + private String v; + + /** + * 数据标题字段名称 + */ + private String n; + + /** + * 子集数据字段名称 + */ + private List s; + + public CxSelect() + { + } + + public CxSelect(String v, String n) + { + this.v = v; + this.n = n; + } + + public List getS() + { + return s; + } + + public void setN(String n) + { + this.n = n; + } + + public String getN() + { + return n; + } + + public void setS(List s) + { + this.s = s; + } + + public String getV() + { + return v; + } + + public void setV(String v) + { + this.v = v; + } +}