您的位置：首页 > 其它

Ztree树形控件的使用

2016-07-28 14:23 495 查看
前言：ztree是我接触的第一个前端控件，在使用过程中，我接触到了许多重要的前端知识，比如Ajax，json等等。从我的角度来说，它让我认识到了前端和后端的具体概念，也是我接触前端技术的开始。

那我还是先上我写的ztree的js代码吧。

<SCRIPT type="text/javascript">
var treeNodes;
var zTree;
//树的参数
var setting = {
isSimpleData:true,
treeNodeKey:"id",
treeNodeParentKey:"pid",
rootPID : "0",
showLine:true,
callback:{click: zTreeOnClick  }
};

/*------------- 加载树-----------*/
function loadTree(){
$.ajax({
async : false,   //是否异步
cache : false,   //是否使用缓存
type  : 'get',   //请求方式,post
dataType : "json",   //数据传输格式
url : "demo/ztreeload.htm",   //请求链接
error : function () {
alert('fail');
},
success:function(data){
treeNodes = data;
zTree = $("#mediTree").zTree(setting, treeNodes);
}
});
}
/*------------- 单击树节点方法-----------*/
function zTreeOnClick(event, treeId, treeNode) {
loadGrid(treeNode.id);
return false;
}
$(function(){
loadTree();
});
</script>
.........
.........
<body>
<div id="tree_div" style="OVERFLOW-y:auto;OVERFLOW-x:auto;border:1px solid #93AFBA;width: 245px;height: 450px;">
<ul id="mediTree" class="tree"></ul>
</div>
</body>

这里面包括ztree的初始化，相关参数的设置，以及从后台获取数据，最后是body部分的标签。

如果有什么疑问，欢迎一起讨论交流。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航