帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

强大好用的多功能jQuery文件夹树形结构插件

帝国模板之家 2020-11-04 网页特效 评论

这是一款强大好用的多功能文件夹树形结构jQuery插件,性能优良、配置灵活。

特点:

  • 支持JSON数据
  • 支持Ajax加载
  • 可定制的样式和图标
  • 兼容所有主流浏览器

基本用法:

1.  引入jquery.min.js和jquery.ztree.core-3.5.js两个文件。

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>

2. 指定显示容器

<ul id="treeDemo" class="ztree">
</ul>

3. 引入样式文件

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

4. javascript代码

<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};

var zNodes =[
{ id:1, pId:0, name:"pNode 1", open:true},
{ id:11, pId:1, name:"pNode 11"},
{ id:111, pId:11, name:"leaf node 111"},
{ id:112, pId:11, name:"leaf node 112"},
{ id:113, pId:11, name:"leaf node 113"},
{ id:114, pId:11, name:"leaf node 114"},
{ id:12, pId:1, name:"pNode 12"},
{ id:121, pId:12, name:"leaf node 121"},
{ id:122, pId:12, name:"leaf node 122"},
{ id:123, pId:12, name:"leaf node 123"},
{ id:124, pId:12, name:"leaf node 124"},
{ id:13, pId:1, name:"pNode 13 - no child", isParent:true},
{ id:2, pId:0, name:"pNode 2"},
{ id:21, pId:2, name:"pNode 21", open:true},
{ id:211, pId:21, name:"leaf node 211"},
{ id:212, pId:21, name:"leaf node 212"},
{ id:213, pId:21, name:"leaf node 213"},
{ id:214, pId:21, name:"leaf node 214"},
{ id:22, pId:2, name:"pNode 22"},
{ id:221, pId:22, name:"leaf node 221"},
{ id:222, pId:22, name:"leaf node 222"},
{ id:223, pId:22, name:"leaf node 223"},
{ id:224, pId:22, name:"leaf node 224"},
{ id:23, pId:2, name:"pNode 23"},
{ id:231, pId:23, name:"leaf node 231"},
{ id:232, pId:23, name:"leaf node 232"},
{ id:233, pId:23, name:"leaf node 233"},
{ id:234, pId:23, name:"leaf node 234"},
{ id:3, pId:0, name:"pNode 3 - no child", isParent:true}
];

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>

5. 插件选项和回调函数。

treeId: "",
treeObj: null,
view: {
  addDiyDom: null,
  autoCancelSelected: true,
  dblClickExpand: true,
  expandSpeed: "fast",
  fontCss: {},
  nameIsHTML: false,
  selectedMulti: true,
  showIcon: true,
  showLine: true,
  showTitle: true,
  txtSelectedEnable: false
},
data: {
  key: {
    children: "children",
    name: "name",
    title: "",
    url: "url",
    icon: "icon"
  },
  simpleData: {
    enable: false,
    idKey: "id",
    pIdKey: "pId",
    rootPId: null
  },
  keep: {
    parent: false,
    leaf: false
  }
},
async: {
  enable: false,
  contentType: "application/x-www-form-urlencoded",
  type: "post",
  dataType: "text",
  headers: {},
  xhrFields: {},
  url: "",
  autoParam: [],
  otherParam: [],
  dataFilter: null
},
callback: {
  beforeAsync:null,
  beforeClick:null,
  beforeDblClick:null,
  beforeRightClick:null,
  beforeMouseDown:null,
  beforeMouseUp:null,
  beforeExpand:null,
  beforeCollapse:null,
  beforeRemove:null,

  onAsyncError:null,
  onAsyncSuccess:null,
  onNodeCreated:null,
  onClick:null,
  onDblClick:null,
  onRightClick:null,
  onMouseDown:null,
  onMouseUp:null,
  onExpand:null,
  onCollapse:null,
  onRemove:null
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

不要总是怀疑别人,真诚地接受别人的意见,其实是聪明人的选择。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言