当前位置: 首页 > 工具软件 > jquery-koala > 使用案例 >

Jquery插件-JqTree

暴乐邦
2023-12-01
需要引入的文件
  <link rel="stylesheet" href="../../css/bootstrap.css">
  <link rel="stylesheet" href="../../css/jqTree.min.css">
  <link rel="stylesheet" href="../../css/style.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_295121_0n2yaiwwywwjnhfr.css">//这里自己引入的阿里图标库文件
  <script src="../../js/jquery-3.2.1.min.js"></script>
  <script src="../../js/bootstrap.js"></script>
  <script src="../../js/jstree.min.js"></script>
//使用HTML填充树
<div class="tree1">
   <ul>
      <li data-jstree='{"opened":true,"selected":true}'>Root
        <ul>
          <li data-jstree='{"disabled":true}'>Child1</li>
          //引入阿里图标库的字体图标
          <li data-jstree = '{"icon":"iconfont icon-shangpin"}'>
            Child2
          </li>
          //引入网络图片
          <li data-jstree='{"icon":"//jstree.com/tree.png"}'>
            Child3
          </li>
          //引入bootstrap中的字体图标
          <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
            Child4
          </li>
          /*
          内部jstree将文本转换为链接,因此如果jstree中的标记中已经存在链接,则不介意。像Child5。
          然而,单击链接不会将用户引导到新页面,要做到这一点 - 截取changed.jstree事件并相应地执行。
          */
          <li ><a href="#">Child5</a></li>
          //引入项目文件中的图片
          <li data-jstree='{"icon":"../../imgs/Koala.jpg"}'>Child6</li>
        </ul>
      </li>
    </ul>
  </div>
 类似资料: