ztree checkbox 选中

最新推荐文章于 2022-05-12 15:12:25 发布
最新推荐文章于 2022-05-12 15:12:25 发布
阅读量1.9k 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24591547/article/details/50964169
版权
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../theme/default/ui.custom.css" rel="stylesheet" />
<link href="../../theme/default/ui.jqgrid.css" rel="stylesheet" />
<link href="../../theme/default/font.awesome.css" rel="stylesheet" />
<link href="../../theme/default/ui.chosen.css" rel="stylesheet" />
<link href="../../theme/default/ui.uploadfile.css" rel="stylesheet" />
<link href="../../theme/default/page.common.css" rel="stylesheet" />
<link href="../../theme/default/page.sales.css" rel="stylesheet" />
<link href="../../theme/default/ui.pick.css" rel="stylesheet" />
<link href="../../theme/default/page.personManagement.css" rel="stylesheet" />
<link href="../css/wj.css" rel="stylesheet"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/ui.jqgrid.js"></script>
<script type="text/javascript" src="../../js/ui.autosearch.js"></script>
<script type="text/javascript" src="../../js/ui.chosen.js"></script>
<script type="text/javascript" src="../../js/ui.common.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.js"></script>
<script type="text/javascript" src="../../js/page.common.js"></script>
<script type="text/javascript" src="../../js/ui.pick.js"></script>
<link rel="stylesheet" href="../../theme/default/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
<style type="text/css">
    .t-left-panel{width:500px;margin:24px auto 0;height:500px;}
    .t-left-panel-title{height:30px;background:#018659;width:100%;}
    .full-drop-panel{display:block;}
    element.style {
    margin-left: 0;
}
.toolbar button, .search-panel button, .title-bar button {
    margin-left: 2px;
    margin-right: 2px;
}
.fa-search {
    background: #018659 none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    left: 170px;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: 1px;
    width: 30px;
}
</style>
<script type="text/javascript">
var result=[];
$(function(){
    var zTreeObj;
     // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
     var setting = {
           check: {
               enable: true,
               chkStyle: "checkbox",
               chkboxType: { "Y" : "ps", "N" : "ps" }
               },
               view: {
                   showLine: true,
                   selectedMulti: false,
                   },
               data: {
                   simpleData: {
                           enable: true,
                           idKey: "id",
                        pIdKey: "pId",
                        rootPId: 0
                   }
              },
              callback:{
                  onCheck:onCheck
                }
  };
  // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
  var zNodes = [
  {name:"中国",id:"01",pId:"0",open:true,
          children:[
                    {name:"上海",id:"1",pId:"01",open:true, children:[{name:"闵行",pId:"1",id:"11"}, {name:"徐汇",pId:"1",id:"12"}]},
                    {name:"北京",id:"2",pId:"01",open:true, children:[{name:"东城",pId:"2",id:"21"}, {name:"西城",pId:"2",id:"22"}]}
                    ]},
                  {name:"中国1",id:"02",pId:"0",open:true,
                        children:[
                                  {name:"上海1",pId:"02",id:"3",open:true, children:[{name:"闵行1",pId:"3",id:"31",}, {name:"徐汇1",pId:"3",id:"32",}]}
                                  ]}
  ];
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//   chooseCheckedNodes();
//重置左边树状型的高宽
  resizeLeftTree();
  $("#queryStoreTree").focus(function(){
       showLeftPanel(".t-left-panel");
    });
  //初始化选中的节点
//   initCheckedNodes();
});
/*******初始化选中的节点********/
function onCheck(){
    if(result.length>0){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes=treeObj.getNodes();
        var checkedId;
        for(var j=0;j<result.length;j++){
            checkedId=result[j].value;
            treeObj.checkNode(treeObj.getNodeByParam("id", checkedId, null), true, true);
        }
    }
}
function resizeLeftTree(){
    var hPanel=$(".t-left-panel").height(),
        hTitle=$(".t-left-panel-title").height(),
        hToolbar=$(".t-left-panel .toolbar").height(),
        hTreeButton=$(".tree-button").height(),
        hTree=hPanel-hTitle-hToolbar-hTreeButton-85;
    $("#treeDemo").css({height:hTree,overflow:"scroll-y"});
}

function getValue() {
    var result2 = [];
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var nodes = treeObj.getNodes();
    var arr=[];
    //获取选中的节点名称
    checkedNode(nodes,result2);
    return result2;
}
/******获取选中的节点名称*************/
function checkedNode(nodes,result2){
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].children){
            if(nodes[i].check_Child_State==2){
                //填充result2
                fillResult2(result2,nodes[i]);
                continue;
            }else if(nodes[i].check_Child_State==1){
                checkedNode(nodes[i].children,result2);
            }
        }else{
            if(nodes[i].checked==true){
                //填充result2
                fillResult2(result2,nodes[i]);
                continue;
            }
        }
    }
}
/*******填充result2************/
function fillResult2(result2,node){
    var data=new Object();
    data.text=node.name;
    data.value=node.id;
    result2.push(data);
}
function setValue(data) {
   result=data;
}

function clearValue() {
    result = [];
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    treeObj.checkAllNodes(false);
}

</script>
</head>
<body>
    <div style="width:800px">
        <div class="t-left-panel">
               <div class="toolbar" style="position:relative;">
                <input data-xtype="text" placeholder="门店查询" style="width:120px;" class="left-search-shop"/>
                <a class="fa fa-search"></a>
            </div>
            <!-- 左边树形图 -->
            <ul id="treeDemo" class="ztree"></ul>
       </div>
     </div>
