素材牛VIP会员

带复选框tree树结构插件MultipleTreeSelect.js

 所属分类:网页特效-输入/选择框

 浏览:865次-  下载:4次-  评论:0次-  发布时间:2019-03-25
带复选框tree树结构插件MultipleTreeSelect.js兼容IE8
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:tree树结构插件MultipleTreeSelect.js,下载文件中还提供了多种模式,单选、多选,回调。

详细介绍

使用方法

引用所需要的文件

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

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="MultipleTreeSelect.js"></script>

html 

<textarea   style="width: 300px;overflow:hidden;" checks="1,11,2,23"  textLabel="jasontext"  type="text" readonly></textarea>

js对输入框加入数据

var zNodes = [
            {id: 1, pId: 0, name: "火之国",   open: true},
            {id: 11, pId: 1, name: "木叶忍者", open: true },
            {id: 111, pId: 11, name: "鸣人" },
            {id: 112, pId: 11, name: "佐助"},
            {id: 12, pId: 1, name: "木叶暗部" },
            {id: 121, pId: 12, name: "鼬"},
            {id: 122, pId: 12, name: "卡卡西"},
            {id: 2, pId: 0, name: "沙之国", open: true},
            {id: 21, pId: 2, name: "千代婆婆"},
            {id: 26, pId: 2, name: "我爱罗"} ,
            {id: 22, pId: 2, name: "沙之国忍者", open: true},
            {id: 221, pId: 22, name: "手鞠"},
            {id: 222, pId: 22, name: "勘九郎"},
            {id: 3, pId: 0, name: "水之国"},
            {id: 4, pId: 0, name: "土之国"}
        ];
var defaults = {
    zNodes: zNodes,
    height:233
}

调用插件

$(document).ready(function () {
     $("textarea").drawMultipleTree(defaults);
 });

文件目录结构

  • css
    • awesomeStyle
      • ┝ awesome.css
      • ┝ awesome.less
      • ┝ fa.less
      • img
        • ┝ loading.gif
    • ┝ demo.css
    • metroStyle
      • img
        • ┝ line_conn.png
        • ┝ loading.gif
        • ┝ metro.gif
        • ┝ metro.png
      • ┝ metroStyle.css
    • zTreeStyle
      • img
        • diy
          • ┝ 1_close.png
          • ┝ 1_open.png
          • ┝ 2.png
          • ┝ 3.png
          • ┝ 4.png
          • ┝ 5.png
          • ┝ 6.png
          • ┝ 7.png
          • ┝ 8.png
          • ┝ 9.png
        • ┝ line_conn.gif
        • ┝ loading.gif
        • ┝ zTreeStandard.gif
        • ┝ zTreeStandard.png
      • ┝ zTreeStyle.css
  • demo
    • ┝ CallbackDemo.html
    • ┝ CheckboxDemo.html
    • img
      • ┝ 2.png
      • ┝ 3.png
    • ┝ RadioDemo.html
  • ┝ index.html
  • js
    • ┝ jquery-1.11.2.min.js
    • ┝ jquery.slimscroll.min.js
    • ┝ jquery.ztree.all.js
  • ┝ MultipleTreeSelect.js
  • ┝ MultipleTreeSelect.min.js

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:4
所需牛币:5 开始下载