Js树形插件ztree

这几天做权限管理的时候权限列表的展示用到了这个插件也是好一番研究之后才会用现在想想其实挺简单的主要就是js的配置

<!DOCTYPE html>
<HTML>
<HEAD>
   <TITLE> ZTREE DEMO - getChangeCheckedNodes / getCheckedNodes</TITLE>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="__PUBLIC__/plugin/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.js"></script>
   <script type="text/javascript" src="__PUBLIC__/plugin/ztree/js/jquery.ztree.core.min.js"></script>
   <script type="text/javascript" src="__PUBLIC__/plugin/ztree/js/jquery.ztree.excheck.min.js"></script>
   <SCRIPT type="text/javascript">
       <!--
       var setting = {
           view: {
               selectedMulti: false
           },
           check: {
               enable: true,
               //chkStyle: "radio", 这两个是单选用
               //radioType: "all"
           },
           data: {
               simpleData: {
                   enable: true
               }
           },
           callback: {
               onCheck: onCheck
           }
       };
       var zNodes =[
           { id:1, pId:0, name:"随意勾选 1", open:true},
           { id:11, pId:1, name:"随意勾选 1-1"},
           { id:12, pId:1, name:"随意勾选 1-2", open:true},
           { id:121, pId:12, name:"随意勾选 1-2-1", checked:true},
           { id:122, pId:12, name:"随意勾选 1-2-2"},
           { id:123, pId:12, name:"随意勾选 1-2-3"},
           { id:13, pId:1, name:"随意勾选 1-3"},
           { id:2, pId:0, name:"随意勾选 2", open:true},
           { id:21, pId:2, name:"随意勾选 2-1"},
           { id:22, pId:2, name:"随意勾选 2-2", open:true},
           { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
           { id:222, pId:22, name:"随意勾选 2-2-2"},
           { id:223, pId:22, name:"随意勾选 2-2-3"},
           { id:23, pId:2, name:"随意勾选 2-3", checked:true}
       ];
       var clearFlag = false;
       function onCheck(e, treeId, treeNode) {

       }

$(document).ready(function(){
           $.fn.zTree.init($("#treeDemo"), setting, zNodes);
       });
       function print_rez(){
           var zTree = $.fn.zTree.getZTreeObj("treeDemo");
           nodes = zTree.getCheckedNodes();
           var total_nodes='';
           $(nodes).each(function(i,val){
               total_nodes=total_nodes+val.id+',';
           });
           $('#print').html(total_nodes);
       }
       //-->
   </SCRIPT>
</HEAD>
<BODY>
<h1>checkbox 勾选统计</h1>
<h6>[ 文件路径: excheck/checkbox_count.html ]</h6>
<div>
       <ul id="treeDemo" class="ztree"></ul>
       <button οnclick="print_rez()">提交</button>
       <div id="print"></div>
</div>
</BODY>
</HTML>

链接：http://pan.baidu.com/s/1bRViPK 密码：wvgz

转载于:https://www.cnblogs.com/wzg123/p/6023479.html

Js树形插件ztree相关推荐

java ztree 异步加载_插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
js树形结构html源码,纯JS树形结构插件
插件描述:纯JS树形结构插件,代码精简方便定制修改更新时间:2020-05-20 22:30:39 更新说明:内含旧版.新版源码更新功能: 1.简化全部代码,从660行减少为430行 2.优化实现思 ...
关于树形插件展示中数据结构转换的算法
问题背景在一些目录结构.机构层级等展示的场景中,我们经常会用到一些成熟的树形插件来进行轻松展示,比如ztree等.大多数插件会支持对两种数据源格式的解析,一种是通用的二维数据结构,一种是树状数据结构 ...
WdatePicker，js日期插件，时间相加
//WdatePicker,js日期插件 //点击一个日期选择框后,得到日期,然后另一个日期选择框的日期自动加上一天 function pickedFunc(){ $ ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
webpack常用的三种JS压缩插件
这里讲解三种JS 打包插件: (1)UglifyJS 支持: babel present2015.webpack3 缺点: 它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文 ...
Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
js脚本锁计算机软件,JS使用插件cryptojs进行加密解密数据实例
本文实例讲述了JS使用插件cryptojs进行加密解密数据.分享给大家供大家参考,具体如下: Testing websockets var key = 'BOTWAVEE'; //CBC模式加密 fu ...
html图片编辑器插件,js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. 使用方法在页面中引入下面的文件. 初始化插件 filerbot的 ...

Js树形插件ztree

Js树形插件ztree相关推荐

最新文章

热门文章