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

最新推荐文章于 2023-12-02 01:12:07 发布

开发点滴记录

最新推荐文章于 2023-12-02 01:12:07 发布

阅读量933

点赞数

本文链接：https://blog.csdn.net/u013516076/article/details/50261811

版权

本文介绍了如何在前端根据从数据库获取的数据构建树形结构。通过步骤和示例代码展示了如何处理数据库中的数据，并实现最终的树状视图效果。

摘要由CSDN通过智能技术生成

//第一步表单

<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"  οnclick="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" οnclick="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">
        &