您现在的位置是:首页 > Javascript
当前栏目
jquery——zTree, 完美好用的树插件
2023-03-20 15:28:36 时间
大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的。
以下是简单的使用demo:
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - Standard Data </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
view: {
selectedMulti: false //禁止多点选中
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: function(treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeNode);
var selectedNode = treeObj.getSelectedNodes()[0];
$("#txtId").val(selectedNode.id);
$("#txtAddress").val(selectedNode.name);
}
}
};
var zNodes =[
{id:1, pId:0, name:"广东", open:true},
{id:101, pId:1, name:"广州", file:"core/standardData"},
{id:102, pId:1, name:"深圳", file:"core/simpleData"},
{id:103, pId:1, name:"东莞", file:"core/noline"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<div style="float:left;" >
<ul id="treeDemo" class="ztree">
</ul>
</div>
<div style="float:left;" >
id: <input id="txtId" type="text" value="" /><br />
地名:<input id="txtAddress" type="text" value="" />
</div>
</body>
</html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/118814.html原文链接:https://javaforall.cn
相关文章
- React & Ant Design Table组件自定义单元格文字颜色
- 利用Com组件绕过UAC
- Rust 是 JavaScript 基础设施的未来
- npm现代前端开发的基石,共享代码从此不再用百度下载了
- 死生之地不可不察:论API标准化对Dapr的重要性
- 前端面试 【JavaScript】— 什么是闭包?
- 前端面试 【JavaScript】— 闭包产生的原因?
- 前端面试 【JavaScript】— 闭包有哪些表现形式?
- 前端面试 【JavaScript】— 原型对象和构造函数有何关系?
- 前端面试 【JavaScript】— 能不能描述一下原型链?
- c# HttpWebRequest 解决 请求HTTPS慢
- CSS详解(1.什么是css)
- 为什么选择 Traefik Ingress ?
- js堆栈内存
- Java Review - 并发组件ConcurrentHashMap使用时的注意事项及源码分析
- @所有人 你期待的「网站建设」产品功能升级来啦!
- SpringBoot监控工具之《Actuator》
- 前端面试 【JavaScript】— 函数的arguments为什么不是数组?如何转化成数组?
- 前端面试 【JavaScript】— JS如何实现继承?
- js逆向-猿人学(15-16)wasm-webpack