manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增下拉框级联选择组件，城市联动例子

Browse Source
This commit is contained in:
thinkgem
2021-04-25 16:39:30 +08:00
parent 7c2c1b2679
commit 8f7452e08e
2 changed files with 124 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
modules/core/src/main/resources/static/jquery-plugins/jquery.cascadeSelect.js Normal file
View File

@@ -0,0 +1,90 @@
/*!
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
* 级联选择插件
* @author ThinkGem
* @version 2021-4-25
*/
(function ($) {
$.fn.cascadeSelect = function (options) {
var self = this, opts = $.extend({
data: [],
id: "id",
name: "name",
children: "children",
blankOptionLabel: "请选择",
cssClass: 'form-control',
cssStyle: "width:150px",
change: function(){}
}, options);
var data = opts.data,
i, l, key = "id", parentKey = "pId", childKey = "children";
if (Object.prototype.toString.apply(data) === "[object Array]") {
var treeData = [], map = [];
for (i=0, l=data.length; i<l; i++) {
map[data[i][key]] = data[i];
}
for (i=0, l=data.length; i<l; i++) {
if (map[data[i][parentKey]] && data[i][key] != data[i][parentKey]) {
if (!map[data[i][parentKey]][childKey]){
map[data[i][parentKey]][childKey] = [];
}
map[data[i][parentKey]][childKey].push(data[i]);
} else {
treeData.push(data[i]);
}
}
opts.data = treeData;
}else {
opts.data = [data];
}
$("<style></style>").html("\n\
.input-group.cascade-select .form-control {display:table-cell;}\n\
.input-group.cascade-select .form-control:not(:last-child) {border-right:0}\n\
.input-group.cascade-select .form-control:first-child:last-child {border-radius:4px}\n\
").appendTo($(self).addClass('cascade-select').parent());
var html = '', data = opts.data, params = [data];
html += '<select class="'+opts.cssClass+'" style="'+opts.cssStyle+'">'
+'<option value="">'+opts.blankOptionLabel+'</option>';
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i][opts.id]
+ '|' + (data[i][opts.children] == null ? null : i)
+ '|' + (escape(data[i][opts.name]))
+ '">' + data[i][opts.name] + '</option>';
}
html += '</select>';
$(self).html(html);
var createSelect = function() {
$(self).children('select').change(function () {
var self2 = this, val = $(self2).val().split("|")[1];
$(self2).nextAll('select').remove();
if (val % 1 == 0) {
var idx = $(self2).index(), html2 = "";
params[idx + 1] = params[idx][val][opts.children];//一条线放一个数组 不同线重置
html2 += '<select class="'+opts.cssClass+'" style="'+opts.cssStyle+'">'
+'<option value="">'+opts.blankOptionLabel+'</option>';
for (var i = 0; i < params[idx + 1].length; i++) {
html2 += '<option value="' + params[idx + 1][i][opts.id]
+ '|' + (params[idx + 1][i][opts.children] == null ? null : i)
+ '|' + (escape(params[idx + 1][i][opts.name]))
+ '">' + params[idx + 1][i][opts.name] + '</option>';
}
html2 += '</select>';
$(self2).after(html2);
$(self).children("select").unbind("change");
createSelect();
}
var vals = [], names = [];
$(self).find('select').each(function(){
var val = $(this).val();
if (val != ''){
vals.push(val.split("|")[0]);
names.push(unescape(val.split("|")[2]));
}
});
opts.change(vals, names);
})
}
createSelect();
}
})(jQuery);

35
web/src/main/resources/views/modules/demo/demoFormEditForm.html
View File

@@ -163,7 +163,7 @@
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 区域选择（异步）：<i class="fa icon-question hide"></i></label>
<span class="required hide">*</span> 城市选择（异步）：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:treeselect id="testAreaCode" title="区域选择"
path="testAreaCode" labelPath="testAreaName"
@@ -173,6 +173,39 @@
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 城市联动：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<div class="input-group" id="cascadeSelect"></div>
<script src="${ctxStatic}/jquery-plugins/jquery.cascadeSelect.js?${_version}"></script>
<script type="text/javascript">
$(function(){
js.ajaxSubmit(ctx + '/sys/area/treeData', function(data){
$("#cascadeSelect").cascadeSelect({
data: data, cssStyle: 'width:150px',
change: function(vals, names){
$('#areaSelectValue').val(vals.join(',') + ' | ' + names.join('/'))
}
})
});
});
</script>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 联动选择结果：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:input path="areaSelectValue" maxlength="200" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">