数据库树形结构，EasyUI Tree 树

通过 $.fn.tree.defaults 重写默认的 defaults。

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

树的数据格式（Tree Data Format）
每个节点可以包括下列属性：

id：节点的 id，它对于加载远程数据很重要。 --对应id
text：要显示的节点文本。----对应name
state：节点状态，‘open’ 或 ‘closed’，默认是 ‘open’。当设置为 ‘closed’ 时，该节点有子节点，并且将从远程站点加载它们。
checked：指示节点是否被选中。
attributes：给一个节点添加的自定义属性。
children：定义了一些子节点的节点数组。
实例：我们需要这个结构的json

[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]
},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]
}]

###用法比较简单

树（tree）定义在

元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的
元素。下面演示了将被用于制作嵌套在 ul 元素内的树节点的元素。

ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li>
</ul>

树（Tree）也可以在一个空的

元素中定义，可使用 javascript 加载数据。

$('#tt').tree({ url:'tree_data.json' });

其中 url:‘tree_data.json’ 文档里是写死的获取的是本地的json文件我们可以写映射地址，获取数据库的信息

使用 loadFilter 来处理来自 ASP.NET web 服务的 json 数据。

$('#tt').tree({url: ...,loadFilter: function(data){if (data.d){return data.d;} else {return data;}}
});

data 就是从后台返回的数据

具体可以查看Easyui Tree树中文文档：http://www.jeasyui.net/plugins/185.html
数据库选用的是 tb_item_cat

CREATE TABLE `tb_item_cat` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目ID',`parent_id` bigint(20) DEFAULT NULL COMMENT '父类目ID=0时，代表的是一级的类目',`name` varchar(50) DEFAULT NULL COMMENT '类目名称',`status` int(1) DEFAULT '1' COMMENT '状态。可选值:1(正常),2(删除)',`sort_order` int(4) DEFAULT NULL COMMENT '排列序号，表示同级类目的展现次序，如数值相等则按名称次序排列。取值范围:大于零的整数',`is_parent` tinyint(1) DEFAULT '1' COMMENT '该类目是否为父类目，1为true，0为false',`created` datetime DEFAULT NULL COMMENT '创建时间',`updated` datetime DEFAULT NULL COMMENT '创建时间',PRIMARY KEY (`id`),KEY `parent_id` (`parent_id`,`status`) USING BTREE,KEY `sort_order` (`sort_order`)
) ENGINE=InnoDB AUTO_INCREMENT=1183 DEFAULT CHARSET=utf8 COMMENT='商品类目';

###流程

1.通过parent_id 查询分类的列表

在item-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px"><form id="itemAddForm" class="itemForm" method="post"><table cellpadding="5"><tr><td>商品类目:</td><td><a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a><input type="hidden" name="cid" style="width: 280px;"></input></td></tr><tr><td>商品标题:</td><td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td></tr><tr><td>商品卖点:</td><td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td></tr><tr><td>商品价格:</td><td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" /><input type="hidden" name="price"/></td></tr><tr><td>库存数量:</td><td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td></tr><tr><td>条形码:</td><td><input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" /></td></tr><tr><td>商品图片:</td><td><a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a><input type="hidden" name="image"/></td></tr><tr><td>商品描述:</td><td><textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea></td></tr><tr class="params hide"><td>商品规格:</td><td></td></tr></table><input type="hidden" name="itemParams"/></form><div style="padding:5px"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a></div>
</div>
<script type="text/javascript">var itemAddEditor ;//页面初始化完毕后执行此方法$(function(){//创建富文本编辑器itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");//初始化类目选择和图片上传器TAOTAO.init({fun:function(node){//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。//TAOTAO.changeItemParam(node, "itemAddForm");}});});//提交表单function submitForm(){//有效性验证if(!$('#itemAddForm').form('validate')){$.messager.alert('提示','表单还未填写完成!');return ;}//取商品价格，单位为“分”$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);//同步文本框中的商品描述itemAddEditor.sync();//取商品的规格/*var paramJson = [];$("#itemAddForm .params li").each(function(i,e){var trs = $(e).find("tr");var group = trs.eq(0).text();var ps = [];for(var i = 1;i<trs.length;i++){var tr = trs.eq(i);ps.push({"k" : $.trim(tr.find("td").eq(0).find("span").text()),"v" : $.trim(tr.find("input").val())});}paramJson.push({"group" : group,"params": ps});});//把json对象转换成字符串paramJson = JSON.stringify(paramJson);$("#itemAddForm [name=itemParams]").val(paramJson);*///ajax的post方式提交表单//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串$.post("/item/save",$("#itemAddForm").serialize(), function(data){if(data.status == 200){$.messager.alert('提示','新增商品成功!');}});}function clearForm(){$('#itemAddForm').form('reset');itemAddEditor.html('');}
</script>

