easyui-tree数据读取与保存
easyui版本：
jQuery EasyUI 1.4.3
工具：eclipse+mysql
注：代码有删除，因为是公司项目，主要是easyui-tree的获取及保存
表结构为：商品类型表(shop_type)---》商品表(shop)---》商品规格表(shop_standard),商品表存在商品类型id,商品规格表存在商品id
step1--定义一个保存json格式的实体:
package com.ruiyun.byloic.entity.distribution; import java.util.*; /** * Created by thinkpad98 on 2017/7/12. */ public class TreeNode { private String id; //节点的id值 private String text; //节点显示的名称 private String state; //节点的状态 // 请在整个树转换成jsonString时,将字符串Checked换成checked，否则easyui不认 private String iconCls;//图标 private String getIconCls() { return iconCls; } private void setIconCls(String iconCls) { this.iconCls = iconCls; } private boolean checked ; //注意：转成JsonTreeString时，将"Checked"替换成"checked",否则选中效果出不来的 private Listchildren; //集合属性，可以保存子节点 public String getId() { return id; } public void setId(String 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; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public List getChildren() { return children; } public void setChildren(List children) { this.children = children; } public TreeNode(String id, String text, String state,boolean checked, List children) { this.id = id; this.text = text; this.state = state; this.iconCls = "icon-blank"; this.checked = checked; this.children = children; } public TreeNode() { this.id = null; this.text = null; this.state = null; this.checked = false; this.children = null; this.iconCls=null; } }
step2----查询数据遍历存入TreeNode实体：
/** * s树形菜单查询 * * @return * @throws Exception */ public ListqueryTreeNode(String distribution_type_id) throws Exception { //商品类型 StringBuffer sql = new StringBuffer("SELECT t.* FROM shop_type"); List shopType = new SimpleDbRunner().findBeanList(ShopType.class, sql.toString()); //商品 sql = new StringBuffer("SELECT i.* FROM shop_info i"); List shop = new SimpleDbRunner().findBeanList(Shop.class, sql.toString()); //查看/编辑跳转查询的商品规格 sql = new StringBuffer("SELECT * from shop_standard ");
ListshopStandard = new SimpleDbRunner().findBeanList(ShopStandard.class, sql.toString()); String val=""; //商品类型list List stShopType= new ArrayList (); for(ShopType st : shopType) { //商品list List stChilds = new ArrayList (); for (Shop s : shop) { //商品规格list List sChilds = new ArrayList (); //商品类型与商品表里商品类型相同 if (st.getId().equals(s.getShop_type_id())) { stChilds.add(new TreeNode(s.getId(),s.getShop_name(),"open",false,sChilds)); } //循环商品规格 for (ShopStandard ss : shopStandard) { //如果商品与商品规格表里商品id相同 if (s.getId().equals(ss.getShop_info_id())) {
//将父级id绑定在规格id上 sChilds.add(new TreeNode("child-"+st.getId()+"-"+s.getId()+"-"+ss.getId(),ss.getShop_standard_name(),"open",false,null)); } } } //商品类型节点 stShopType.add(new TreeNode(st.getId(),st.getType_name(),"open",false,stChilds)); } Listtree=new ArrayList (); tree.add(new TreeNode("0","所有商品","open",false,stShopType)); return tree; }
step3---返回object格式数据给前端：
/** * 查询所有商品 * @return */ @Action(PATH + "/queryShop") public String queryShop() { try { object = DistriService.getInstance().queryTreeNode(_id); } catch (Exception e) { logger.error(e.getMessage()); } return OBJECT; }
step4----前端显示(注意要导入相关js)：
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyui-treetitle>
<#include "/WEB-INF/comm/module-index.ftl">
head>
<body class="easyui-layout layout panel-noscroll">
<div class="panel layout-panel layout-panel-center" style="width: 1322px; left: 0px; top: 0px;">
<div data-options="border:false" region="center">
<form id="myform" method="post" class="form" action="">
<table>
<tr>
<td colspan="2">
<ul class="treelist">
<div>
<div style="float: left;width: 70px;"><label style="font-size: 14px;">关联商品:label>div>
div><br>
<li>
<ul class="easyui-tree" id="tt" style="margin: 4px 80px;" data-options="url:'queryShop',method:'post',animate:true,checkbox:true">ul>
li>
ul>
td>
tr>
table>
form>
div>
div>
<script type="text/javascript">
//这里是在easyui-tree请求前设置参数
$('#tt').tree({
onBeforeLoad: function (node, param) {
param._id= $("#distribution_type_id").val()
}
});
//保存数据
function save() {
//获取树形菜单id,我要取的是规格id以及它的上级和上上级id,因为在显示的时候就直接加了child来区分是否是规格id,并且在规格id上绑定了他的父级id,
//所以这边直接获取规格id拼接就可以了，我的业务需求是每一个规格id存一条数据，这边传字符串过去，后台接收拆分了就可以保存啦
var nodes = $('#tt').tree('getChecked');
var ids = new Array();
var id;
for(var i=0;i<nodes.length;i++){
id=nodes[i].id;
if(id.indexOf("child-")>-1) {
ids.push(id.substring(6,id.length));
}
}
if(ids.length<=0){
top.showMsg("请选择至少一个商品规格!");
return false;
}
$.ajax({
url:"save",//请求的url地址
dataType:"json",//返回的格式为json
async:true,//请求是否异步，默认true异步，这是ajax的特性
data:{ids:ids.join(",")},//参数值
type:"post",//请求的方式
success:function(data){
if (data.STATE) {
top.showMsg(data.MSG);
} else {
top.showMsg(data.MSG);
}
},//请求成功的处理
error:function(){
alert("请求异常!");
console.error();
}//请求出错的处理
}); }
script>
body>
html>
step5---保存就只有页面获取id的js,跳转到后台保存的代码就不贴啦，绑定id的方法比较粗暴，将就看~~~easyui-tree我真的是头疼。。。