//引入的css
<link rel="stylesheet" href="Styles/zTreeStyle/zTreeStyle.css" type="text/css" />
//div代码
<div class="zltree2">
<ul id="Enter_Tree" class="ztree"></ul>
</div>
//引入的js
<script type="text/javascript" src="js/lib/layDate-v5.0.9/laydate.js"></script>
<script src="/assets/js/treeview/jquery.ztree.core-3.5.js"></script>
<script src="Scripts/xy.ztree.js"></script>
<script src="js/commontree.js" type="text/javascript"></script>
<script src="Scripts/xy.datatables.v2.js" type="text/javascript"> </script>
<script>
function URL() {
return 'http://192.168.1.150:888/XhnWebApi.asmx'//访问接口前面共有
}
var baseURL = URL();
$(document).ready(function () {
GetTree();
}
function GetTree() {
$.fn.CreateTree();
$.fn.CreateTree.init.SelectNode("Enter_Tree", 1);
}
function PageInit() {
GetTree();
}
//commontree.js
(function ($) {
var baseURL = URL();
$.fn.CreateTree = function () {
var DataSouceTrees = $.fn.CreateTree.DataSouce.GetDataSource();
$.fn.CreateTree.init.treeInit(DataSouceTrees);
$.fn.CreateTree.init.changeTreeInco("Enter_Tree"); //树自定义图标
};
$.fn.CreateTree.DataSouce = {
GetDataSource: function () {
var UserId = sessionStorage.getItem('UserId');
var url = baseURL + "/GetEnterpriseSubByUserID";
var args = {
pn: JSON.stringify({
UserID: UserId
})
};
var strTreeData;
$.ajaxSettings.async = false;
$.getJSON(url, args, function (data) {
if (data) {
strTreeData = data.data;//反序列化
window.EnterpriseID = strTreeData[1].EnterpriseID
console.log(EnterpriseID)
}
});
return strTreeData;
}
};
$.fn.CreateTree.init = {
enable: false,
config: function () {
//开始:树配置信息说明
var treeConfig = {
view: {
fontCss: {
color: "#00f5f6",
"font-size": "24px"
},
showLine: false,
dblClickExpand: false, //双击节点时,是否自动展开父节点的标识
selectedMulti: false,
checkEnable: false,
},
data: {
simpleData: {
enable: true, // 使用简单数据模式
}
},
callback: {
onClick: this.treeClick, //树节点单击事件
onExpand: this.treeExpand,
onCheck: this.zTreeOnCheck
},
check: {
enable: true,//true
chkStyle: 'checkbox',
//check下的chkboxType = { "Y" : "s", "N" : "s" };
//Y指的是勾选checkbox的时候对父结点或子结点产生的影响
//N指的是取消checkbox的时候对父结点或子结点产生的影响大小写是有区别的。
//s指子结点,p指父结点
chkboxType: { "Y": "n", "N": "s" }
//chkboxType: { "Y": "ps", "N": "ps" }
}
};
return treeConfig;
},
treeClick: function (event, treeId, treeNode) {
var selectedNode = treeNode;
var text = "";
var EnterpriseID = "";
var AreaID = "";
var pid = "";
var treeType = "";
if (selectedNode != null && selectedNode != undefined) {
text = selectedNode.name;
EnterpriseID = selectedNode.EnterpriseID;
AreaID = selectedNode.id;
pid = selectedNode.pId;
treeType = selectedNode.TypeID
}
searchParam.EnterpriseIDT = EnterpriseID;
searchParam.AreaID = AreaID;
getPageData(); //请求数据的健康
},
SelectNode: function (textId, isValue, meterId) {
var j = 1;
var zTree = $.fn.zTree.getZTreeObj(textId),
nodes = zTree.getNodes();//获取全部节点数据
nodesDT = zTree.transformToArray(nodes);//转换成数组集合
for (var i = 0, l = nodesDT.length; i < l; i++) {
if (meterId > 0) {
if (nodesDT[i].EnterpriseID == meterId) { // 编辑时绑定
zTree.selectNode(nodesDT[i]);
zTree.setting.callback.onClick(null, zTree.setting.treeId, nodesDT[i]);
return;
}
} else {
if (!nodesDT[i].isParent) {//判断是否为子节点
zTree.selectNode(nodesDT[i]);
zTree.setting.callback.onClick(null, zTree.setting.treeId, nodesDT[i]);
if (j >= isValue)
return;
j++
}
}
}
},//--默认选择第一个子节点,isValue默认选中几个
treeInit: function (DataSourceTrees) {
$.fn.zTree.init($("#Enter_Tree"), this.config(), DataSourceTrees);
},
//结束:树自定义图标、加载数据后重新勾选一次、默认选择第一个子节点
changeTreeInco: function (treeId) {
var zTree = $.fn.zTree.getZTreeObj(treeId),
nodes = zTree.getNodes(); //获取全部节点数据
nodesDT = zTree.transformToArray(nodes); //转换成数组集合
for (var i = 0, l = nodesDT.length; i < l; i++) {
if (nodesDT[i].isParent) { //判断是否为父级
nodesDT[i].iconSkin = nodesDT[i].iconSkin ? null : "pIcon01";//父级图标
} else {
nodesDT[i].iconSkin = "icon08";//最后节点图标
}
zTree.updateNode(nodesDT[i]); //更新
}
},
getTreeFirstSubNodeLevel: function (treeId) {
var zTree = $.fn.zTree.getZTreeObj(treeId),
nodes = zTree.getNodes(); //获取全部节点数据
nodesDT = zTree.transformToArray(nodes); //转换成数组集合
if (nodesDT.length > 1) {
var treeNodeID = nodesDT[1].EnterpriseID;
if (treeNodeID != null && treeNodeID != "") {
var pNodeInfor = Mng_Regions.GetContent(treeNodeID).value;
var currentLevel = "1";
if (pNodeInfor != null && pNodeInfor != "" && pNodeInfor.split("@").length > 0) {
currentLevel = pNodeInfor.split("@")[2];
}
return currentLevel;
}
}
return 0;
}
};
})(jQuery);
</script>
里面有一些引入的js文件,如果没有的话可以私发给你们
也是在开发中写的,觉得可能对大家有帮助
第一个写文章多多关照