在JS中工具类 common.js

Date.prototype.format = function(format){ var o =  { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond };if(/(y+)/.test(format)){ format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); }for(var k in o)  { if(new RegExp("("+ k +")").test(format)){ format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } } return format;
};var TT = TAOTAO = {// 编辑器参数kingEditorParams : {//指定上传文件参数名称filePostName  : "uploadFile",//指定上传文件请求的url。uploadJson : '/pic/upload',//上传类型，分别为image、flash、media、filedir : "image"},// 格式化时间formatDateTime : function(val,row){var now = new Date(val);return now.format("yyyy-MM-dd hh:mm:ss");},// 格式化连接formatUrl : function(val,row){if(val){return "<a href='"+val+"' target='_blank'>查看</a>";         }return "";},// 格式化价格formatPrice : function(val,row){return (val/1000).toFixed(2);},// 格式化商品的状态formatItemStatus : function formatStatus(val,row){if (val == 1){return '正常';} else if(val == 2){return '<span style="color:red;">下架</span>';} else {return '未知';}},init : function(data){// 初始化图片上传组件this.initPicUpload(data);// 初始化选择类目组件this.initItemCat(data);},// 初始化图片上传组件initPicUpload : function(data){$(".picFileUpload").each(function(i,e){var _ele = $(e);_ele.siblings("div.pics").remove();_ele.after('\<div class="pics">\<ul></ul>\</div>');// 回显图片if(data && data.pics){var imgs = data.pics.split(",");for(var i in imgs){if($.trim(imgs[i]).length > 0){_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");}}}//给“上传图片按钮”绑定click事件$(e).click(function(){var form = $(this).parentsUntil("form").parent("form");//打开图片上传窗口(实现多图片上传的功能multiimage)KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){var editor = this;editor.plugin.multiImageDialog({clickFn : function(urlList) {var imgArray = [];KindEditor.each(urlList, function(i, data) {imgArray.push(data.url);form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");});form.find("[name=image]").val(imgArray.join(","));editor.hideDialog();}});});});});},// 初始化选择类目组件initItemCat : function(data){$(".selectItemCat").each(function(i,e){var _ele = $(e);if(data && data.cid){_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");}else{_ele.after("<span style='margin-left:10px;'></span>");}_ele.unbind('click').click(function(){$("<div>").css({padding:"5px"}).html("<ul>").window({width:'500',height:"450",modal:true,closed:true,iconCls:'icon-save',title:'选择类目',onOpen : function(){var _win = this;$("ul",_win).tree({url:'/item/cat/list',animate:true,onClick : function(node){if($(this).tree("isLeaf",node.target)){// 填写到cid中_ele.parent().find("[name=cid]").val(node.id);_ele.next().text(node.text).attr("cid",node.id);$(_win).window('close');if(data && data.fun){data.fun.call(this,node);}}}});},onClose : function(){$(this).window("destroy");}}).window('open');});});},createEditor : function(select){return KindEditor.create(select, TT.kingEditorParams);},/*** 创建一个窗口，关闭窗口后销毁该窗口对象。<br/>* * 默认：<br/>* width : 80% <br/>* height : 80% <br/>* title : (空字符串) <br/>* * 参数：<br/>* width : <br/>* height : <br/>* title : <br/>* url : 必填参数 <br/>* onLoad : function 加载完窗口内容后执行<br/>* * */createWindow : function(params){$("<div>").css({padding:"5px"}).window({width : params.width?params.width:"80%",height : params.height?params.height:"80%",modal:true,title : params.title?params.title:" ",href : params.url,onClose : function(){$(this).window("destroy");},onLoad : function(){if(params.onLoad){params.onLoad.call(this);}}}).window("open");},closeCurrentWindow : function(){$(".panel-tool-close").click();},changeItemParam : function(node,formId){$.getJSON("/item/param/query/itemcatid/" + node.id,function(data){if(data.status == 200 && data.data){$("#"+formId+" .params").show();var paramData = JSON.parse(data.data.paramData);var html = "<ul>";for(var i in paramData){var pd = paramData[i];html+="<li><table>";html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";for(var j in pd.params){var ps = pd.params[j];html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";}html+="</li></table>";}html+= "</ul>";$("#"+formId+" .params td").eq(1).html(html);}else{$("#"+formId+" .params").hide();$("#"+formId+" .params td").eq(1).empty();}});},getSelectionsIds : function (select){var list = $(select);var sels = list.datagrid("getSelections");var ids = [];for(var i in sels){ids.push(sels[i].id);}ids = ids.join(",");return ids;},/*** 初始化单图片上传组件 <br/>* 选择器为：.onePicUpload <br/>* 上传完成后会设置input内容以及在input后面追加<img> */initOnePicUpload : function(){$(".onePicUpload").click(function(){var _self = $(this);KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {this.plugin.imageDialog({showRemote : false,clickFn : function(url, title, width, height, border, align) {var input = _self.siblings("input");input.parent().find("img").remove();input.val(url);input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");this.hideDialog();}});});});}
};