</body>
</html>
ILOVE__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ztree 选中刷新之后选中不变
03-12
在原html上可能浏览不到想要的功能，需要放到程序上运行才可以
ZTree 设置初始化时勾选某个节点
DoNotEatfishCat的博客
11-08 6366
//ZTree初始化所执行的方法         /* 先在callback 方法中设置如下，初始化树时执行onAsyncSuccess 方法             callback: {                   onCheck: YnOnClick,                   onAsyncSuccess:onAsyncSuccess                   ...
zTree之checkbox选中事件---获取状态改变的结点
热门推荐
闲人的专栏
11-18 4万+
zTree 简介     zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。     zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
jquery ztree 设置勾选_jqueryztreecheckbox手动选中问题_html/css_WEB-ITnose
weixin_33873956的博客
12-24 246
ztree的checkbox选中必须点击小图标才能选中，现在想点击实际的内容，checkbox选中，如下图所示，点击“管理员”，则checkbox选中，，触发事件我也做了，代码如下，但是还是没选中。在这里先谢谢各位了var setting = { check: { enable: true }, data: { ...
ztree初始化及获取选中节点的id数组（简单粗暴）
momDIY的博客
03-20 4672
一、初始化ztree列表 使用$.fn.zTree.init()方法初始化 第一个参数为生成ztree的节点 第二个参数为ztree配置项 第三个参数为生成节点的数据 let zTreeObj; let setting = { check: { enable: true }, view: { ...
ztree初始化后默认点击第一个节点
weixin_36728104的博客
07-13 5447
原来的写法//初始化 $(document) .ready(function () { var tree = $("#treeIndustryCategory"); var ztree=$.fn.zTree.init($("#treeIndustryCategory"), setting); //初始化添加箭头标签 tree.
Ztree展开指定节点
weixin_55027548的博客
05-12 1968
1.先获取加载树状的区域 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //获取树 2.然后通过节点数据，我是通过数据的id来获取它的节点的 var nodes = treeObj.getNodesByParam("id",id,null); //通过id获取当前节点 展开当前节点的时候需要将他上级全部展开 3.通过获得的节点信息，利用循环不断遍历这个节点展开的父节点，只有展开它前面的父节点才能展开子节点 for (var i = 0; i
ztree树形结构回显到树上，并且展开选中节点
Chasedream_hs的博客
12-22 5517
数据显示到树形结构上，并且默认节点选中，展开选中节点。
ztree 选中，展开指定节点
月光散
05-28 9004
ztree 选中，展开指定节点
jQuery插件zTree实现单独选中根节点中第一个节点示例
10-20
主要介绍了jQuery插件zTree实现单独选中根节点中第一个节点的方法,结合实例形式分析了jQuery树形插件zTree的具体使用技巧,需要的朋友可以参考下
ztree树节点前面有checkbox
09-27
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - checkbox</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.ztree.core.js"></script> <script type="text/javascript" src="jquery.ztree.excheck.js"></script> <SCRIPT type="text/javascript"> var setting = {check: {enable: true},data: {simpleData: {enable: true}}}; var zNodes =[ { id:1, pId:0, name:"全选", open:true}, { id:11, pId:1, name:"报表", open:true}, { id:111, pId:11, name:"报表管理",open:true}, { id:112, pId:11, name:"报表概况",open:true}, { id:12, pId:1, name:"我的", open:true}, { id:121, pId:12, name:"修改密码",open:true}, { id:122, pId:12, name:"意见反馈",open:true} ]; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = { "Y":'ps', "N":'ps'}; zTree.setting.check.chkboxType = type; }); function aa(){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"); nodes=treeObj.getCheckedNodes(true); var nodes1 = treeObj.getNodes(); var aa1= treeObj.transformToArray(nodes1); for(var i=0; i < aa1.length;i++){ var node = treeObj.getNodeByParam("id",aa1[i].id ); treeObj.checkNode(node,true,true); treeObj.updateNode(node); } } </SCRIPT> </HEAD> <BODY> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <button value="dianji" onclick="aa()" /> </div> </BODY> </HTML>
ztree获取当前选中节点子节点id集合的方法
09-03
主要介绍了ztree获取当前选中节点子节点id集合的方法,实例分析了ztree的方法transformToArray使用技巧,需要的朋友可以参考下
ztree树选中节点弹出层编辑
08-25
ztree树选中节点弹出层编辑
后台获取ZTREE选中节点的方法
09-03
主要介绍了后台获取ZTREE选中节点的方法,实例分析了ZTREE中getZTreeObj方法与getCheckedNodes方法的使用技巧,需要的朋友可以参考下
css 自动出现滚动条
ILOVE_的博客
04-28 917
"overflow-x":"auto" "overflow-y":"auto"
form表单上传与下载
ILOVE_的博客
12-29 518
input file中要有name属性并有随意值（无用，但是必须有name属性）否则表单提交图片并不能成功
css3 transform
ILOVE_的博客
12-23 370
transform  ---------------》 改变，变换 transform的属性：translate，scale，rotate，skew -----------------------translate：位移，以本身为原点，整体移动（以二维坐标的原点为例）   支持ie10及以上         -ms-transform:translate;(支持ie9仅适用于2D)
String reverse字符串的反转
ILOVE_的博客
12-23 292
字符串的反转是借助于数组的反转来进行的 String.prototype.reverse=function(){   return Array.prototype.reverse.apply(this.split("")).join(""); } "asdf".reverse();   //------------fdsa
ztree获取选中节点的所有父节点
最新发布
09-13
你可以使用 zTree 的 `getSelectedNodes` 方法获取选中节点的所有信息，包括父节点。然后，你可以使用这些信息来获取选中节点的所有父节点。 以下是一个示例代码： ```javascript // 获取选中节点的所有父节点 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值