<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<script src='knockout-3.3.0.js'></script>
<script src='min-js.js'></script>
<title>省市区三级联动</title>
</head>
<body>
<div class="userGroupTree">
<p data-bind="click:mainOpen"><span>请选择所属分支</span></p>
<!--ko if:isShow-->
<ul data-bind="template: { name: 'guideTmpl', foreach: menus }"></ul>
<!--/ko-->
</div>
<script id="guideTmpl" type="text/html">
<li >
<div data-bind="click:$root.toggleSelect,attr:{id:id,class:'item '+(children.length>0 ? 'bold' :'')}">
<span data-bind='text: text'></span>
<!--ko if:children.length>0-->
<span data-bind="text:isOpen() ? '[-]' : '[+]'"></span>
<!--/ko-->
</div>
<!--ko if:isFolder-->
<ul data-bind="template: { name: 'guideTmpl', foreach: children }"></ul>
<!--/ko-->
</li>
</script>
<script>
var dataTree=[
{
"id":"4",
"text":"产品中心",
"pid":"0",
"children":[
{"id":"9","text":"展品组","pid":"4","children":[]},
{"id":"10","text":"网站分析组","pid":"4","children":[]},
{"id":"8","text":"设计组","pid":"4","children":[]},
{"id":"7","text":"文案策划","pid":"4","children":[]}
]
},
{
"id":"28",
"text":"商业智能中心",
"pid":"0",
"children":[
{"id":"29","text":"数据分析组","pid":"28","children":[]}
]
},
{
"id":"15",
"text":"推广中心",
"pid":"0",
"children":[
{
"id":"16",
"text":"营销推广",
"pid":"15",
"children":[
{"id":"17","text":"媒介采购组","pid":"16","children":[]}
]
}
]
},
{
"id":"18",
"text":"销售团队",
"pid":"0",
"children":[
{"id":"19","text":"nnn","pid":"18","children":[
{"id":"26","text":"xxx","pid":"19","children":[
{"id":"27","text":"ooo","pid":"26","children":[]}
]}
]},
{"id":"26","text":"aaa","pid":"18","children":[]},
{"id":"25","text":"lujing","pid":"18","children":[]},
{"id":"24","text":"weidian","pid":"18","children":[]},
{"id":"23","text":"山谷","pid":"18","children":[]},
{"id":"22","text":"cimei","pid":"18","children":[]},
{"id":"21","text":"yuexiu","pid":"18","children":[]},
{"id":"20","text":"panyu","pid":"18","children":[]}
]
},
{
"id":"6",
"text":"IT技术部",
"pid":"0",
"children":[
{"id":"14","text":"服务器运维","pid":"6","children":[]},
{"id":"13","text":"网站前端组","pid":"6","children":[]},
{"id":"11","text":"网站开发组","pid":"6","children":[]},
{"id":"12","text":"后台系统组","pid":"6","children":[]}
]
}];
//给每个层级对象添加isOpen和isFolder属性
function addAttribute(dst){
for(var i=0;i<dst.length;i++){
var temp=dst[i];
temp.isOpen=ko.observable(false);
temp.isFolder=ko.observable(false);
for(var j=0;j<temp.children.length;j++){
addAttribute(temp.children);
}
}
}
addAttribute(dataTree);
var TreeModel = function() {
this.menus=ko.observableArray(dataTree);
this.isShow=ko.observable(false);
//展开、折叠操作
this.toggleSelect = function(e){
var open=e.isOpen();
e.isFolder(true);
if(open){
e.isFolder(false);
e.isOpen(false);
}else{
e.isFolder(true);
e.isOpen(true);
}
};
this.mainOpen=function(e){
var opened = e.isShow();
if(opened){
e.isShow(false);
}else{
e.isShow(true);
}
}
};
//Knockout调用applyBindings激活TreeModel（即把myViewModel和View中的声明式绑定data-bind接洽关系起来）
ko.applyBindings(new TreeModel());
</script>
</body>
</html>如果对大家有帮助请点个赞