其中

// 初始化选择类目组件initItemCat : function(data){$(".selectItemCat").each(function(i,e){var _ele = $(e);if(data && data.cid){_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");}else{_ele.after("<span style='margin-left:10px;'></span>");}_ele.unbind('click').click(function(){$("<div>").css({padding:"5px"}).html("<ul>").window({width:'500',height:"450",modal:true,closed:true,iconCls:'icon-save',title:'选择类目',onOpen : function(){var _win = this;$("ul",_win).tree({url:'/item/cat/list',animate:true,onClick : function(node){if($(this).tree("isLeaf",node.target)){// 填写到cid中_ele.parent().find("[name=cid]").val(node.id);_ele.next().text(node.text).attr("cid",node.id);$(_win).window('close');if(data && data.fun){data.fun.call(this,node);}}}});},onClose : function(){$(this).window("destroy");}}).window('open');});});},createEditor : function(select){return KindEditor.create(select, TT.kingEditorParams);},

这个部分用到的异步的ajax 我们做的目的是点击后弹出的窗口跟后台数据库获取数据

有url 的映射地址我们就可以写controller

在数据库里写一下sql语句查询 parent_id =1 的类目

对应com.foreknow.mapper包下 TbItemMapper.xml 的实现类 sql 写法

<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >select <include refid="Base_Column_List" />from tb_item_catwhere id = #{id,jdbcType=BIGINT}
</select>

json 为了转格式在foreknow-common 下 com.foreknow.common.pojo包
创建 EUTreeNdode.java

