请选择 进入手机版 | 继续访问电脑版

jQuery文件树形菜单插件proTree

[复制链接]
查看1178 | 回复0 | 2021-3-3 18:06 | 显示全部楼层 |阅读模式

jQuery文件树形菜单插件proTree

jQuery文件树形菜单插件proTree

proTree是一款jQuery文件树形菜单插件,利用数组导入文件树形结构菜单样式效果。

  1. js代码

  2. <script type="text/javascript" src="js/proTree.js" ></script>
  3. <script type="text/javascript">
  4. //后台传入的 标题列表
  5. var arr = [{
  6.                 id: 1,
  7.                 name: "一级标题",
  8.                 pid: 0
  9.         }, {
  10.                 id: 2,
  11.                 name: "二级标题",
  12.                 pid: 0
  13.         }, {
  14.                 id: 3,
  15.                 name: "2.1级标题",
  16.                 pid: 2
  17.         }, {
  18.                 id: 4,
  19.                 name: "2.2级标题",
  20.                 pid: 2
  21.         }, {
  22.                 id: 5,
  23.                 name: "1.1级标题",
  24.                 pid: 1
  25.         }, {
  26.                 id: 6,
  27.                 name: "1.2级标题",
  28.                 pid: 1
  29.         }, {
  30.                 id: 7,
  31.                 name: "1.21级标题",
  32.                 pid: 6
  33.         }, {
  34.                 id: 8,
  35.                 name: "三级标题",
  36.                 pid: 0
  37.         }, {
  38.                 id: 9,
  39.                 name: "1.22级标题",
  40.                 pid: 6
  41.         }, {
  42.                 id: 10,
  43.                 name: "1.221级标题",
  44.                 pid: 9
  45.         }, {
  46.                 id: 11,
  47.                 name: "1.2211级标题",
  48.                 pid: 10
  49.         }, {
  50.                 id: 12,
  51.                 name: "1.2212级标题",
  52.                 pid: 10
  53.         }

  54. ];
  55. //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  56. $(".innerUl").ProTree({
  57.         arr: arr,
  58.         simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
  59.         mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
  60.         mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
  61.         callback: function(id,name) {
  62.                 alert("你选择的id是" + id + ",名字是" + name);
  63.         }

  64. })
  65. </script>
复制代码
jQuery文件树形菜单插件proTree.zip (35.52 KB, 下载次数: 305)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
436
贡献
4
丢币
318
主题
163
回帖
1
注册时间
2021-2-21
最后登录
2023-3-12