zTree替换easyui的tree插件

1. 问题重现
   　　在项目中用户管理模块，左侧部门树使用EasyUI的tree，在IE8标准模式下显示正常，但是切换到兼容模式时，显示就有问题了，Chrome和FF都正常,这里记录的是用zTree替换easyui的tree插件。
   在IE8标准模式下显示正常，如下图:
   
   在兼容模式下，部门树就有问题了
   

2. zTree
   　　zTree是很优秀的Jquery插件,配置灵活,demo齐全，兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器,使用起来很方便。

下载最新的zTree3.5.28
在findbike项目的res下新建ztree目录，拷贝jquery.ztree.all.min.js和zTreeStyle文件夹到ztree目录下。
在公共的页面引入ztree样式和js

3. 代码整合

var unitTree;
var setting = {
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "parentId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : false, //是否显示节点间的连线
data: {
simpleData: {
enable: true
},
key: {
name: "text"
}
},
callback: {
onClick: unitClick//点击事件
}
};
var zTree;
var treeNodes=[];

$(function() {
//待改进，改成部门编码 —改用ztree 20170421
$.ajax({
async : false,
cache:false,
type: ‘POST’,
dataType : “json”,
url: “${ctx}/sys/unit/tree?pid=”,//请求的action路径
error: function () {//请求失败处理函数
alert(‘请求失败’);
},
success:function(data){ //请求成功后处理函数。
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});

$.fn.zTree.init($(“#unitTree”), setting, treeNodes);
//—省略部分
});
//点击部门，查询归属部门的人员
function unitClick(event, treeId, treeNode){
if(!treeNode.isParent){
$(‘#qry_unit’).val(treeNode.id);
doSearch();
}else if(‘root’===treeNode.id){//根节点，查询所有
$(‘#qry_unit’).val(“”);
doSearch();
}
}

unitTree原来table 换成ul, 要加上class=”ztree”,否则树的展示不正常。
4. 替换后效果
gooooooo==> Here