仿jstree实现左右三级联动

Html

Css

/*权限区域选择*/
.duojildbox {
	background:transparent url('../img/switch.png') no-repeat 50% 50%;
	width:auto;
}
.duojildbox li {
	list-style:none;
}
.duojildbox .agentsright {
	float:right;
}
.duojildbox .pubagentsbox {
	display:inline-block;
	width:45%;
	border:#ccc solid 1px;
	border-radius:6px;
	min-height:300px;
}
.duojildbox .pubagentsbox h2 {
	font-size:16px;
	color:#666;
	text-align:center;
	padding:10px 0;
	border-bottom:#f2f2f2 solid 1px;
	margin:0;
}
.duojildbox .pubagentsbox ul {
	padding:0px;
	margin:0;
}
.duojildbox .pubagentsbox >ul {
	max-height:260px;
	overflow-y:auto;
}
.duojildbox .pubagentsbox ul a {
	padding:6px 6px 6px 10px;
}
.duojildbox .pubagentsbox ul ul a {
	padding:6px 6px 6px 26px;
}
.duojildbox .pubagentsbox ul ul ul a {
	padding:6px 6px 6px 42px;
}
.duojildbox .pubagentsbox li a {
	display:block;
	border-bottom:#f9f9f9 solid 1px;
	padding:4px 10px;
	margin:4px;
	text-decoration:none;
}
.duojildbox .pubagentsbox li a:hover {
	background:#006DCC;
	color:#fff;
}
.agentsright li {
	display:none;
}

$(function() {

//区域权限配置
    var $agentsleft = $(".agentsleft");
    var i = 0;
    var leftlinum = $(".agentsleft ul li").length;
    //动态给所有li加id
    $(".agentsleft ul li").each(function() {
        $(this).attr("id", "address" + ++i);
    });

//把待选区内容结构放到已选区内容
    var $lefthtml = $(".agentsleft > ul").html();
    $(".agentsright > ul").append($lefthtml);

//点击待选区里面的li操作
    $agentsleft.on("click", "li", function(e) {
        e.stopPropagation();
        var leftid = $(this).attr('id');
        var $rightdq = $(".agentsright #" + leftid)
        $rightdq.parent().parent().parent().parent().show();
        $rightdq.parent().parent().show();
        $rightdq.find("li").show();
        $rightdq.show();
        var linum = $(this).siblings("li").length;
        $(this).children("li").removeClass().addClass("xuzhong")

//判断当前是不是全部都是隐藏元素

var changenum = $(this).siblings(".xuzhong").length;
        if (linum == changenum) {
            $(this).parent().parent("li").removeClass().addClass("xuzhong").hide();
        }
        console.log(changenum);

$(this).removeClass().addClass("xuzhong").hide();

})

//点击已选区里面的操作
    var $agentsright = $(".agentsright");
    $agentsright.on("click", "li", function(e) {
        e.stopPropagation();
        var rightid = $(this).attr('id');
        var $leftdq = $(".agentsleft #" + rightid)
        $leftdq.parent().parent().parent().parent("li").show();
        $leftdq.parent().parent("li").show();
        $leftdq.find("li").show();
        $leftdq.show();
        var linum = $(this).siblings("li").length;
        $(this).children("li").removeClass().addClass("changequyu")

//判断当前是不是全部都是隐藏元素

var changenum = $(this).siblings(".changequyu").length;
        if (linum == changenum) {
            $(this).parent().parent("li").removeClass().addClass("changequyu").hide();
        }
        console.log(changenum);

$(this).removeClass().addClass("changequyu").hide();

})
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

仿jstree实现左右三级联动



代码描述：用jquery插件实现数据三级左右联动

1

最新

发表评论全部评论

暂时没有评论！

石头0

2017/3/31 14:01:45

bootstrap的multi-select.js插件只能实现两级的数据联动，模仿着他实现了三级数据联动。
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

石头

相关代码

待选区域

已选区域

仿jstree实现左右三级联动

最新