下拉框显示ztree

最新推荐文章于 2025-07-10 13:47:28 发布

hello，是翠花呀

最新推荐文章于 2025-07-10 13:47:28 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： tree.js 文章标签： ztree 下拉框

本文链接：https://blog.youkuaiyun.com/qq_26769677/article/details/80319812

tree.js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了ZTree插件的基本用法及配置选项，包括如何初始化树形结构、设置节点样式以及实现点击事件等交互功能。通过具体示例展示了如何利用ZTree进行数据展示和操作。

<script src="../../assets/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="../../assets/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

$('#tree').selectTree('tree', res.treeData, 'radio', true);
  var setting = {
     data: {
         simpleData: {
             enable: true,
             idKey: "id",
             pidKey: "pId",
             rootPid: '-1'
         }
     },
     view: {
         showIcon: false
     },
     callback: {
         onClick: clickFun,
     }
 };
 function clickFun(ev,treeId,node) {
     $("#node-input2").val(node.name);
     $(".tree-select > .tree-wrap").hide();
 }
 $.fn.zTree.init($("#tree"), setting, res.ztreeData);

var zTree = $.fn.zTree.getZTreeObj('tree');//获取ztree对象
            var node = zTree.getNodes()[0];
            zTree.selectNode(node);//选择点
            zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件

selectTree方法：

selectTree: function (treeId, data, type, simpleData, selectNodeType,showField,returnField) {
        var _this = $(this);
        _this.find('input').off('click');
        $.fn.zTree.destroy(treeId);
        _this.find('.tree-wrap').mCustomScrollbar('destroy');
        var multi;
        if (type == 'radio') {
            multi = false;
        } else {
            multi = true;
        }
        var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: multi,
                dblClickExpand: true,
                addDiyDom: addDiyDom
            },
            check:{
                enable:multi
            },
            data: {
                simpleData: {
                    enable: simpleData
                }
            },
            callback: {
                // beforeClick: beforeClick
                onClick: clickFun,
                onCheck:checkFun
            }
        };

        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
                icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 1) {
                var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
                switchObj.before(spaceStr);
            }
        }

        function checkFun(event, treeId, treeNode){
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = treeObj.getCheckedNodes(true);
            var showList = [];
            var returnList = [];
            $.each(nodes,function(i,v){
                if(showField != null && showField != ''){
                    showList.push(v[showField]);
                }else{
                    showList.push(v.name);
                }
                if(returnField != null && returnField != ''){
                    returnList.push(v[returnField]);
                }else{
                    returnList.push(v.id);
                }
            });
            _this.find('input').val(showList.join(',')).attr('data-id',returnList.join(','));
        }

        function clickFun(ev, treeId, treeNode) {
            if (type == 'radio') {
                if (selectNodeType) {
                    if (treeNode[selectNodeType.key] == selectNodeType.value) {
                        if(showField != null && showField != ''){
                            _this.find('input').val(treeNode[showField]);
                        }else{
                            _this.find('input').val(treeNode.name);
                        }
                        if(returnField != null && returnField != ''){
                            _this.find('input').attr('data-id', treeNode[returnField]);
                        }else{
                            _this.find('input').attr('data-id', treeNode.id);
                        }
                        _this.find('input').change();
                        _this.find('.tree-wrap').hide();
                        $('body .backdrop.select-tree').remove();
                    }
                } else {
                    if(showField != null && showField != ''){
                        _this.find('input').val(treeNode[showField]);
                    }else{
                        _this.find('input').val(treeNode.name);
                    }
                    if(returnField != null && returnField != ''){
                        _this.find('input').attr('data-id', treeNode[returnField]);
                    }else{
                        _this.find('input').attr('data-id', treeNode.id);
                    }
                    _this.find('input').change();
                    _this.find('.tree-wrap').hide();
                    $('body .backdrop.select-tree').remove();
                }
            } else {

            }
        }
        _this.find('.tree-wrap').on('click',function(){
            return false;
        })
        $('body').on('click',function(){
            _this.find('.tree-wrap').hide();
        })
        $.fn.zTree.init($('#' + treeId), setting, data);
        _this.find('input').on('click', function () {
            if (_this.find('.tree-wrap').css('display') == 'none') {
                _this.find('.tree-wrap').css('display', 'block');
                _this.find('.tree-wrap').mCustomScrollbar({
                    axis: "yx",
                    theme: "my-select-table-theme",
                    advanced: {
                        updateOnContentResize: true
                    }
                });
                $('body').append('<div class="backdrop select-tree"></div>');
                $('body .backdrop.select-tree').on('click', function () {
                    _this.find('.tree-wrap').hide();
                    $('body .backdrop.select-tree').remove();
                })
            } else {
                _this.find('.tree-wrap').hide();
            }
            return false;
        })
    },