• jquery的ztree操作


    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- /WEB-INF/views/component/ldap/list_oauser.jsp -->
    <%@include file="/WEB-INF/views/commons/common.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>选择部门</title>
    <link rel="stylesheet" href="${UI_FRAME_PATH}/zTree/3.5.17/css/zTreeStyle/zTreeStyle.css">
    <link href="${CSS_PATH }/oamgt-style.css" rel="stylesheet" />
    </head>
    <body>
    <table>
    <tr>
    <td>
    <div style='height:300px;210px;border:#C6BEB2 1px solid;margin-top:10px;overflow-y:scroll;'>
    <ul id='userTree' class='ztree' style='display: block;'></ul>
    </div>
    </td>
    <td>&nbsp;</td>
    <td>
    <select style="height:300px;210px;border:#C6BEB2 1px solid;
    margin-top:10px;" multiple="multiple" id="selected_users"
    ondblclick="removeSelectedVal(this);">
    </select>
    </td>
    </tr>
    <tr>
    <td colspan="3" align="center" style="padding-top: 10px;">
    <input type="button" value="确 定" onclick="btnSubmit();"/>
    <input type="button" value="关 闭" onclick="btnClose();"/>
    </td>
    </tr>
    </table>
    </body>
    <script type="text/javascript" src="${UI_FRAME_PATH}/zTree/3.5.17/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="${UI_MODULES_PATH }/ldap/layer_comm.js"></script>
    <script type="text/javascript">
    function btnSubmit() {
    var field = document.getElementById("selected_users");
    var showStr = "";
    var keys = "";
    if(field.length != 0) {
    for(var i = 0; i < field.options.length ; i++) {
    showStr += (i == 0) ? field.options[i].value + "(" + field.options[i].text + ")"
    : ";" + field.options[i].value + "(" + field.options[i].text + ")";
    keys += (i == 0) ? field.options[i].value : ";" + field.options[i].value;
    }
    }
    $('#show-uids', window.parent.document).val(showStr);
    $('#uids', window.parent.document).val(keys);
    btnClose();
    }

    //初始化树
    $(document).ready(function(){
    initZTree();
    });

    var initZTree = function() {
    var treeObj = ${jsonArray };
    var treeNodes = {isParent:true, id:treeObj.rootArray[0].orgCode, name:treeObj.rootArray[0].orgName};
    $.fn.zTree.init($("#userTree"), setting, treeNodes);
    };

    var setting = {
    async: {
    enable: true,
    url: FRAMEWORK_BASE_PATH + "/oamgt/list_oamc_subuser_tree",
    autoParam: ["id=orgNo"],
    dataType: "text",
    type : "get",
    dataFilter:function(treeId, parentNode, treeNodes){
    var treeUNodes = treeNodes.userArray;
    for(var key =0;key<treeUNodes.length;key++){
    //*******start*******
    treeUNodes[key]["id"]=treeUNodes[key]["userNo"];
    treeUNodes[key]["name"]=treeUNodes[key]["userName"];
    //*******end*******
    }
    var treeONodes = treeNodes.subOrgsArray;
    for(var key = 0;key<treeONodes.length;key++){
    treeONodes[key]["isParent"]=true;
    treeONodes[key]["id"]=treeONodes[key]["orgCode"];
    treeONodes[key]["name"]=treeONodes[key]["orgName"];
    }
    treeONodes = JSON.stringify(treeONodes);
    treeUNodes = JSON.stringify(treeUNodes);

    treeUNodes = treeUNodes.substring(0,treeUNodes.length-1);
    treeONodes = treeONodes.substring(treeONodes.indexOf("[")+1);

    var treeNodes = "";
    if(treeONodes.length==1 || treeUNodes.length==1){
    treeNodes = treeUNodes + treeONodes;
    }else{
    treeNodes = treeUNodes + "," + treeONodes;
    }
    treeNodes = JSON.parse(treeNodes);
    return treeNodes;
    },
    },
    view: {
    showLine: true,
    dblClickExpand: false,
    showIcon: true
    },
    data: {
    key: {
    name: "name"
    },
    simpleData: {
    enable: true,
    idKey: "id",
    pIdKey: null,
    rootPId: null
    }
    },
    callback: {
    onClick:zTreeOnClick
    }
    };

    function zTreeOnClick(event, treeId, treeNode){
    var zTree = $.fn.zTree.getZTreeObj(treeId);
    var field = document.getElementById("selected_users");
    if(!treeNode.isParent){
    var single = ${single};
    if(single) {
    field.options[0] = new Option(treeNode.name, treeNode.id);
    } else {
    addOption(treeNode.id,treeNode.name,field);
    }
    } else {
    zTree.expandNode(treeNode,"refresh");
    }
    }
    </script>
    </html>

  • 相关阅读:
    换手机了,dopod566,小E丢了 :(
    在a标签的href与onclick中使用javascript的区别
    我的SQL相关TIPS
    asp.net的ajax服务器端代理
    IE和Firefox中的dom加载完成执行代码(defer)
    看几个源码,自己多做项目了!
    数据层使用Server对象;动态生成控件多文件上传
    ref,out(摘)
    JavaScript和jQuery的DOM操作
    闭包
  • 原文地址:https://www.cnblogs.com/husfsh-16300/p/6546651.html
Copyright © 2020-2023  润新知