zTree实现搜索选中事件

效果展示：

HTML代码：

        <div class="oraTree">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">组织机构</h4>
                    </div>
                    <div class="modal-body clearfix pt20 pb20">
                        <div id="provinceListDivList" class="ztree"></div>
                    </div>
                </div>
            </div>
        </div>

js：

$(function () {
    //树加载 start
    var setting = {
        check: {
            //是否要加个多选单选之类的
            enable: false
        },
        data: {
            key: {
                //树节点要展示的名称key
                name: "orgFullName"
            },
            simpleData: {
                //这里设置要自定义的参数名称，详细详细请参考zTree 的 API
                enable: true, idKey: "orgCode", pIdKey: "parentCode", rootPId: ''
            }
        },
        callback: {
            //点击后绑定事件：筛选出需要的组织机构
            onClick: zTreeOnClick
        }
    };

    var showData = [];
    var organization = {};
    $.ajax({
        url: WEB_ROOT + "/organization/listDataZTree",
        data: organization,
        async: true,
        type: "POST",
        dataType: "json",
        success: function (data) {
            if (data.success) {
                showData = data.treeViewVOList;
                $.fn.zTree.init($("#provinceListDivList"), setting, showData).expandAll(true);
            } else {
                WEB.msg.info("提示", "系统错误，请稍后再试！")
            }
        }
    });
    //树加载 end
})
//下面这个是我这边功能需要的，可以不要
function zTreeOnClick(event, treeId, treeNode) {
    queryStaffTabByNode(1, treeNode);
}
function queryStaffTabByNode(pageNo, node) {
    //如果存在子节点，全部查出来
    var qryUrl = WEB_ROOT + "/organization/getListByNode";

    //根据节点ID以及父节点ID筛选
    var nodeId = node.id;
    //机构名称
    var params = {
        orgCode: nodeId,
        "search_.page": pageNo,
        "search_.pageCount": 10
    };

    $.gridLoading({message: "正在查询数据"});
    $.ajax({
        url: qryUrl,
        data: params,
        async: true,
        dataType: "html",
        success: function (data) {
            $.gridUnLoading({message: "正在查询数据"});
            $("#organizationTabDiv").empty();
            $("#organizationTabDiv").html(data);
        }
    });
}

后端代码：

    @ResponseBody
    @RequestMapping(value = "/organization/listDataZTree")
    public  Map<String, Object> getOrganizationZTree(TdSysOrganization organizationDTO)
    {
        Map <String,Object> retMap =new HashMap<String, Object>();
        PageResponse response= organizationApi.selectOrganizationList(organizationDTO);
        List<TreeViewVO> organizationList=response.getResult();
        retMap.put("success",true);
        retMap.put("treeViewVOList",organizationList);
        return retMap;
    }

详细的可以参考ztree API:http://www.treejs.cn/v3/api.php

下面写一下关于zTree选中树节点的获取方法：

CheckBox形式的选中网上有很多，这里就不写了，这里主要介绍一种

check: {
    enable: false
},

的情况

/**
 * 选定上级组织结构信息
 */
function selectOrgConfirm(event, treeId, treeNode) {
    //双击进入的时候
    $("#select_province_modal").modal('hide');
    var parentCodes = treeNode.parentCodes;
    var id = treeNode.orgWord;
    var text = treeNode.orgFullName;
    $("#parentCode").val(id);
    $("#parentCodes").val(parentCodes);
    $("#parentName").val(text);
}

function onCheckOrgConfirm() {
    //选中然后点击确定进入的时候
    $("#select_province_modal").modal('hide');
    var treeObj = $.fn.zTree.getZTreeObj("provinceListDiv"),
        nodes = treeObj.getSelectedNodes();
    //选中了就可以用
    if (nodes.length > 0) {
        $("#parentCode").val(nodes[0].orgCode);
        $("#parentCodes").val(nodes[0].parentCodes);
        $("#parentName").val(nodes[0].orgFullName);
    }
}

下面的我的是给组件赋值，可以根据实际场景修改

zTree实现搜索选中事件

猜你喜欢