package com.foreknow.common.pojo;
/**
树的数据格式（Tree Data Format）
每个节点可以包括下列属性：id：节点的 id，它对于加载远程数据很重要。
text：要显示的节点文本。
state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。* @author Administrator**/
public class EUTreeNdode {private  long id;private String text;private String state;public long getId() {return id;}public void setId(long id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getState() {return state;}public void setState(String state) {this.state = state;}}

###然后写业务层 service ItemCatService.java

package com.foreknow.service;import java.util.List;import com.foreknow.common.pojo.EUTreeNdode;public interface ItemCatService {
/*** 根据patentId查询分类* * @param patentId* @return*/public  List<EUTreeNdode> getCatList(long patentId);
}

返回值是EUTreeNdode.java 对应的Json 属性

我根据id 查出来的是多条数据，而且我们的json 格式里没有List集合所以跟之前的分页查询 rows 和total 不一样我们这次返回值是 List

然后写实现类ItemCatServiceImpl.java


package com.foreknow.service.impl;
/*** 树形*/
import java.util.ArrayList;
import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.foreknow.common.pojo.EUTreeNdode;
import com.foreknow.mapper.TbItemCatMapper;
import com.foreknow.pojo.TbItemCat;
import com.foreknow.pojo.TbItemCatExample;
import com.foreknow.pojo.TbItemCatExample.Criteria;
import com.foreknow.service.ItemCatService;
@Service
public class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate TbItemCatMapper tbItemCatMapper;@Overridepublic List<EUTreeNdode> getCatList(long parentId) {TbItemCatExample example = new TbItemCatExample();
//      Criteria  根据条件查询   封装好的方法 parent_idCriteria criteria = example.createCriteria();criteria.andParentIdEqualTo(parentId);List<TbItemCat> list = tbItemCatMapper.selectByExample(example);//我们返回的是list  创建一个listList<EUTreeNdode> resultList = new ArrayList<>();//对原有的 list  进行便利   没便利一次  就拿到一个TbItemCat catfor (TbItemCat cat : list) {EUTreeNdode node = new EUTreeNdode();//要把list里赋值   保存到resultList 里node.setId(cat.getId());node.setText(cat.getName());//三元运算符？  两种状态node.setState(cat.getIsParent()?"closed":"open");resultList.add(node);}return resultList;}}

方法在com.foreknow.pojo 用自动生成工具生成的

TbItemCat.java 和TbItemCatExample.java 条件

其中TbItemCatExample.java 中
我们给的条件不是id 是 parent_id

TbItemCat.java中 private Boolean isParent; 属性能获取到parent boolen类型

最后写ItemCatController.java 映射地址对应 comment.js 后台的取json的

package com.foreknow.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import com.foreknow.common.pojo.EUTreeNdode;
import com.foreknow.service.ItemCatService;@Controller
@RequestMapping("/item/cat")
public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping("/list")@ResponseBody//restful  判断一下  如果要是没拿到的话  我们加一个默认值  是0  public List<EUTreeNdode> getCatList(@RequestParam(value="id",defaultValue="0") long parentId) {List<EUTreeNdode> list = itemCatService.getCatList(parentId);return list;}}

###最后更新一下工程
输入http://localhost:8088/index

数据库树形结构，EasyUI Tree 树相关推荐

php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
012-数据结构-树形结构-哈希树[hashtree]、字典树[trietree]、后缀树
一.哈希树概述 1.1..其他树背景二叉排序树,平衡二叉树,红黑树等二叉排序树.在大数据量时树高很深,我们不断向下找寻值时会比较很多次.二叉排序树自身是有顺序结构的,每个结点除最小结点和最大结点外都 ...
数据库树形结构存储方法的选择
树形结构存储方法的选择简单的方法跟踪多级回复构成的树形分支:parent_id 一开始的思路使用parent_id跟踪分支使用先找出所有节点,按照一定顺序整合成树形结构缺陷: 在深度过深时仅用 ...
数据库树形结构、多级联动的表设计
问题:二级联动.多级联动等树形结构的数据,如何设计表格. 场景:省市县三级联动.商品的分类等. 参考:https://www.zhihu.com/question/20417447 最常用的一种方法是 ...
easyui(tree树)
首先老样子先看思维导图: 所以我们分三个来讲: 一.tree控件的使用:当我们使用的tree控件的时候先要导入一个tree_data1.json的json文件然后在引用即可代码如下:(注意路径) / ...
为什么MySQL索引要使用 B+树，而不是其它树形结构？
一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万为什么是这么多呢? 因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. ...
树形结构tree工具类
说明:下面用到了lombox插件,和hutool工具包,这两个自行百度 TreeBean.class 用来封装树形结构的实体类 import lombok.AllArgsConstructor; i ...
elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下. 由于业务需要,要求实现树形菜单, ...
计算机结构中的树状结构,树形结构和图状结构是四种基本的逻辑结构.ppt
内容提要第章绪论什么是数据结构基本概念和术语算法描述算法的重要特性算法的描述方法算法分析算法设计的要求算法时间效率的度量分析小结习题第章绪论什么是数据结构自计算机诞生以来其应用的发展远远超出了人们对它 ...

数据库树形结构，EasyUI Tree 树

数据库树形结构，EasyUI Tree 树相关推荐

最新文章

热门文章