easyUI树

其实我之前写过一篇类似的文章，那骗文章是jQuery bootgrid，他也是后台按前台的规则传值到前台，这样就可以显示出来，easyUI的tree也是同样的道理，下面就来看看具体步骤。

1. 先看easyUI tree的数据格式

[{
    "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#"
    }]
}]

这段代码是官网给的数据格式，所以我们需要在后台传json数据，而且需要新建一个实体类，来写上text，state这些东西，下面来看具体写法。
2. 后台给前台返值

        @RequestMapping("/queryBrand")
        public @ResponseBody List<TreeMenu> queryBrand(HttpServletRequest request){
            List<TreeMenu> treeList=new ArrayList<TreeMenu>();
            List<SysBrandType> typeList = brandService.queryTypeList();
            for(int i=0;i<typeList.size();i++){
                SysBrandType brand=typeList.get(i);
                int brandId=brand.getBrandId();
                String brandName=brand.getBrandName();
                TreeMenu treeMenu=new TreeMenu();
                treeMenu.setId(brandId);
                treeMenu.setText(brandName);
                treeList.add(treeMenu);
            }
            List<TreeMenu> list=new ArrayList<TreeMenu>();
            TreeMenu tree=new TreeMenu();
            tree.setId(0);
            tree.setText("全选");
            tree.setChildren(treeList);
            list.add(tree);
            return list;
        }

注：TreeMenu是我新建的实体类，里边放着前台所需字段，text就是所需显示的名字，所以我放了品牌名，children是一个集合，所以我把list放了进去，其余的就不多说了，想必大家都明白，下面来看一下前台写法。
3. 前台写法

//保存信息，将tree的id等值拼接好传值到后台
    var _parentNodeId = '';

    function add(){
        var nodes = $('#treeMenus').tree('getChecked');
        var nodeStore=$('#treeStore').tree('getChecked');
        var _param = '';
        for (var i = 0; i < nodes.length; i++) {
            _param = getParentNode(_param,nodes[i]);
            if (_param != '')
                _param += ',';
            _param += nodes[i].id;
        }
        var param_ = '';
        for (var i = 0; i < nodeStore.length; i++) {
            param_ = getParentNode(param_,nodeStore[i]);
            if (param_ != '')
                param_ += ',';
            param_ += nodeStore[i].id;
        }
        $('#addDepotForm').form('submit', {
            url:"<%=request.getContextPath()%>/coupon/addCoupon",
            onSubmit: function(param){    
                param.bId = _param; 
                param.storeId=param_;
               /*  param.p2 = 'value2';     */
            },   
            success:function(res){
                if(res=='success'){
                    $.messager.alert('提示','添加成功！','info',function(){
                        goback();
                    });
                }else{
                    $.messager.alert('提示','添加失败！');
                }
            }
        });
    }

    function getParentNode(param_,node){
        var pnode = $('#treeMenus').tree('getParent',node.target);
        if(pnode!=null){
            if(!pnode.checked &&(_parentNodeId!=pnode.id)){
                if (param_ != '')
                    param_ += ',';
                param_+=pnode.id;
                param_=getParentNode(param_,pnode);
                _parentNodeId=pnode.id;
            }
        }
        return param_;
    }

效果图

先这样，我有点事儿，如果有不懂得地方，欢迎大家给我留言。

补：

    $(function() {
        $('#treeMenus').tree({ 
            checkbox:true,
            url:'<%=request.getContextPath()%>/coupon/queryBrand',
            animate : true,
            lines : true

        });
        $('#treeStore').tree({ 
            checkbox:true,
            url:'<%=request.getContextPath()%>/coupon/queryStore',
            animate : true,
            lines : true

        });
    });

注：补得这段代码意思是 调用easyUI的tree，然后访问后台接口；checkbox为true，表示在每个节点前都显示复选框；url就是后台接口地址；animate为true，表示节点在展开或折叠的时候显示动画效果，默认值为false；lines定义是否显示树控件上的虚线，默认是false；基本就这么多，如果想显示其他效果，可以具体填写。
然后上边那段代码是树显示出来以后，在前台拼接好这些id值，并按逗号分隔，传值到后台，后台保存即可，保存到数据库的格式就是 1，2，3，4。提交form表单这块其实和ajax类似，onsubmit我是用来提交上边的两个额外参数，所以用了这个属性，如果没有额外参数，就不需要写这个属性，灵活掌握。其余的大家应该就都能看懂了，如果有任何问题，欢迎大家给我踊跃留言，谢谢大家的支持。