easyui-tree数据读取与保存

来源：互联网发布：电脑编程c语言的软件编辑：程序博客网时间：2024/06/04 23:27

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我真的是头疼。。。

阅读全文

0 0