Jquery的treeview插件实现树形结构
2016-04-21 21:35
691 查看
Jquery的treeview插件实现树形结构
最近由于功能需要,要将数据库中的数据取出来,展现的形式是树状结构。
表中的数据大致为:
KPI_CODE为唯一id,KPI_NAME为名字,PARENT_CODE为父id,LVL_ID为层级
![](http://img.blog.csdn.net/20160421211818213)
要展现的形式为:
![](http://img.blog.csdn.net/20160421212020414)
具体实现逻辑如下:
思路:将数据库的数据查询出来,按某种格式处理后返回给前台,前台用jQuery的treeview插件将数据展现为树状结构。
步骤:
1.默认加载前两级目录
2.点击第二级目录,继续加载第三级目录
3.调用插件处理数据
java代码:
jsp:
mapper:
最近由于功能需要,要将数据库中的数据取出来,展现的形式是树状结构。
表中的数据大致为:
KPI_CODE为唯一id,KPI_NAME为名字,PARENT_CODE为父id,LVL_ID为层级
要展现的形式为:
具体实现逻辑如下:
思路:将数据库的数据查询出来,按某种格式处理后返回给前台,前台用jQuery的treeview插件将数据展现为树状结构。
步骤:
1.默认加载前两级目录
2.点击第二级目录,继续加载第三级目录
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;//指标id private String parentId;//父id private String lvl;//等级 private String calcObjType;//岗位id private 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>
相关文章推荐
- 执行ajaxFileUpload发生jQuery.handleError is not a function错误的个人解决方法
- JQuery获取select选中的值
- Jquery.form.js Ajax ajaxSubmit提交表单
- jQuery获取选中复选框的值
- jquery file change 一次问题的解决
- 获取jquery打分插件rateit 的分值
- 使用jquery生成随机二维码的方法
- Jquery 实现网页右击功能
- Jquery控制div滚动,但不显示滚动条
- Jquery实现下拉多选框multiSelect
- HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)
- jQuery 监控键盘一段时间内没输入
- JS/Jquery得到Select标签显示值和value值
- vue-cli webpack 引入jquery
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 上传文件jQuery 的ajaxFileUpload 方法上传文件
- 【javascript】利用jquery ajaxPrefilter防止ajax重复提交
- jQuery eq()方法 =》加载页面时单选框默认选中
- web图片点击全屏jquery