从数据库获取数据前端实现建树

来源：互联网发布：免费工作流引擎 java 编辑：程序博客网时间：2024/05/16 17:28

//第一步表单

<label for="org1selectTree" style="font-weight: bold;">多选组织树：</label><span style="white-space:pre"></span>            <span style="white-space:pre"></span><br>            <span style="white-space:pre"></span><label for="org1selectTree">组织编码：</label>            <span style="white-space:pre"></span><input type="text" id="orgs1selectTree" name="orgs1selectTree" readonly="readonly" style="width: 680px"  onclick="selectMTree('orgs1selectTree','orgs1selectTreeName');"/>    <span style="white-space:pre"></span>            <span style="white-space:pre"></span><br>            <span style="white-space:pre"></span><label for="org1selectTree">组织名称：</label>            <span style="white-space:pre"></span><input type="text" id="orgs1selectTreeName" name="orgs1selectTreeName" style="width: 680px" onclick="selectMTree('orgs1selectTree','orgs1selectTreeName');"/>

 function selectMTree(eleId,eleName){               <span style="white-space:pre"></span>var url='${requestContext.contextPath}/management/organizationTree/orgTree?state=open&eleId='+eleId+"&eleName="+eleName+"&type=1";               <span style="white-space:pre"></span>var eleId=eleId;               <span style="white-space:pre"></span>var eleName=eleName;               <span style="white-space:pre"></span>var iWidth=365; //弹出窗口的宽度;               <span style="white-space:pre"></span>var iHeight=530; //弹出窗口的高度;               <span style="white-space:pre"></span>var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;               <span style="white-space:pre"></span>var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;                   var properties = "height="+iHeight+",width="+iWidth+",top="+iTop+", left="+iLeft+",status:no,resizable:no,toolbar=no,menubar=no,location=no,scroll:no,z-look:yes";                   openWindow=window.open(url, "window", properties);                   openWindow.focus();              }

//openWindow打开界面跳转到orgTree界面

//orgTree.html

<!DOCTYPE html><html>    <head>        <title>组织机构树</title>        <meta charset="UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=8,9,10" />        <link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/themes/${skinName}/base.css">        <link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/themes/${easyuiSkinName}/easyui.css">        <link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/themes/${skinName}/icon.css">        <script type="text/javascript">            //呈现顶端遮罩            if (top.showMask) top.showMask();        </script>  <style type="text/css">.s1{width:50px;padding-left:5px;margin-left:5px;}.s2{width:50px;padding-left:5px;margin:3px;}#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}#d2{height:30px;font-size:24px;background-color:blue;color:white;}#d3{padding-left:30px;}</style>    </head>    <body class="easyui-layout"  style="visibility:hidden">    <div data-options="region:'north',title:'工具栏',collapsible:false,noheader:true,border:false" style="height:30px;">    <form id="orgtreeQuery" class="orgtreeQuery" style="margin: 0; padding: 0" autoTypeset="false">       <span class="property">           <label>组织名称：</label>               <input type="text" id="filter" name="filter" class="wfinput"/>           </span>           <span class="property">           <a href="javascript:void(0)" id="btnSearch" class="easyui-linkbutton">查询</a>           </span>       </form>       </div>       <div data-options="region:'center',border:true,collapsible:false">       <ul id='treeTT'></ul>        </div>    <div data-options="region:'south',border:false" style="height:35px;text-align:right; padding:5px 5px 0 0;background-color:#efefef;">            <a id="btnSave" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:false">确定</a>            <a id="btnClose" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:false">取消</a>        </div>       <script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery-${jqueryVersion}.min.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/jquery.easyui.min.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/datagrid-detailview.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery.cookie.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/guiders/guiders-1.1.1.js"></script><script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/changeEasyuiTheme.js"></script>    <script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery-domain.min.js"></script>     <script type="text/javascript">     var isfilter=false;     function GetQueryString(name)     {          var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");          var r = window.location.search.substr(1).match(reg);          if(r!=null)return  unescape(r[2]); return null;     }     function tree(){     var queryParams = getQueryParams();     if(queryParams == false) {         return;     }     $("#btnSearch").linkbutton("disable");     var url='${requestContext.contextPath}/management/organizationTree/getOrganizationTree';     var id = GetQueryString("eleId");         var name=GetQueryString("eleName");         var state=GetQueryString("state");         var type=GetQueryString("type");         var checkbox=true;         if(type==1){         checkbox=true;         }else if(type==2){         checkbox=false;         $('#btnSave').css({ visibility: 'hidden' });         }         queryParams.state=state;     $('#treeTT').tree({    onClick: function(node){     if (!$(node).tree('isLeaf', node.target)) {     $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);                node.state = node.state === 'closed' ? 'open' : 'closed';    }else{     if(type==1){    $('#treeTT').tree('check', node.target);     }else if(type==2){     if(window.opener){                    if(window.opener.document.getElementById(id)){                    window.opener.document.getElementById(id).value = node.id;                    }                    if(window.opener.document.getElementById(name)){                    window.opener.document.getElementById(name).value = node.text;                    }                    }                    window.close();             }    }    },    async: false,     cache:false,    lines : true ,    animate : true ,        url: url,        checkbox:checkbox,        method:'get',        queryParams:queryParams,        onLoadError:function(arguments){        alert("获取数据失败"); if(window.opener){ window.opener.document.getElementById(id).value = ""; window.opener.document.getElementById(name).value = ""; }        window.close();        },        onLoadSuccess:function(node, data){        $("#btnSearch").linkbutton("enable");        if(data==null||data==""){        alert("没符合条件的数据");        if(window.opener){     window.opener.document.getElementById(id).value = "";     window.opener.document.getElementById(name).value = "";     }        window.close();        }//         },//         loadFilter:function(data,parent){//         alert(data);// //         var d=data;// //         var p=parent;                }        });     }     function getQueryParams() {         var queryParams = $('form.orgtreeQuery').domain('collect');         if(queryParams == false) {             return false;         }         $("#btnSearch").linkbutton("enable");         return queryParams;         }        $(function(){        //解析页面                $.parser.parse();                var id = GetQueryString("eleId");                var name=GetQueryString("eleName");                tree();                $('#btnClose').click(function(){window.close();});                $("#btnSearch").click(function(){                treeFilter();//                 tree();                });                $('#btnSave').click(function(){                var $tree=$("#treeTT");                if(isfilter){                $tree=$tree.next("ul.filterTree");                }else{                $tree=$("#treeTT");                }                var rows= $tree.tree('getChecked');                var group="";                var groupName="";                for(var i=0;i<rows.length;i++){                var row=rows[i];                if(i<(rows.length-1)){                group+=row.id+",";                    groupName+=row.text+",";                }else{                group+=row.id;                    groupName+=row.text;                }                                }                if(window.opener){                if(window.opener.document.getElementById(id)){                window.opener.document.getElementById(id).value = group;                }                if(window.opener.document.getElementById(name)){                window.opener.document.getElementById(name).value = groupName;                }                }                window.close();                });                //显示隐藏页面                $('body').css({ visibility: 'visible' });                //移除顶端遮罩                if (top.hideMask) top.hideMask();            });                $.extend($.fn.tree.defaults, {            loader : function (param, success, error) {                var opts = $(this).tree("options");                if (!opts.url) {                    return false;                }                if(opts.queryParams){                    param = $.extend({},opts.queryParams,param);                }                $.ajax({                    type : opts.method,                    url : opts.url,                    data : param,                    dataType : "json",                    success : function (data) {                        success(data);                    },                    error : function () {                        error.apply(this, arguments);                    }                });            },            queryParams:{}        });        //设置参数        $.extend($.fn.tree.methods, {            setQueryParams : function (jq, params) {                return jq.each(function () {                    $(this).tree("options").queryParams = params;                });            }        });        //过滤        function treeFilter(){        isfilter=true;        var $tree = $("#treeTT");                var filterVal = $.trim($("#filter").val());        if(!filterVal){          revert();         return;        }                var reg = new RegExp(filterVal,"i");                var filterNodes = [];        $tree.find("div.tree-node").each(function(){        var treeNode = $(this).data("treeNode")        if(reg.test(treeNode.text)){        var tNd = $.extend({},treeNode);        var text = tNd.text;//         tNd.text = text.replace(reg, '<b style="color: blue;">$&</b>');tNd.text = text.replace(reg, '$&');        filterNodes.push(tNd);        }        });                var filterTree = $tree.next("ul.filterTree");        if(filterNodes.length > 0){        if(filterTree.length == 0){        filterTree = $("<ul/>",{class:'filterTree'});        filterTree.insertAfter($tree);        $tree.hide();        var options = $tree.tree("options");        var options = $.extend(options,{url:null,data:filterNodes});        filterTree.tree(options);        }else{        filterTree.tree("loadData",filterNodes);        }        }else{        if(filterTree.length>0){        filterTree.remove();        }        $tree.show();        }        }        function revert(){        var $filterTree = $("#treeTT").next("ul.filterTree");        if($filterTree.length>0){        $filterTree.remove();        $("#treeTT").show();        }        }        </script>    </body></html>

//Springmvc中的Controller的getOrganizationTree方法如下

@ResponseBody    @RequestMapping(value = {"/getOrganizationTree"}, method = RequestMethod.GET)    public TreeModel getOrganizationTree(HttpServletRequest request) {    Map<String, Object> queryParams = RequestUtil.asMap(request, false);    return organizationService.getGroupTree(queryParams);    }

//Springmvc中的organizationService方法如下

@Overridepublic TreeModel getGroupTree(Map<String, Object> queryParams) {int topId=-1;//顶级IDif(queryParams.get("topId")!=null && !"".equals(queryParams.get("topId").toString()) && Integer.parseInt(queryParams.get("topId").toString())>-1){topId=Integer.parseInt(queryParams.get("topId").toString());}List<ActGroup> coll = groupDao.find(queryParams);//机构查询条件String state=queryParams.get("state")==null?"closed":queryParams.get("state").toString();List<TreeNodeModel> list=new ArrayList<TreeNodeModel>();TreeModel model=new TreeModel();if(!CollectionUtils.isEmpty(coll)){for(ActGroup group : coll){TreeNodeModel treenode=new TreeNodeModel();treenode.setId(group.getId()!=null?Integer.parseInt(group.getId()):0);treenode.setText(group.getName()!=null?group.getName():"");treenode.setParent(group.getRev()!=null?group.getRev():0);treenode.setIconCls("icon-org");Map<String, Object> attributes=new HashMap<String, Object>();attributes.put("type", "group");treenode.setAttributes(attributes);list.add(treenode);}}model=TreeUtil.buildTreeList(list,topId,state);return model;}

//ActGroup.java

public class ActGroup implements Serializable  {private static final long serialVersionUID = 1L;private String id;private Integer rev;private String name;private String type;public ActGroup(){}public ActGroup(String id,Integer rev,String name,String type){this.id=id;this.name=name;this.rev=rev;this.type=type;}public String getId() {return id;}public void setId(String id) {this.id = id;}public Integer getRev() {return rev;}public void setRev(Integer rev) {this.rev = rev;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getType() {return type;}public void setType(String type) {this.type = type;}}

//数据库如图所示

//最终的效果如图所示

0 0