工作要实现一个多层级的，只能选则最底层的一个需求。select 满足不了要求。就花了一些时间。利用 ztree 做了一下联动。效果勉强满意。大家可以借鉴一下。
<!-- jq -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!-- ztree -->
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="ztree/js/jquery.ztree.all-3.5.js"></script>层级数据
var tmp_arr = [
{id:1, pId:0, name: "父节点1"},
{id:2, pId:0, name: "父节点2"},
{id:11, pId:1, name: "子节点11"},
{id:12, pId:1, name: "子节点12"},
{id:13, pId:1, name: "子节点13"},
{id:14, pId:1, name: "子节点14"},
{id:15, pId:1, name: "子节点15"},
{id:1131, pId:11, name: "三级节点1131"},
{id:1132, pId:11, name: "三级节点1132"},
{id:1133, pId:11, name: "三级节点1133"},
{id:1231, pId:12, name: "三级节点1231"},
{id:1232, pId:12, name: "三级节点1232"},
{id:1233, pId:12, name: "三级节点1233"},
{id:1331, pId:13, name: "三级节点1331"},
{id:1332, pId:13, name: "三级节点1332"},
{id:1333, pId:13, name: "三级节点1333"},
{id:1431, pId:14, name: "三级节点1431"},
{id:1432, pId:14, name: "三级节点1432"},
{id:1433, pId:14, name: "三级节点1433"},
{id:1531, pId:15, name: "三级节点1531"},
{id:1532, pId:15, name: "三级节点1532"},
{id:1533, pId:15, name: "三级节点1533"},
{id:21, pId:2, name: "子节点21"},
{id:22, pId:2, name: "子节点22"},
{id:23, pId:2, name: "子节点23"},
{id:2131, pId:21, name: "三级节点2131"},
{id:2132, pId:21, name: "三级节点2132"},
{id:2133, pId:21, name: "三级节点2133"},
];单选的代码块
<div class="form-group tree-group mb-4 clearfix">
<label class="col-sm-2 control-label">
单选：
</label>
<div class="col-sm-9">
<div class="input-group input-group-tree focused">
<!-- 输入框 -->
<input type="text" class="form-control long cursor-def JS_show_top_tree" name="top_name" value="" placeholder="请选择" readonly="readonly">
<input type="hidden" name="top_id" value="">
<script>
var top_name = $('input[name="top_name"]');
var top_id = $('input[name="top_id"]');
</script>
<!-- 清除按钮 -->
<div class="clear_tree JS_clear_top_tree">
<i>清除</i>
</div>
<!-- 树状结构 -->
<div class="ztree_wp JS_top_tree">
<ul id="topZtree" class="ztree"></ul>
<div class="close_tree JS_close_top_tree">
<i>X</i>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var setting = {
check: {
enable: true
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("topZtree");
if (treeNode.isParent) {
// 点击选中的父节点
zTree.expandNode(treeNode);
return false;
} else {
// 当前选中执行取消
if(treeNode.checked){
// 选中的子节点
treeNode.checked = false;
zTree.updateNode(treeNode);
top_name.val('');
top_id.val('');
}else{
// 当前取消执行选中
zTree.checkAllNodes(false);
// 选中的子节点
treeNode.checked = true;
zTree.updateNode(treeNode);
top_name.val(treeNode.name);
top_id.val(treeNode.id);
}
return true;
}
},
beforeCheck : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("topZtree");
zTree.checkAllNodes(false);
return true;
},
onCheck : function(e, treeId, treeNode) {
console.log("当前被选择的节点：");
console.log(treeNode);
top_name.val(treeNode.name);
top_id.val(treeNode.id);
}
}
};
// 实例化数据
$.fn.zTree.init($("#topZtree"), setting, tmp_arr);
//禁用或者 隐藏 所有父节点 的checkbox
var zTree = $.fn.zTree.getZTreeObj("topZtree");
var nodes = zTree.transformToArray(zTree.getNodes());
for (var i=0; i<nodes.length; i++) {
if (nodes[i].isParent){
//这里选择的是禁用
//zTree.setChkDisabled(nodes[j], true);
// 或者选择 隐藏
nodes[i].nocheck = true;
zTree.updateNode(nodes[i]);
}
}
});
// 点击显示弹层
$(document).on('click','.JS_show_top_tree',function(){
$('.JS_bottom_tree').hide()
var is_show = $('.JS_top_tree').css('display');
if(is_show == 'none'){
$('.JS_top_tree').show()
}else{
$('.JS_top_tree').hide()
}
})
// 点击关闭弹层柱状图
$(document).on('click','.JS_close_top_tree',function(){
$('.JS_top_tree').hide()
})
// 点击清除单选
$(document).on('click','.JS_clear_top_tree',function(){
var zTree = $.fn.zTree.getZTreeObj("topZtree");
zTree.checkAllNodes(false);
top_name.val('');
top_id.val('');
})
</script>
</div>
</div>多选的代码
<div class="form-group tree-group mb-4 clearfix">
<label class="col-sm-2 control-label">
多选：
<br>
<span class="jianyi">（最多选4项）</span>
</label>
<div class="col-sm-9">
<div class="input-group input-group-tree">
<!----国家网络平台分类---->
<input type="text" class="form-control long cursor-def JS_show_bottom_tree" name="names" value="" placeholder="最多选4项" readonly="readonly">
<input type="hidden" name="ids" value="">
<script>
var names = $('input[name="names"]');
var ids = $('input[name="ids"]');
</script>
<div class="clear_tree JS_clear_bottom_tree">
<i>清除</i>
</div>
<div class="ztree_wp JS_bottom_tree">
<ul id="bottomZtree" class="ztree yqfl_ztree "></ul>
<div class="close_tree JS_close_bottom_tree">
<i>X</i>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var bottomSetting = {
check: {
enable: true
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("bottomZtree");
if (treeNode.isParent) {
// 点击选中的父节点
zTree.expandNode(treeNode);
return false;
} else {
var checkCount = zTree.getCheckedNodes(true).length,
nocheckCount = zTree.getCheckedNodes(false).length,
changeCount = zTree.getChangeCheckedNodes().length;
console.log(checkCount);
var is_checked = treeNode.checked;
if(is_checked){
treeNode.checked = false;
zTree.updateNode(treeNode);
_initChecked(zTree);
}else if(checkCount < 4){
treeNode.checked = true;
zTree.updateNode(treeNode);
_initChecked(zTree);
}else{
alert('只能选择4个！')
}
return true;
}
},
beforeCheck : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("bottomZtree");
console.log(treeNode);
if (treeNode.isParent) {
// 点击选中的父节点
zTree.expandNode(treeNode);
return false;
} else {
var checkCount = zTree.getCheckedNodes(true).length;
if(checkCount >= 4 && !is_checked ){
alert('只能选择4个！')
return false;
}
return true;
}
},
onCheck : function(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("bottomZtree");
_initChecked(zTree);
}
}
}
// 实例化数据
var zTree = $.fn.zTree.init($("#bottomZtree"), bottomSetting, tmp_arr);
//禁用或者 隐藏 所有父节点 的checkbox
var zTree = $.fn.zTree.getZTreeObj("bottomZtree");
var nodes = zTree.transformToArray(zTree.getNodes());
for (var i=0; i<nodes.length; i++) {
if (nodes[i].isParent){
//这里选择的是禁用
//zTree.setChkDisabled(nodes[j], true);
// 或者选择 隐藏
nodes[i].nocheck = true;
zTree.updateNode(nodes[i]);
}
}
});
function _initChecked(obj){
var checkedNodes = obj.getCheckedNodes(true);
console.log(checkedNodes);
var tmp_ids = [];
var tmp_names = []
checkedNodes.forEach(function(item){
console.log(item);
tmp_ids.push(item.id);
tmp_names.push(item.name);
})
var last_ids = tmp_ids.join("|")
var last_names = tmp_names.join("|")
names.val(last_names);
ids.val(last_ids);
}
// 显示学科领取弹层
$(document).on('click','.JS_show_bottom_tree',function(){
$('.JS_top_tree').hide()
var is_show = $('.JS_bottom_tree').css('display');
if(is_show == 'none'){
$('.JS_bottom_tree').show()
}else{
$('.JS_bottom_tree').hide()
}
})
// 关闭学科领取弹层
$(document).on('click','.JS_close_bottom_tree',function(){
$('.JS_bottom_tree').hide()
})
// 点击清除
$(document).on('click','.JS_clear_bottom_tree',function(){
names.val('');
ids.val('');
var zTree = $.fn.zTree.getZTreeObj("bottomZtree");
zTree.checkAllNodes(false);
})
</script>
</div>
</div>附带一下下载链接
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
