jQuery树形控件zTree的使用
以下是一个简单的示例，展示如何使用jQuery zTree插件来创建一个树形控件：
<!DOCTYPE html>
<html>
<head>
<title>zTree 示例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点 1"},
{ id:11, pId:1, name:"子节点 1-1"},
{ id:12, pId:1, name:"子节点 1-2"},
{ id:2, pId:0, name:"父节点 2"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>在这个例子中，我们首先包含了必要的CSS和JavaScript文件。setting变量定义了zTree的设置，zNodes变量包含了树节点的数据。页面加载完成后，通过jQuery的$(document).ready()函数初始化zTree插件，将zNodes数据渲染到<ul id="treeDemo"></ul>元素中。这个简单的例子展示了如何使用zTree创建一个基本的树形控件。
评论已关闭