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 List<TreeNode> children;  //集合属性，可以保存子节点

    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<TreeNode> getChildren() {
        return children;
    }

    public void setChildren(List<TreeNode> children) {
        this.children = children;
    }

    public TreeNode(String id, String text, String state,boolean checked, List<TreeNode> 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 List<TreeNode> queryTreeNode(String distribution_type_id) throws Exception {
    //商品类型
    StringBuffer sql = new StringBuffer("SELECT t.* FROM shop_type");
    List<ShopType> shopType =  new SimpleDbRunner().findBeanList(ShopType.class, sql.toString());

    //商品
    sql = new StringBuffer("SELECT i.* FROM shop_info i");
    List<Shop> shop =  new SimpleDbRunner().findBeanList(Shop.class, sql.toString());

    //查看/编辑跳转查询的商品规格
    sql = new StringBuffer("SELECT * from shop_standard ");
    List<ShopStandard> shopStandard =  new SimpleDbRunner().findBeanList(ShopStandard.class, sql.toString());


    String val="";
   //商品类型list
    List<TreeNode> stShopType= new ArrayList<TreeNode>();
    for(ShopType st : shopType) {
        //商品list
        List<TreeNode> stChilds = new ArrayList<TreeNode>();

        for (Shop s : shop) {
            //商品规格list
            List<TreeNode> sChilds = new ArrayList<TreeNode>();
            //商品类型与商品表里商品类型相同
            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));
    }

    List<TreeNode> tree=new ArrayList<TreeNode>();
    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)：

<!DOCTYPE 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-tree</title>
    <#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>
				<!--通过url请求后台数据，easyui-tree的数据格式要特别注意-->
                                <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我真的是头疼。。。