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