肉菜系统，组成jquery-easyui树形，-优快云博客

本文链接：https://blog.youkuaiyun.com/shen609738067b/article/details/44017729

一：市场：

<%-- --%>
    <%if (condition != null && condition.indexOf("rcArea") != -1) { %>
    <tr class="TableEditTd">
        
  <td><div align="right"><tsm:i18n key='选择区域' colon="true" required="true">选择区域：</tsm:i18n>  </div></td>
        <td>
   <div align="left">
    <textarea id="areaMarketText" name="areaMarketText" class="inputtext" style="width:200px;height:60px;" required="true" readonly="readonly"><bean:write name="reportDefForm" property="inputValue(areaMarketText)" filter="false"/></textarea>
   
   <input type="hidden" name="scale_area" id="scale_area" class="inputtext" required="true" value="<bean:write name="reportDefForm" property="inputValue(scale_area)" filter="true"/>"/>
   </div>
   <div align="left">
    <input name="Save" type="button" class="botton" οnclick="addMyTab('选择区域','/report-web/report/webdoc/selectAreaTree.jsp');" value="选择区域">
     <input name="Save" type="button" class="botton" οnclick="clearAllArea();" value="全部清除">

   </div>
  </td>
    </tr>
    <%} %>
2：树形页面：selectAreaTree.jsp

<%@ page pageEncoding="UTF-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">

  <title></title>
   <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css"
   href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css"
   href="<%=basePath%>js/jquery-easyui-1.4/themes/icon.css">
  <script type="text/javascript"
   src="<%=basePath%>js/jquery-easyui-1.4/jquery.min.js"></script>
  <script type="text/javascript"
   src="<%=basePath%>js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    function getTopWindow(){
   return window.top.frames["taFrame"] != null ? window.top.frames["taFrame"] : window.top;
  }
  function easyCloseTab(){
   getTopWindow().closeTab();
  }

     function getSelect() {
   var selectTree = $(window.top.document).contents().find("#"+"<%=request.getParameter("tabTitle")%>")[0].contentWindow;
   var selectTreewindows = selectTree.frames['mainFrame'];
   var listObj = selectTreewindows.document.getElementById('scale_area');
   var listObj1 = selectTreewindows.document.getElementById('areaMarketText');

   //alert(listObj);
   var nodes = $('#tt').tree('getChecked');
   var value = "";
   var val="";
   var area="";
   for ( var i = 0; i < nodes.length; i++) {
    if (typeof (nodes[i]["attributes"]) != "undefined") {
     if (nodes[i]["attributes"].type = "value"){
      if (value != '') value += ',';
      value += nodes[i].text;
      if(val!='') val +=',';
      val+="'"+nodes[i].text+"'";
     }
    }
    else{
      if (area != '') area += ',';
      area += "'"+nodes[i].text+"'";

      if (value != '') value += ',';
      value +=nodes[i].text;
    }
   }
  listObj.value = area.replace("'选择区域',","");
  //alert(area.replace("'选择区域',",""));
  //alert(listObj.value);
  //listObj1.value =val;
  listObj1.value = value.replace("选择区域,","");
  //alert(listObj1.value);


  easyCloseTab();
}

$(function() {
  $('#tt').tree( {
   animate : true,
   checkbox : true,
   lines : true,
    url:"/footTrace/sim/cache.do?cmd=getAreaJsonInfo&from=report&type=1"
    //url:"http://192.168.72.142:8080/report-web/report/webdoc/area.json"

  });
});
</script>
</head>

<body>
  <div style="padding: 5px">
   <div>
    <a href="javascript:getSelect();" class="easyui-linkbutton"
     data-options="iconCls:'icon-ok'">确定</a>
    <a href="javascript:easyCloseTab();" class="easyui-linkbutton"
     data-options="iconCls:'icon-cancel'">关闭</a>
   </div>
   <ul id="tt" class="easyui-tree"
    data-options="url:'tree_data1.json',method:'get',animate:true,checkbox:true"></ul>
  </div>
  <script type="text/javascript">
function getChecked() {
  var nodes = $('#tt').tree('getChecked');
  var s = '';
  for ( var i = 0; i < nodes.length; i++) {
   if (s != '')
    s += ',';
   s += nodes[i].text;
  }
  alert(s);
}
</script>
</body>
</html>

3：例如，json数据如下

data : [ {
    id : 1,
    text : "选择区域",
    children : [ {
     id : 1,
     text : "天心区",
     attributes : {
      type : 'value'
     }
    },

    {
     id : 1,
     text : "望城区",
     attributes : {
      type : 'value'
     }
    },
    {
     id : 1,
     text : "宁乡县",
     attributes : {
      type : 'value'
     }
    },
    {
     id : 1,
     text : "浏阳市",
     attributes : {
      type : 'value'
     }
    },
    {
     id : 1,
     text : "雨花区",
     attributes : {
      type : 'value'
     }
    },
     {
     id : 1,
     text : "长沙县",
     attributes : {
      type : 'value'
     }
    },
     {
     id : 1,
     text : "芙蓉区",
     attributes : {
      type : 'value'
     }
    },
     {
     id : 1,
     text : "岳麓区",
     attributes : {
      type : 'value'
     }
    },
     {
     id : 1,
     text : "开福区",
     attributes : {
      type : 'value'
     }
    }

     ]
   } ]