标签：function name 框弹 id treeObj ztree var input 节点

效果图

引入的js与css

  <link rel="stylesheet" type="text/css" href="${ctx}/css/zTreeStyle/zTreeStyle.css">
  <script type="text/javascript" src="${ctx}/static/zTree/jquery.ztree.core-3.5.min.js"></script>
  <script type="text/javascript" src="${ctx}/static/zTree/jquery.ztree.excheck-3.5.min.js"></script>

HTML代码

<div class="col-md-5 col-md-offset-1 form-group">
                <label for="" class="col-md-3 text-left control-label lh34 font-normol" id="orgLabel">原属机构</label>
                <div class="col-md-9 text-left">
                    <input type="text" id="organization" name="organization" class="form-control" onclick="showMenu(); return false;"  autocomplete="off"  readonly="readonly" aria-label="...">
                </div>
                <div id="menuContent"  style="position: absolute; display: none;width:64%;height:auto; z-index: 10; background-color: #eee; overflow: auto">
                    　　<ul id="treeDemo" class="ztree"></ul>  //class必须为ztree
                </div>
            </div>

js代码

var setting = {
        view: {
            showIcon: false,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
        },
        data: {
            simpleData: {
                enable: true,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)

                idKey: "id",//你后台返回的json的id字段（节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
                pIdKey: "pId",//你后台返回的json的父级id字段（节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
                rootPId: 0//（用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]）
    }
    },
    callback: {
        onClick: onClick//用于捕获节点被点击的事件回调函数
        //如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。

    }
    };

    var filename;
    var parentids;
    var parentId;


    function onClick(e, treeId, treeNode) {
        $('#organization').val(treeNode.name);//当前节点name赋值input框
        console.log('id:'+treeNode.id);//当前选中节点id，可用于向后台传值
        filename = getFilePath(treeNode);//获取所有父节点的名字
        parentids = getFileId(treeNode);//获取所有父节点的id
        parentId = treeNode.id;//获取点击节点的id
        hideMenu();
    }
    //获取所有父节点名字
    function getFilePath(treeObj){
        if(treeObj==null)return "";
        var filename = treeObj.name;
        var pNode = treeObj.getParentNode();
        if(pNode!=null){
            filename = getFilePath(pNode) +">"+ filename;
        }
        return filename;
    }
    //获取所有父节点id
    function getFileId(treeObj){
        if(treeObj==null)return "";
        var id = treeObj.id;
        var pNode = treeObj.getParentNode();
        if(pNode!=null){
            id = getFileId(pNode) +">"+ id;
        }
        return id;
    }

    function showMenu() {//输入框的点击事件
        var labObj = $('#orgLabel');
        var labObjOffset = labObj.offset();
        $("#menuContent").css({ left: labObjOffset.left - 15 + "px" , top:  labObj.outerHeight() + "px" }).slideDown("fast");//根据输入框的css格式设置offSet，否则会导致ztree与input不对称
        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {//初始化隐藏下拉树
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {//树的主体
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

$(document).ready(function(){
        var treeNodes = [
            {"id":1, "pId":0, "name":"test1"},
            {"id":11, "pId":1, "name":"test11"},
            {"id":12, "pId":1, "name":"test12"},
            {"id":111, "pId":11, "name":"test111"},
        ];

        $.fn.zTree.init($("#treeDemo"), setting, treeNodes);

		//此处treeNodes取值也可设置后台通过ajax传值，切记注意数据格式不正确引起的问题
		/*$.ajax({
            type:"post",
            url:'${ctx}${parentPath}/test/getdata',
            async:true,
            success:function(res){
				var treeNodes =res.getOrgList;
                $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
    });
    */

标签：function,name,框弹,id,treeObj,ztree,var,input,节点
来源： https://blog.csdn.net/WangYuanQing113/article/details/121582415

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。