jquery+zTree+colorbox 实现弹出框内组织结构树

最新推荐文章于 2022-04-08 09:20:03 发布

小菜鸟的博客

最新推荐文章于 2022-04-08 09:20:03 发布

阅读量1.5w

点赞数 3

分类专栏： jquery 文章标签： jquery function class input div button

本文链接：https://blog.csdn.net/houpengfei111/article/details/8003717

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

点击新建按钮弹出两个框，第一个是刷新等待的图片框，第二个是ztree产生的节点树，如图1-1所示：

那么第一个刷新等待的图片框和第二个是ztree产生的节点树分别保存在两个隐藏的div层里面，代码如下：

<div style="display: none;">

    <div id="successDiv" class="showSuccessDiv">

<img src="${ctx}/portal/images/refresh.gif"width="64"height="64"alt="refresh" />

    </div>

</div>

<div style="display: none;">

     <div id="orgDiv" class="showParentDiv">

          <div class="grayBg">

             <div class="toolbar">

       <input type="button" value=" 确定 "/>

      <input type="button" value=" 取消 " οnclick="closeWin();"/>

          </div>

       </div>

<ul id="orgTree"class="tree" style="height:370px; overflow-y:auto;"></ul>

       </div>

</div>

其中<ul>标签是用来生成组织结构树的，需要制定class属性，这里的class=“tree”是引用ztree自带的css文件中的css样式。

var orgZTree;                         //定义全局ZTree对象，存放整个生成的Ztree树

var orgSetting = {                    //生成树结构时的setting属性

      isSimpleData : true,            //制定可以支持数据结构，不用转换为复杂的josn对象

      showIcon : false,               //不显示图标

      treeNodeKey : "id",             //如指定isSimpleDate:true,这个属性必须被指定              

      treeNodeParentKey : "parentId", //如指定isSimpleDate:true,这个属性必须被指定

      showLine : true,                //显示父子之间的线

      checkable : true,               //节点前面显示check组件

      checkType : { "Y": "", "N": "" },//点击的时候父子节点都不影响

      checkStyle : "checkbox",         //check组件类型为checkbox

      checkRadioType : "all",   

      callback:{                       //回调函数

        change: changeCheckValue       //当节点的check组件被点击时触发

       }

};

注解：1、isSimpleDate：true  支持这样的简单数组：

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"},

    ......

];

如不指定侧需要提供json数据嵌套格式：

var zTreeNodes = [

    {"id":1, "name":"test1", "nodes":[

      {"id":11, "name":"test11", "nodes":[

        {"id":111, "name":"test111"}

      ]},

      {"id":12, "name":"test12"}

    ]},

    ......

];

2、

当 checkable = true 且 checkStyle = "checkbox" 时，checkType 配置勾选 checkbox 对于父子节点关联关系。

      Y 属性定义 CheckBox 被勾选后的情况；
      N 属性定义 CheckBox 取消勾选后的情况；
      "p" 表示操作会影响父级节点；
      "s" 表明操作会影响子级节点。

function showOrgDiv () {
		var url = "${ctx}/system/sysOrg/orgTree.action";
		$.ajax({
			url: url,
			dataType: "json",
			beforeSend: function() {
				window.parent.openWin();
		  	},
			success: function(data){
				orgZTree = parent.$(parent.document.getElementById('orgTree')).zTree(orgSetting, data);
				$($(parent.document.getElementById('orgDiv')).find("input")[0]).unbind("click").bind("click",submitOrg);
				window.parent.showTreeWin('orgDiv');
				orgZTree.expandAll(true);
				orgCheckedTreeNode($("#orgIds").val(),$("#defaultOrgId").val());
			}
		});
		
	}

这里通过ajax方式取得组织结构树（这里就不讲解如何后台得到数据了），在发送请求之前执行方法winow.parent.openWin();方法，意思是调用当前页的父页面中的openWin（）方法，具体方法如下：

function openWin(){
        $.showSuccessInfo({});
    }
这里的showSuccessInfo({})方法是自己拓展的jquery方法，具体如下：
jQuery.extend({
    showInfo: function(id,params) {
        params = jQuery.extend({
            container: id,
            close: undefined
        }, params);
    
    
        var $container = jQuery('#' + params.container);
    
        jQuery.colorbox({
            inline: true,
            href: '#' + params.container,
            opacity: 0.3,
            close: '',
            overlayClose: false
        });
    },



    showSuccessInfo: function(params) {      //这里就是上面调用的方法
        params = jQuery.extend({
            container: "successDiv",
            close: undefined
        }, params);
    
    
        var $container = jQuery('#successDiv');
    
        jQuery.colorbox({
            inline: true,
            href: '#successDiv',
            opacity: 0.3,
            close: '',
            overlayClose: false
        });
    }
});

至此，完成了弹出第一个刷新框的功能。

那么接下来是如何弹出ztree生成树了

