使用ztreejs纯前端实现四级类别展示

引入ztree的js和css文件。
定义一个包含类别数据的json对象：

var categoryData = [
  {id:1, pId:0, name:"电子产品", open:true},
  {id:101, pId:1, name:"手机"},
  {id:102, pId:1, name:"电脑"},
  {id:103, pId:1, name:"平板电脑"},
  {id:2, pId:0, name:"服装", open:true},
  {id:201, pId:2, name:"男装"},
  {id:202, pId:2, name:"女装"},
  {id:203, pId:2, name:"童装"},
  {id:3, pId:0, name:"食品", open:true},
  {id:301, pId:3, name:"饮料"},
  {id:302, pId:3, name:"零食"},
  {id:4, pId:0, name:"家居用品", open:true},
  {id:401, pId:4, name:"家具"},
  {id:402, pId:4, name:"装饰品"},
  {id:403, pId:4, name:"家电"}
];

其中id表示类别的唯一标识符，pId表示父级类别的id，name表示类别名称。

在html中定义一个ul元素作为ztree的容器：

<ul id="treeDemo" class="ztree"></ul>

在js中创建ztree：

var setting = {
  data: {
    simpleData: {
      enable: true
    }
  }
};

$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting, categoryData);
});

其中setting是ztree的配置对象，data.simpleData.enable表示采用简单数据模式，categoryData是类别数据。

最后，使用css样式美化ztree：

.ztree li span.button.switch {display:none;}
.ztree li span.button.ico_open {background:url("img/zTreeStandard.png") no-repeat scroll -16px 0px transparent;}
.ztree li span.button.ico_close {background:url("img/zTreeStandard.png") no-repeat scroll -32px 0px transparent;}
.ztree li span.button.ico_docu {background:url("img/zTreeStandard.png") no-repeat scroll -48px 0px transparent;}
``