style样式:
.treeBox{width: 400px;
border: 1px solid black; margin: 0px auto;
text-align: center;
padding: 15px;
}
.tree{width: 200px; margin: 0px auto;
text-align: left;margin-bottom: 20px; }
.tree .item i{ font-style: normal; cursor: pointer; line-height: 30px; font-size: 20px;}
.tree input[type='checkbox']{ margin-right: 5px;}
.tree .glyphicon{ margin-right: 5px;}
.hiden{display: none;}
span.check {position: relative;margin-right: 5px;}
span.check .input_check {position: absolute;visibility: hidden;}
span.check .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #ddd;background-color: white;}
span.check .input_check:checked+label{
background-color: #5fb878;
}
span.check .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;
height: 4px; border: 2px solid white;
border-top-color: transparent;border-right-color: transparent; -ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg); transform: rotate(-45deg);}
js的实现:
(function($){
$.fn.extend({
tree:function(options) {
var data = [{"id": 111,"parentId": 0,"number": "2017051012","name": "测试 机构2",
"sysList": [{"id": 114,"parentId": 111,"number": "2017051202","name": "测试 服务站4","sysList": []},
{"id": 141, "parentId": 111,"number": "112335235","name": "测试 服务站6","sysList": [] },
{ "id": 143,"parentId": 111,"number": "0123416","name": "qingya","sysList": []},
{"id": 148, "parentId": 111,"number": "131654","name": "测试--004","sysList": [
{"id": 149,"parentId": 148,"number": "934048","name": "测试--7","sysList": []}]
}]
},
{"id": 112,"parentId": 0,"number": "2017051016","name": "测试 服务站13",
"sysList": [{"id": 113,"parentId": 112,"number": "2017051208","name": "测试 服务站3","sysList": []}]
},
{"id": 108,"parentId": 0,"number": "2017051000","name": "测试 机构1",
"sysList": [{"id": 109,"parentId": 108,"number": "2017051200","name": "测试 服务站1","sysList": []},
{ "id": 110,"parentId": 108,"number": "2017051206","name": "测试 服务站2","sysList": [] },
{ "id": 115,"parentId": 108,"number": "2017051204","name": "测试 服务站5","sysList": []},
{"id": 117, "parentId": 108,"number": "12335235","name": "演示站点","sysList": []},
{ "id": 118,"parentId": 108,"number": "11111100","name": "通州服务站","sysList": [] },
{"id": 138, "parentId": 108,"number": "0123","name": "青阳","sysList": []},
{ "id": 140,"parentId": 108,"number": "3256","name": "青阳","sysList": []},
{"id": 146,"parentId": 108,"number": "123464", "name": "青阳", "sysList": []}]
}];
var treeText = "" ;
var defaluts = {
data: data,
callback:function(option){
}
};
var opts = $.extend(defaluts, options); //使用jQuery.extend 覆盖插件默认参数
var $thisTree = $(this).selector;
showTree($thisTree,opts.data);
function showTree(object,arguments){
var obj = arguments;
for(var i=0;i<obj.length;i++){
list(obj[i],0,obj[i].id);
$(object).html(treeText);
}
}
function list(obj,index) { //一层一层的循环
var length = obj.sysList.length;
addItem(obj,index,length);
if(length == 0) return;
for(var i = 0; i<length; i++) {
list(obj.sysList[i],index + 1);
}
}
function addItem(obj,index,length){ //动态展示这些数据
var strObj = JSON.stringify(obj);
var leftDid = 30*index+"px";
if(index>0){
if(length>0){
treeText += "<div class='item hiden ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"' data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
"<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
"<span class='glyphicon glyphicon-plus ui_block'></span>"+
"<i οnclick='showItem(this,"+length+");'>"+obj.name+"</i>"+
"</div>";
}else{
treeText += " <div class='item hiden ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"' data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
"<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
"<i>"+obj.name+"</i>"+
"</div>";
}
}else{
treeText += " <div class='item ' style='padding-left: "+leftDid+"' data-obj='"+strObj+"' data-id = '"+obj.id+"' data-parentId = '"+obj.parentId+"' data-idLen = '"+index+"'>"+
"<span class='check'><input type='checkbox' value="+obj.id+" class='input_check checkBox' id='"+$thisTree+obj.id+"'><label for='"+$thisTree+obj.id+"'></label></span>"+
"<span class='glyphicon glyphicon-plus ui_block'></span>"+
"<i οnclick='showItem(this,"+length+");'>"+obj.name+"</i>"+
"</div>";
}
}
showItem = function(object,len){ //点击父菜单单时,子菜单显示或影藏
if(len>0){
var togClass = $(object).siblings(".glyphicon").hasClass("glyphicon-plus");
if(togClass){
$(object).siblings(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}else{
$(object).siblings(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
}
}
var parentIndex = $(object).parent("div").attr('data-idLen');
var parentTr = $(object).parent("div");
while(parentTr.html()&&(parentTr = parentTr.next())) {
(+parentTr.attr('data-idLen')==(+parentIndex)+1)&&$(object).siblings(".glyphicon").hasClass("glyphicon-minus")&&parentTr.slideDown("fast");
+parentTr.attr('data-idLen')>(+parentIndex)&&$(object).siblings(".glyphicon").hasClass("glyphicon-plus")&&parentTr.slideUp("fast")&&parentTr.find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
if(+parentTr.attr('data-idLen')<=(+parentIndex)) {
return;
}
}
};
$($thisTree).find(".checkBox").map(function(obj,item){
console.log(obj+"------------"+item.tagName);
$(item).change(function(){
console.log("2----------");
})
})
$($thisTree).find(".checkBox").change(function(){
console.log("check------------");
var parentIndex = $(this).parents(".item").attr('data-parentId');
var $item = $($thisTree).children(".item");
var obj = $(this);
$item.map(function(){
var $this = $(this);
var $currId = $this.attr("data-id");
var $parentId = $this.attr("data-parentId");
if (!obj.is(":checked")){
if($($thisTree).children("[data-parentId="+parentIndex+"]").find("input").is(":checked")){
$($thisTree).children("[data-id="+parentIndex+"]").find("input").prop("checked", true);
}else{
$($thisTree).children("[data-id="+parentIndex+"]").find("input").prop("checked", false);
}
}
if(obj.parents(".item").attr("data-parentId")==$this.attr("data-id")){
if (obj.is(":checked")){
$this.find("input").prop("checked", true);
}
}
if(obj.parents(".item").attr("data-id")==$this.attr("data-parentId")){
if (obj.is(":checked")){
$this.find("input").prop("checked", true);
}else{
$this.find("input").prop("checked", false);
}
}
if($this.find("input").is(":checked")){
if($($thisTree).children("[data-id=" + $parentId + "]").find("input").is(":checked")){
$($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", true);
$($thisTree).children("[data-parentId=" + $currId + "]").find("input").prop("checked", true);
}
if($($thisTree).children("[data-parentId=" + $currId + "]").find("input").is(":checked")){
$($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", true);
}
}else{
if(!$($thisTree).children("[data-id=" + $parentId + "]").find("input").is(":checked")) {
if(!$($thisTree).children("[data-parentId=" + $parentId + "]").find("input").is(":checked")){
$($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", false);
$($thisTree).children("[data-parentId=" + $currId + "]").find("input").prop("checked", false);
}
}
if(!$($thisTree).children("[data-parentId=" + $currId + "]").find("input").is(":checked")){
if(!$($thisTree).children("[data-parentId=" + $parentId + "]").find("input").is(":checked")){
$($thisTree).children("[data-id=" + $parentId + "]").find("input").prop("checked", false);
}
}
}
});
opts.callback(getSelect());
});
//回调函数
var getSelect = function(){
var checkedValue = [] ;
var $item = $($thisTree).children(".item");
var selectId = $($thisTree).children(".item").find("input");
for(var i=0;i<selectId.length;i++){
if(selectId[i].checked){
var currObj = $item[i].getAttribute("data-obj");
currObj = JSON.parse(currObj);
currObj.sysList = undefined;
checkedValue.push(currObj)
}
}
return checkedValue;
}
}
})
}(jQuery));
调用方式:
$("#treeBox").tree({
callback:function(option){
console.log("获取选择的数据-----"+JSON.stringify(option));
}
});