orgZTree = parent.$(parent.document.getElementById('orgTree')).zTree(orgSetting, data);  
$($(parent.document.getElementById('orgDiv')).find("input")[0]).unbind("click").bind("click",submitOrg);
window.parent.showTreeWin('orgDiv');
orgZTree.expandAll(true);
orgCheckedTreeNode($("#orgIds").val(),$("#defaultOrgId").val());
这是上面方法体中的方法，第一句 
orgZTree = parent.$(parent.document.getElementById('orgTree')).zTree(orgSetting, data);  
意思是$(parent.document.getElementById('orgTree'))得到id为orgTree的ul标签，


执行zTree(orgSetting, data)是ztree的生成方法，其中orgSetting就是咱们设置的json格式的属性，data为后台得到的组织结构数组。
这样把这个树赋值给全局变量orgZTree。
$($(parent.document.getElementById('orgDiv')).find("input")[0]).unbind("click").bind("click",submitOrg);
上边这句是给弹出框中的确定按钮加onclick时间，点击时触发submitOrg函数
window.parent.showTreeWin('orgDiv');
这句是调用父页面中的showTreeWin（）方法，方法如下：
function showTreeWin(){
         $.showInfo('orgDiv',{});
 }
orgZTree.expandAll(true);
设置为全部展开

orgCheckedTreeNode($("#orgIds").val(),$("#defaultOrgId").val());
这个是打开组织结构框时，节点数中有一个默认的节点，对其查找出来并checked；



涉及到的方法如下：

function changeCheckValue(event,treeId, treeNode) {

        if(treeNode.checked) {

            var nodes = getCheckNodes(orgZTree);

            for (var i = 0;i < nodes.length;i++) {

                if (nodes[i]['name'].indexOf("（默认）") > -1) {

                    nodes[i]['name'] = nodes[i]['name'].replace("（默认）","");

                    orgZTree.updateNode(nodes[i], true);

                }

            }

            $("#defaultOrgId").val(treeNode.id);

            $("#defaultOrgName").val(treeNode.name);

            treeNode.checked=true;

            treeNode.name = treeNode.name + "（默认）";

            orgZTree.updateNode(nodes[i], true);

        } else {

            treeNode.checked=false;

            alert(treeNode['id'] == $("#defaultOrgId").val());

            alert(treeNode['id']);

            

            if(treeNode['id'] == $("#defaultOrgId").val()){

                $("#defaultOrgId").val("");

                $("#defaultOrgName").val("");

                treeNode.name = treeNode.name.replace("（默认）","");

            }

            alert($("#defaultOrgId").val());

        }

        orgZTree.updateNode(treeNode, true);

    }





function orgCheckedTreeNode(ids,defaultId){

        if(ids != "" && defaultId != ""){

            var idsArray = ids.split("；");

            for(var i=0;i<idsArray.length;i++){

                var node = orgZTree.getNodesByParam("id", idsArray[i]);

                if(node[0] != undefined){

                    node[0].checked = true;

                    if(idsArray[i] == defaultId){

                        node[0].name = node[0].name+"（默认）";

                    }

                    orgZTree.updateNode(node[0], true);

                }

            }

        }

    }

    

    function submitOrg(){

        var nodes = getCheckNodes(orgZTree);

        var len = getCheckNodesCount(orgZTree);

        if(len == 0){

            alert("请选择组织！");

            return;

        }else if (len == 1) {

            $("#defaultOrgId").val(nodes[0].id);

            $("#defaultOrgName").val(nodes[0].name.replace("（默认）",""));

        }

        if ($("#defaultOrgId").val() == "" && $("#defaultOrgName").val() == "") {

            alert("请选择默认组织！");

            return;

        }

        if($("#postIds").val()!=""){

            if(confirm("更改用户部门用户岗位将会清空！您确定要继续吗？")){

                submitOrgHandler(nodes);

            }

        }else{

            submitOrgHandler(nodes);

        }

    }

    

    function submitOrgHandler(nodes){

        isUpdate = false;//在为true的时候，点击岗位设置，从远程获取数据，在重置部门之后，不再从远程获取数据        

        orgIds = "";

        orgNames = "";

        orgIds = $("#defaultOrgId").val() + "；";

        for(var i = 0;i < nodes.length;i++){

            if (nodes[i]['id'] != $("#defaultOrgId").val()) {

                orgIds += nodes[i]['id'] + '；';    

                orgNames += nodes[i]['name'] + '；';

            }

        }

        orgNames = $("#defaultOrgName").val() +"（默认）；"  + orgNames;

        if (orgNames.lastIndexOf("；") > -1) {

            orgNames = orgNames.substring(0,orgNames.lastIndexOf("；"));

        }

        $("#orgIds").val(orgIds);

        $("#orgNames").text(orgNames);

        //通过验证

        $("#orgIds").valid();

        $("#defaultPostId").val("");

        $("#defaultPostName").val("");

        $("#postIds").val("");

        $("#postNames").text("");

        unbind();

        window.parent.closeWin();

    }

小菜鸟的博客

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
jquery+zTree+colorbox 实现弹出框内组织结构树

点击新建按钮弹出两个框，第一个是刷新等待的图片框，第二个是ztree产生的节点树，如图1-1所示：那么第一个刷新等待的图片框和第二个是ztree产生的节点树分别保存在两个隐藏的div层里面，代码如下：
复制链接

扫一扫