html:
<div class="wraper">
<div class="transfer-left transfer-box">
<div class="tabbox-head">
<input type="checkbox" class="checks" οnclick="allChecked(this)"/>
<span>左列</span>
</div>
<div class="tabbox-body">
<ul class="tree">
<!--动态添加 -->
</ul>
</div>
</div>
<div class="operation-box">
<button class="btn-switch to-right" οnclick="switchTransfer(this)" disabled="disabled">></button>
<button class="btn-switch to-left" οnclick="switchTransfer(this)" disabled="disabled"><</button>
</div>
<div class="transfer-right transfer-box">
<div class="tabbox-head">
<input type="checkbox" class="checks" οnclick="allChecked(this)"/>
<span>右列</span>
</div>
<div class="tabbox-body">
<ul class="tree">
<!--动态添加 -->
</ul>
</div>
</div>
</div><!-- wraper -->body{
font-size: 16px;
font-family: 'PingFang SC','Hiragino Sans GB','PingHei','Open Sans','sans-serif','Helvetica Neue','Helvetica','Microsoft YaHei','SimSun','Arial';
background:#E4E6CA;
}
ul,li{list-style: none;}
.wraper{width:100%;height:100%;margin:5% 20% 0;}
.transfer-box{width:25%;height:750px;border:1px solid #eee;padding: 10px;float: left;background:#FAFCED}
.tabbox-head{width:100%;text-align: center; height:40px;line-height:40px;border-bottom: 1px solid #eee;}
.tabbox-body{width:100%;height:710px;}
.tabbox-body .sub-menu{display: none;}
.operation-box{float: left; margin:10% 2% 0;}
.btn-switch{
display: block;margin-bottom: 10px;width:35px;height:25px;
transition:background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-webkit-transition: background-color 0.3s linear;
}
.to-right{cursor: not-allowed;}
.to-left{cursor: not-allowed;}
.active{background:#57C5F7;border:1px solid #2B79F3;color:white;};(function($){
$.ajax({
type:"get",
url:"json/data.json",
cache:false,
data:{},
dataType:'json',
success:function(data){
//console.log(data)
buildTree(data.data);
}
});
})(jQuery);
var jq = $;
function buildTree(list){ //构造树形列表
if(list != ''){
$('.transfer-left').find('.tree').html('');
var whtml = '';
var ehtml = '';
for(var i=0;i<list.length;i++){
//0 表示一级菜单 ， 1 表示左列 2 右列
if(list[i].parentId == 0 && list[i].powerId == 1){
whtml += '<li class="parent-li">'
whtml += '<input type="checkbox" id="'+list[i].id+'" name="'+list[i].parentId+'" οnclick="change_F(this,event)">'
whtml += '<span οnclick="toggleEvent(this)" class="txt">'+list[i].name+'</span>'
whtml += '<ul class="sub-menu">'
for(var a=0;a<list.length;a++){
if(list[a].parentId == list[i].id){
whtml += '<li>'
whtml += '<input type="checkbox" id="'+list[a].id+'" name="'+list[a].parentId+'" οnclick="change_S(this,event)"> '
whtml += '<label for="'+list[a].id+'"><span>'+list[a].name+'</span> </label>'
whtml += '</li>'
}
}
whtml += '</ul>'
whtml += '</li>'
}
else if(list[i].parentId == 0 && list[i].powerId == 2){
ehtml += '<li class="parent-li">'
ehtml += '<input type="checkbox" id="'+list[i].id+'" name="'+list[i].parentId+'" οnclick="change_F(this,event)">'
ehtml += '<span οnclick="toggleEvent(this)" class="txt">'+list[i].name+'</span>'
ehtml += '<ul class="sub-menu">'
for(var a=0;a<list.length;a++){
if(list[a].parentId == list[i].id){
ehtml += '<li>'
ehtml += '<input type="checkbox" id="'+list[a].id+'" name="'+list[a].parentId+'" οnclick="change_S(this,event)">'
ehtml += '<label for="'+list[a].id+'"><span>'+list[a].name+'</span></label>'
ehtml += '</li>'
}
}
ehtml += '</ul>'
ehtml += '</li>'
}
};
$('.transfer-left').find('.tree').append(whtml);
$('.transfer-right').find('.tree').append(ehtml);
}
};
function change_F(they,ev){ //一级菜单
var checkboxs = $(they).siblings('ul').find(':checkBox');
var bool =false;
for(var i=0;i<checkboxs.length;i++){
if($(they).prop("checked")){
checkboxs[i].checked = true;
bool = true;
}else{
checkboxs[i].checked = false;
}
}
checkTagClass($(they),bool);
ev.stopPropagation();
};
function change_S(they,ev){ //二级菜单
var el = jq(they).parents('.parent-li');
var che = jq(el).children('.sub-menu').find(':checked');
//子菜单勾选，自动勾选父菜单
if(che.length>0){
jq(el).find('input:first')[0].checked = true
}
else{
jq(el).find('input:first')[0].checked = false
}
if($(they).prop("checked")){
checkTagClass($(they),true)
}else{
checkTagClass($(they),false)
}
ev.stopPropagation();
};
function toggleEvent(they){ //菜单显示切换
$(they).siblings('ul').slideToggle(30)
};
function allChecked(they){ //全选
var checkboxs = $(they).parent().siblings('.tabbox-body').find(':checkbox');
var bool =false;
for(var i=0;i<checkboxs.length;i++){
if($(they).prop("checked")){
checkboxs[i].checked = true;
bool = true;
}else{
checkboxs[i].checked = false;
}
}
checkTagClass($(they),bool);
};
function checkTagClass($that,status){ //按钮点亮事件
var parentsTransfer = $that.parents(".transfer-box");
var tagRight = "to-right";
var tarLeft = "to-left";
if(parentsTransfer.hasClass("transfer-left")){
if(status){
$('.'+tagRight).removeAttr('disabled').addClass('active').css('cursor','pointer');
}else{
$('.'+tagRight).attr('disabled','disabled').removeClass('active').css('cursor','not-allowed');
}
$('.'+tarLeft).attr('disabled','disabled').removeClass('active').css('cursor','not-allowed');
}else{
if(status){
$('.'+tarLeft).removeAttr('disabled').addClass('active').css('cursor','pointer');
}else{
$('.'+tarLeft).attr('disabled','disabled').removeClass('active').css('cursor','not-allowed');
}
$('.'+tagRight).attr('disabled','disabled').removeClass('active').css('cursor','not-allowed');
}
};
function switchTransfer(they){ //穿梭事件
var ty = $(they);
if(ty.hasClass('to-right')){
$('.transfer-left').find('.checks').removeAttr('checked')
itemli = ty.parent().siblings('.transfer-left').find('li');
boxUl = ty.parent().siblings('.transfer-right').find('ul.tree')
}else{
$('.transfer-right').find('.checks').removeAttr('checked')
itemli = ty.parent().siblings('.transfer-right').find('li');
boxUl = ty.parent().siblings('.transfer-left').find('ul.tree')
}
var checkBoxs = itemli.find(':checked')
var appendText = [];
checkBoxs.each(function(){
$(this).removeAttr('checked')
appendText.push($(this).parents('li'))
$(this).parents('li:first').remove();
});
boxUl.append(treeReset(appendText));
};
function treeReset(text){ //用于穿梭之后重新构造树形列表
if(text==''){return}
var whtml = '';
for(var i=0;i<text.length;i++){
if(text[i].context.name == '0'){
whtml += '<li class="parent-li">'
whtml += '<input type="checkbox" id="'+text[i].context.id+'" name="'+text[i].context.name+'" οnclick="change_F(this,event)">'
whtml += '<span οnclick="toggleEvent(this)" class="txt">'+$(text[i]).find('.txt').text()+'</span>'
whtml += '<ul class="sub-menu">'
for(var a=0;a<text.length;a++){
if(text[i].context.id == text[a].context.name){
whtml += '<li>'
whtml += '<input οnclick="change_S(this,event)" type="checkbox" id="'+text[a].context.id+'" name="'+text[a].context.name+'"> '
whtml += '<label for="'+text[a].context.id+'"><span>'+text[a][0].innerText+'</span></label>'
whtml += '</li>'
}
}
whtml += '</ul>'
whtml += '</li>'
}
}
return whtml;
}
请求的json:{
"data":[
{"id":10,"name":"首页","parentId":0,"powerId":1},
{"id":1011,"name":"sub___首页1","parentId":10,"powerId":1},
{"id":1012,"name":"sub___首页2","parentId":10,"powerId":1},
{"id":1013,"name":"sub___首页3","parentId":10,"powerId":1},
{"id":11,"name":"用户管理","parentId":0,"powerId":2},
{"id":1111,"name":"sub___管理1","parentId":11,"powerId":2},
{"id":1112,"name":"sub___管理2","parentId":11,"powerId":2},
{"id":1113,"name":"sub___管理3","parentId":11,"powerId":2},
{"id":1114,"name":"sub___管理4","parentId":11,"powerId":2},
{"id":12,"name":"权限管理","parentId":0,"powerId":2},
{"id":1211,"name":"sub___管理1","parentId":12,"powerId":2},
{"id":1212,"name":"sub___管理2","parentId":12,"powerId":2},
{"id":1213,"name":"sub___管理3","parentId":12,"powerId":2},
{"id":1314,"name":"sub___管理4","parentId":12,"powerId":2},
{"id":13,"name":"出勤记录","parentId":0,"powerId":1},
{"id":1311,"name":"sub___记录1","parentId":13,"powerId":1},
{"id":1312,"name":"sub___记录2","parentId":13,"powerId":1},
{"id":1313,"name":"sub___记录3","parentId":13,"powerId":1},
{"id":1314,"name":"sub___记录4","parentId":13,"powerId":1}
]
}效果图：
8253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
