插件使用 之 ztree、nicescroll
ztree 树插件
<div id="treeDemo" class="ztree"></div>
引入
<link href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="zTree_v3-master/js/jquery.ztree.all.js"></script>
function tishi(event,treeId,treeNode){ /*点击函数*/
console.log(treeNode.id+":"+treeNode.name);
console.log(treeNode);
}
function getFont(treeId, node) { /*获得字体样式函数*/
return node.font ? node.font : {};
}
var setting = {
data: {
simpleData: { /*简单json*/
enable: true
}
},
callback:{
onClick:tishi,
beforeClick: beforeClick,
},
view: {
showLine: false, /*无连接线*/
showIcon: showIconForTree 不显示图标
fontCss: getFont, /*字体样式*/
nameIsHTML: true
},
async: { /*异步加载*/
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},/*icon:"图标路径"*/
{ id:11, pId:1, name:"父节点11", font:{'font-weight':'bold','color':'red'}},
{ id:111, pId:11, name:"叶子节点111", icon:"./img/diy/2.png"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:2, pId:0, name:"父节点2 - url",url:"http:...", target:"_blank"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
nicescroll 滚动条
引入
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<div id="dd" style="width:300px; height:100px;
overflow-y: scroll"><br><br><br><br><br><br><br><br><br><br><br></div>
$("#dd").niceScroll({
cursorcolor: "#ff0000",
......
})
