插件使用 之 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",

        ......

})