Jquery的treeview插件实现树形结构

来源：互联网发布：乔杉咖啡厅网络剧编辑：程序博客网时间：2024/09/21 09:06

最近由于功能需要，要将数据库中的数据取出来，展现的形式是树状结构。

表中的数据大致为：

KPI_CODE为唯一id,KPI_NAME为名字，PARENT_CODE为父id，LVL_ID为层级

要展现的形式为：

具体实现逻辑如下：

思路：将数据库的数据查询出来，按某种格式处理后返回给前台，前台用jQuery的treeview插件将数据展现为树状结构。

步骤：

1.默认加载前两级目录

3.调用插件处理数据

java代码：

import java.io.PrintWriter;import java.math.BigDecimal;import java.util.ArrayList;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts2.ServletActionContext;public class FMTreeAction {private String id;//指标idprivate String parentId;//父idprivate String lvl;//等级private String calcObjType;//岗位idprivate DaoHelper daoHelper;public String execute(){return "success";}public String getSubFMObj(){//System.out.println("getSubFMObj...");System.out.println("***id:"+id+",parentId:"+parentId+",calcObjType:"+calcObjType+",lvl:"+lvl);int lvlId = Integer.parseInt(lvl)+1;this.lvl = String.valueOf(lvlId);System.out.println("***id:"+id+",parentId:"+parentId+",calcObjType:"+calcObjType+",newlvl:"+lvl);List subList = daoHelper.queryForList("ecthree.manParaInfo.initTree.getSubFMObj", this);//List resultList = new ArrayList();int subSize = subList.size();for (int i = 0; i < subSize; i++) {Map<String, Object> subMap = (Map<String, Object>) subList.get(i);valueChange(subMap);//打印输出//System.out.println("subMap--"+i+":");//BccUtils.printMap(subMap);}this.response(JSONArray.fromObject(subList).toString());return null;}//获取一级二级节点public String getFMObj(){//System.out.println(id);//获取一级目录List fatherList = daoHelper.queryForList("ecthree.manParaInfo.initTree.getOneFMObj", this);//System.out.println("fatherList.size()---"+fatherList.size());for(int k = 0; k < fatherList.size(); k++){Map<String, Object> fatherMap = (Map<String, Object>) fatherList.get(k);valueChange(fatherMap);//打印输出//System.out.println("fatherMap--"+k+":");//BccUtils.printMap(fatherMap);//根据一级目录id查询二级目录this.parentId = (String)fatherMap.get("KPI_CODE");System.out.println("parentId:"+parentId);List subList =daoHelper.queryForList("ecthree.manParaInfo.initTree.getTwoFMObj",this); int subSize = subList.size();for (int i = 0; i < subSize; i++) {Map<String, Object> subMap = (Map<String, Object>) subList.get(i);valueChange(subMap);//打印输出//System.out.println("subMap--"+i+":");//BccUtils.printMap(subMap);}fatherMap.put("ChildNodes", subList);}this.response(JSONArray.fromObject(fatherList).toString());return null;}private void valueChange(Map<String, Object> map) {map.put("id", map.get("KPI_CODE"));map.put("text", map.get("KPI_NAME"));map.put("calcObjType", map.get("CLAL_OBJ_TYPE"));map.put("lvl", map.get("LVL_ID"));map.put("parent_id", map.get("PARENT_CODE"));BigDecimal childNum = (BigDecimal) map.get("CHILDNUM");if (childNum == null || childNum.intValue() == 0) {map.put("hasChildren", false);} else {map.put("hasChildren", true);}}protected void response(String message){try {HttpServletResponse response =ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.print(message);out.close();} catch (Exception e) {throw new RuntimeException(e);}}public DaoHelper getDaoHelper() {return daoHelper;}public void setDaoHelper(DaoHelper daoHelper) {this.daoHelper = daoHelper;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getParentId() {return parentId;}public void setParentId(String parentId) {this.parentId = parentId;}public String getCalcObjType() {return calcObjType;}public void setCalcObjType(String calcObjType) {this.calcObjType = calcObjType;}public String getLvl() {return lvl;}public void setLvl(String lvl) {this.lvl = lvl;}}

jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="b" uri="/bonc-tags" %><%@ taglib prefix="s" uri="/struts-tags" %><%String contextPath = request.getContextPath();%><html><head><s:head /><s:head template="head_ext.ftl" /><script>var contextPath="<%=contextPath%>";</script><link href="<%=contextPath%>/resources/boncbcs/base/css/base.css" rel="stylesheet" type="text/css" /><link href="<%=contextPath%>/resources/boncbcs/tho/jquery/jqueryui/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" /><link href='<b:url value="/resources/boncbcs/bcc/base/css/base.css"/>' rel="stylesheet" type="text/css"/><link href='<b:url value="/resources/boncbcs/bcc/org/css/01-base.css"/>' rel="stylesheet" type="text/css" /><link href="<%=contextPath%>/resources/boncbcs/tho/jquery/tree/css/tree.css" rel="stylesheet" type="text/css" /> <link href="<%=contextPath%>/resources/boncbcs/bcc/org/css/tree.css" rel="stylesheet" type="text/css" >    <link href="<%=contextPath%>/resources/boncbcs/tho/jquery/tree/css/page.css" rel="stylesheet" type="text/css" />    <link href="<%=contextPath%>/resources/boncbcs/bcc/ptl/bccptl.css" rel="stylesheet" type="text/css" /><script src="<%=contextPath%>/resources/boncbcs/tho/jquery/jquery.min.js" type="text/javascript"></script><script src="<%=contextPath%>/resources/boncbcs/tho/jquery/jquery.ui.custom.min.js" type="text/javascript"></script><script src="<%=contextPath%>/resources/boncbcs/tho/jquery/jquery.validate.pack.js" type="text/javascript"></script><script type="text/javascript" src="<%=contextPath%>/resources/boncbcs/tho/My97DatePicker/WdatePicker.js" defer="defer"></script><script src="<%=contextPath%>/resources/boncbcs/bcc/base/js/showTips.js" type="text/javascript"></script><script src="<%=contextPath%>/resources/boncbcs/tho/jquery/tree/jquery.tree.js" type="text/javascript"></script><script src='<b:url value="/resources/boncbcs/tho/jquery/fileUpload/ajaxfileupload.js"/>' type="text/javascript"></script><script src="<%=contextPath%>/resources/boncbcs/js/forbid.js" type="text/javascript"></script><link href="<%=contextPath%>/resources/boncbcs/bcc/bonc_bt/css/bonc_new.css" rel="stylesheet" type="text/css" ><script type="text/javascript">//点击框，展示树var orgFoucus=function(){//alert($("#calc_obj_type").val());initTree();var offset = $("#selectCalcObjType").offset();var _height = $("#selectCalcObjType").height()+5;$("#mainTree").css('left',offset.left);$("#mainTree").css('top',offset.top+_height);$("#mainTree").show();};//关闭var closeWin=function(){$("#tree1").html('');$("#mainTree").hide();};//清空function clearObjs(){$("#selectCalcObjType").val('');$("#CALC_OBJ_TYPE").val('');$("#mainTree").hide();}//确定function confirmWin(){$("#mainTree").hide();var itemIds = '';var itemNms = '';var str = "";$('#tree1 li li img[src$="checkbox_1.gif"]').each(function(){var arr = this.id.substring(6, this.id.length-3);if(arr.length>6){itemNms += jQuery(this).parent().attr("title") + ',';        itemIds += arr + ',';}  });  $("#myTree").html("");  $("#myTree").html(itemIds+"<br/>"+itemNms);}//初始化树的前两级var initTree=function(){$.getJSON(contextPath+"/bcc/ecthree/MyTree/FMTree!getFMObj.action", loadFMTree);};//处理初始化的前两级目录，即将其展现function loadFMTree(loadDataAll){var calcObjType = $("#calcObjType").val();//获取岗位id//alert(calcObjType);var roots = new Array();//一级目录数组for(var i=0;i<loadDataAll.length;i++){var loadData = loadDataAll[i];var root = {"id":loadData.id, "text":loadData.text, complete:true, "isexpand":false,"hasChildren":loadData.hasChildren, ChildNodes:loadData.ChildNodes, "lvl":loadData.LVL};roots[i] = root;}//showcheck为true时，表示可以多选var o = {showcheck:true, url:contextPath+"/bcc/ecthree/MyTree/FMTree!getSubFMObj.action?calcObjType="+calcObjType, onnodeclick:function (item) {//$("#myTree").html("");//var str = "id:"+item.id+"--name:"+item.text;//$("#myTree").html(str);//$("#mainTree").hide();}};o.data = roots;o.path = contextPath;$("#tree1").treeview(o); }</script> </head> <body style="overflow-y:auto;"><div class="appletBox" ><div class="appletTitleBar"><div class="appletTitle"><s:property value="pojo.CALC_OBJ_TYPE_DESC"/>薪酬因子配置</div><div class="appletIcon"></div></div></div><table class="table11" style="width: 100%;"><tr height="34px"><td align="left">岗位类型：<select id="calc_obj_type"><option value="A01030_01">岗位1</option><option value="A01030_02">岗位2</option><option value="A01030_03">岗位3</option><option value="A01030_04">岗位4</option><option value="A01030_05">岗位5</option><option value="A01030_06">岗位6</option><option value="A01030_07">岗位7</option></select></td>    <td align="left">负面清单：<s:textfield  id="selectCalcObjType"  onclick="orgFoucus()" /></td></tr></table><div id="mainTree" style="display:none;width:240px;height:306px;position: absolute;"><div style="width:231px;height:299px;" class="x-window-background"></div><div style="width:230px;" class="x-window"><div class="x-panel-header" ><span style="margin-left: 0px;">岗位类型</span><a style="margin-left: 40px"  href="#" onclick="confirmWin();">确定</a><a style="margin-left: 10px" href="#" onclick="clearObjs();">清空</a><a style="margin-left: 10px"  href="#" onclick="closeWin();">关闭</a></div><div style="width: 228px;height:270px;overflow: auto;" class="x-panel-body"><div id="tree1" align="left" style="padding-left:20px;" class="ztree"></div></div></div></div><div id="showFileUp" class="fileUpDiv"></div><div id="myTree">123123</div> </body></html>

mapper:

<!-- 查询子节点 --><select id="getSubFMObj" resultClass="java.util.HashMap">select a.*,         (select count(1) from kpicode.fm_kpi_code b                 where a.kpi_code = b.parent_code         ) as childNum    from  kpicode.fm_kpi_code a     where parent_code = #id# and lvl_id = #lvl#     order by kpi_code    </select><!-- 一级目录 --><select id="getOneFMObj" resultClass="java.util.HashMap">select a.*,         (select count(1) from kpicode.fm_kpi_code b where a.kpi_code = b.parent_code) as childNum    from  kpicode.fm_kpi_code a where a.lvl_id='1' and calc_obj_type is null order by kpi_code</select><!-- 二级目录 --><select id="getTwoFMObj" resultClass="java.util.HashMap">select *   from (select a.*,           (select count(1)                from kpicode.fm_kpi_code b                   where a.kpi_code = b.parent_code) as childNum         from kpicode.fm_kpi_code a           where  a.parent_code = #parentId#     order by  a.kpi_code)</select>

0 0