• 九江市委书记林彬杨主持召开市委常委会议 对市县机构改革提了这些要求 2019-04-10
  • 2018款奔驰E级购车指南 中低配是主力 2019-04-07
  • 264路胡乱发车,投诉一月依然如故。 2019-04-07
  • 张太雷烈士大学毕业证书回到故乡常州 2019-04-06
  • 日照市今年计划投资158亿 修建幸福公路助发展 2019-04-06
  • 吴青峰新歌口碑持续攀升 获赞“这很吴青峰”青峰 新歌 2019-04-03
  • 《国家人文历史》2018年第4期封面及目录 2019-04-03
  • 统计局:5月份经济运行主要指标呈现五大特点 2019-03-27
  • 罗品禧的专栏作者中国国家地理网 2019-03-27
  • 习近平同上海合作组织成员国领导人共同会见记者并讲话 2019-03-27
  • 陈扬勇谈“党的领导是中国特色社会主义最本质的特征” 2019-03-20
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-03-20
  • 发挥自身优势 奋力走在前列——习近平总书记在山东考察回访记 2019-03-19
  • 明年起全面供应国六标准汽柴油 2019-03-19
  • 异类非人思维。如一尼安德特人从2万年前发出的声音。 2019-03-16
  • 随笔-126  评论-247  文章-5  trackbacks-0

    示例效果图


    示例源码

    这里以菜单为例,来展示 TreePanel 的使用。

    TreeExample

    package fan.tutorial.client.ui.tree;

    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.List;
    import com.extjs.gxt.ui.client.data.HttpProxy;
    import com.extjs.gxt.ui.client.data.JsonReader;
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.data.ModelType;
    import com.extjs.gxt.ui.client.store.TreeStore;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
    import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.http.client.RequestBuilder;
    import com.google.gwt.user.client.rpc.AsyncCallback;
    import fan.tutorial.client.commons.TreeNodeUtil;
    import fan.tutorial.client.model.ITreeNode;
    import fan.tutorial.client.model.TreeNode;
    import fan.tutorial.client.model.TreeNode.NodeType;
    import fan.tutorial.server.value.Constant;

    public class TreeExample extends ContentPanel {
        
        public TreeExample() {
            
            //设置面板标题
            setHeadingHtml("Tree Example");
            //设置面板宽度高度
            setSize(250, 400);
            //设置面板布局
            setLayout(new AccordionLayout());

            //创建ModelType
            ModelType modelType = new ModelType();
            //设置根名称(与json数据根名称要保持一致, 否则无法正确的解析数据)
            modelType.setRoot(Constant.RESULT);
            //添加需要使用到的字段域, 未被添加的字段域无法使用
            modelType.addField(ITreeNode.ID);
            modelType.addField(ITreeNode.TEXT);
            modelType.addField(ITreeNode.NODE_TYPE);
            modelType.addField(ITreeNode.PRIOR_LEVEL);
            modelType.addField(ITreeNode.PARENT_NODE_ID);

            //Spring MVC Controller 请求地址
            String url = GWT.getHostPageBaseURL() + "menu/treenodes.json";
            //构建RequestBuilder
            RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);
            //创建HttpProxy
            HttpProxy<List<ModelData>> proxy = new HttpProxy<List<ModelData>>(builder);
            //JsonReader
            JsonReader<List<ModelData>> reader = new JsonReader<List<ModelData>>(modelType);
            //加载数据
            proxy.load(reader, nullnew AsyncCallback<List<ModelData>>() {
                public void onSuccess(List<ModelData> result) {
                    //树节点
                    List<TreeNode> treeNodes = TreeNodeUtil.modelDatas2TreeNodes(result);
                    //面板类节点
                    List<TreeNode> panels = new ArrayList<TreeNode>();
                    //根类节点
                    List<TreeNode> roots = new ArrayList<TreeNode>();
                    //叶子类节点
                    List<TreeNode> leafs = new ArrayList<TreeNode>();
                    for(TreeNode node : treeNodes){
                        if(node.getNodeType().ordinal() == NodeType.PANEL.ordinal()){
                            panels.add(node);
                        }else if(node.getNodeType().ordinal() == NodeType.ROOT.ordinal()){
                            roots.add(node);
                        }else{
                            leafs.add(node);
                        }
                    }
                    //排序面板类节点
                    Collections.sort(panels);
                    //渲染树节点
                    onRender(panels, roots, leafs);
                    //渲染完成之后重新渲染面板内容
                    layout(true);
                }
                public void onFailure(Throwable caught) {
                    
                }
            });
        }

        //渲染树节点
        private void onRender(List<TreeNode> panels, List<TreeNode> roots, List<TreeNode> leafs){
            for(TreeNode panelNode : panels){
                //面板类节点面板
                ContentPanel panel = new ContentPanel();
                //设置面板类节点标题
                panel.setHeadingHtml(panelNode.getText());
                TreeStore<ModelData> store = new TreeStore<ModelData>();
                TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
                //树结构内容显示文本
                tree.setDisplayProperty(ITreeNode.TEXT);
                //面板类节点的孩子节点(根类节点)
                List<TreeNode> panelNodeChildren = hasChildrenNode(panelNode, roots);
                if(panelNodeChildren.size() > 0){
                    //迭代根类节点
                    for(TreeNode root : panelNodeChildren){
                        //根类节点的孩子节点(叶子节点)
                        List<TreeNode> rootNodeChildren = hasChildrenNode(root, leafs);
                        ModelData modelData = TreeNodeUtil.treeNode2ModelData(root);
                        if(rootNodeChildren.size() > 0){
                            //添加根类节点
                            store.add(modelData, true);
                            //迭代叶子节点
                            for(TreeNode leaf : rootNodeChildren){
                                ModelData m = TreeNodeUtil.treeNode2ModelData(leaf);
                                //添加叶子节点
                                store.add(modelData, m, false);
                            }
                        }else{
                            //添加根类节点
                            store.add(modelData, false);
                        }
                        //展开节点
                        tree.setExpanded(modelData, true);
                    }
                }
                //为面板节点添加树节点
                panel.add(tree);
                //添加面板节点到容器
                add(panel);
            }
        }
        
        //判断节点是否拥有孩子节点
        private List<TreeNode> hasChildrenNode(TreeNode node, List<TreeNode> nodes){
            List<TreeNode> children = new ArrayList<TreeNode>();
            if(nodes.size() > 0){
                for(TreeNode n : nodes){
                    if(n.getParentNodeId() == node.getId()){
                        children.add(n);
                    }
                }
            }
            if(children.size() > 0){
                //排序孩子节点
                Collections.sort(children);
            }
            return children;
        }
    }
    这里需要注意的是,取树节点数据这个过程是在异步回调方法里面完成的。在这期间内,页面上的 ContentPanel 是已经被渲染出来了的,但这个 ContentPanel 里面的内容是空的,什么都还没有,因为这时候异步回调方法还没有执行完成,自然是没有数据。在异步回调方法的最后不要忘记去调一下 layout(true),来重新渲染一次 ContentPanel,否则面板内容是空的。

    TreeNodeController

    package fan.tutorial.server.controller;

    import javax.annotation.Resource;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import fan.tutorial.server.commons.JsonUtil;
    import fan.tutorial.server.service.DataService;
    import fan.tutorial.server.value.Constant;

    @Controller
    @RequestMapping("/menu")
    public class TreeNodeController {

        @Resource
        private DataService service;
        
        @RequestMapping("/treenodes")
        public String findTreeNodes(Model model){
            model.addAttribute(Constant.RESULT, JsonUtil.toJson(Constant.RESULT, service.findTreeNodes()));
            return Constant.RESULT_CODE;
        }
    }

    DataService

    package fan.tutorial.server.service;

    import java.util.List;
    import javax.annotation.Resource;
    import org.springframework.stereotype.Service;
    import fan.tutorial.client.model.TreeNode;
    import fan.tutorial.server.value.Data;

    @Service
    public class DataService {
        
        @Resource
        private Data data;
        
        public List<TreeNode> findTreeNodes(){
            return data.getTreeNodes();
        }
    }

    Data

    package fan.tutorial.server.value;

    import java.util.ArrayList;
    import java.util.List;
    import org.springframework.stereotype.Component;
    import fan.tutorial.client.model.TreeNode;
    import fan.tutorial.client.model.TreeNode.NodeType;

    @Component
    public class Data {

        private List<TreeNode> treeNodes;
        
        private List<TreeNode> buildTreeNodes(){
            List<TreeNode> treeNodes = new ArrayList<TreeNode>();
            TreeNode usersManagementNode = new TreeNode("用户管理", NodeType.PANEL, 0);
            TreeNode goodsManagementNode = new TreeNode("商品管理", NodeType.PANEL, 1);
            TreeNode orderManagementNode = new TreeNode("订单管理", NodeType.PANEL, 2);
            treeNodes.add(usersManagementNode);
            treeNodes.add(goodsManagementNode);
            treeNodes.add(orderManagementNode);
            treeNodes.add(new TreeNode("系统用户管理", NodeType.ROOT, 0, usersManagementNode.getId()));
            treeNodes.add(new TreeNode("会员账号管理", NodeType.ROOT, 1, usersManagementNode.getId()));
            treeNodes.add(new TreeNode("在售商品", NodeType.ROOT, 2, goodsManagementNode.getId()));
            treeNodes.add(new TreeNode("下架商品", NodeType.ROOT, 3, goodsManagementNode.getId()));
            treeNodes.add(new TreeNode("缺货通知", NodeType.ROOT, 4, goodsManagementNode.getId()));
            treeNodes.add(new TreeNode("到货通知", NodeType.ROOT, 5, goodsManagementNode.getId()));
            treeNodes.add(new TreeNode("未确认订单", NodeType.ROOT, 6, orderManagementNode.getId()));
            treeNodes.add(new TreeNode("待发货订单", NodeType.ROOT, 7, orderManagementNode.getId()));
            treeNodes.add(new TreeNode("已发货订单", NodeType.ROOT, 8, orderManagementNode.getId()));
            treeNodes.add(new TreeNode("未付款订单", NodeType.ROOT, 9, orderManagementNode.getId()));
            treeNodes.add(new TreeNode("已完成订单", NodeType.ROOT, 10, orderManagementNode.getId()));
            this.treeNodes = treeNodes;
            return treeNodes;
        }

        public List<TreeNode> getTreeNodes() {
            return treeNodes == null ? buildTreeNodes() : treeNodes;
        }
    }

    TreeNodeUtil

    package fan.tutorial.client.commons;

    import java.util.ArrayList;
    import java.util.List;
    import com.extjs.gxt.ui.client.data.BaseModelData;
    import com.extjs.gxt.ui.client.data.ModelData;
    import fan.tutorial.client.model.ITreeNode;
    import fan.tutorial.client.model.TreeNode;
    import fan.tutorial.client.model.TreeNode.NodeType;

    public class TreeNodeUtil {

        private TreeNodeUtil(){
            
        }
        
        public static TreeNode modelData2TreeNode(ModelData modelData){
            TreeNode node = new TreeNode();
            Double id = modelData.get(ITreeNode.ID);
            String text = modelData.get(ITreeNode.TEXT);
            Double priorLevel = modelData.get(ITreeNode.PRIOR_LEVEL);
            Double parentNodeId = modelData.get(ITreeNode.PARENT_NODE_ID);
            String type = modelData.get(ITreeNode.NODE_TYPE);
            NodeType nodeType = NodeType.valueOfString(type);
            node.setId(id.intValue());
            node.setText(text);
            node.setNodeType(nodeType);
            node.setPriorLevel(priorLevel.intValue());
            node.setParentNodeId(parentNodeId.intValue());
            return node;
        }
        
        public static List<TreeNode> modelDatas2TreeNodes(List<ModelData> modelDatas){
            List<TreeNode> treeNodes = new ArrayList<TreeNode>();
            for(ModelData modelData : modelDatas){
                treeNodes.add(modelData2TreeNode(modelData));
            }
            return treeNodes;
        }
        
        public static ModelData treeNode2ModelData(TreeNode treeNode){
            ModelData modelData = new BaseModelData();
            modelData.set(ITreeNode.ID, treeNode.getId());
            modelData.set(ITreeNode.TEXT, treeNode.getText());
            modelData.set(ITreeNode.PRIOR_LEVEL, treeNode.getPriorLevel());
            modelData.set(ITreeNode.PARENT_NODE_ID, treeNode.getParentNodeId());
            modelData.set(ITreeNode.NODE_TYPE, treeNode.getNodeType().getValue());
            return modelData;
        }
        
        public static List<ModelData> treeNodes2ModelDatas(List<TreeNode> treeNodes){
            List<ModelData> modelDatas = new ArrayList<ModelData>();
            for(TreeNode treeNode : treeNodes){
                modelDatas.add(treeNode2ModelData(treeNode));
            }
            return modelDatas;
        }
    }

    TreeNode

    package fan.tutorial.client.model;

    public class TreeNode implements Comparable<TreeNode> {

        private int id;
        private static int count;
        private String text;
        private NodeType nodeType;
        private int priorLevel;
        private int parentNodeId;
        private static final int NULL = -1;
        
        public TreeNode(){
            this.id = ++count;
        }
        
        public TreeNode(String text, NodeType nodetype, int priorLevel){
            this(text, nodetype, priorLevel, NULL);
        }
        
        public TreeNode(String text, NodeType nodetype, int priorLevel, int parentNodeId){
            this();
            this.text = text;
            this.nodeType = nodetype;
            this.priorLevel = priorLevel;
            this.parentNodeId = parentNodeId;
        }
        
        public enum NodeType {
            
            ROOT("ROOT"), LEAF("LEAF"), PANEL("PANEL");
            
            private final String value;
            
            private NodeType(String value){
                this.value = value;
            }

            public String getValue() {
                return value;
            }
            
            public static NodeType valueOfString(String value){
                if(value.equals("ROOT")){
                    return ROOT;
                }else if(value.equals("LEAF")){
                    return LEAF;
                }else if(value.equals("PANEL")){
                    return PANEL;
                }
                return null;
            }

            @Override
            public String toString() {
                return value;
            }
        }

        @Override
        public int compareTo(TreeNode o) {
            return this.priorLevel > o.priorLevel ? 1 : -1;
        }

        public String getText() {
            return text;
        }

        public void setText(String text) {
            this.text = text;
        }

        public NodeType getNodeType() {
            return nodeType;
        }

        public void setNodeType(NodeType nodeType) {
            this.nodeType = nodeType;
        }

        public int getPriorLevel() {
            return priorLevel;
        }

        public void setPriorLevel(int priorLevel) {
            this.priorLevel = priorLevel;
        }

        public int getParentNodeId() {
            return parentNodeId;
        }

        public void setParentNodeId(int parentNodeId) {
            this.parentNodeId = parentNodeId;
        }

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }
    }

    ITreeNode

    package fan.tutorial.client.model;

    public interface ITreeNode {

        String ID = "id";
        String TEXT = "text";
        String NODE_TYPE = "nodeType";
        String PRIOR_LEVEL = "priorLevel";
        String PARENT_NODE_ID = "parentNodeId";
    }





      
    posted on 2014-06-10 23:41 fancydeepin 阅读(1086) 评论(0)  编辑  收藏

    只有注册用户登录后才能发表评论。


    网站导航:
     
  • 九江市委书记林彬杨主持召开市委常委会议 对市县机构改革提了这些要求 2019-04-10
  • 2018款奔驰E级购车指南 中低配是主力 2019-04-07
  • 264路胡乱发车,投诉一月依然如故。 2019-04-07
  • 张太雷烈士大学毕业证书回到故乡常州 2019-04-06
  • 日照市今年计划投资158亿 修建幸福公路助发展 2019-04-06
  • 吴青峰新歌口碑持续攀升 获赞“这很吴青峰”青峰 新歌 2019-04-03
  • 《国家人文历史》2018年第4期封面及目录 2019-04-03
  • 统计局:5月份经济运行主要指标呈现五大特点 2019-03-27
  • 罗品禧的专栏作者中国国家地理网 2019-03-27
  • 习近平同上海合作组织成员国领导人共同会见记者并讲话 2019-03-27
  • 陈扬勇谈“党的领导是中国特色社会主义最本质的特征” 2019-03-20
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-03-20
  • 发挥自身优势 奋力走在前列——习近平总书记在山东考察回访记 2019-03-19
  • 明年起全面供应国六标准汽柴油 2019-03-19
  • 异类非人思维。如一尼安德特人从2万年前发出的声音。 2019-03-16
  • 博彩一族 足彩竞猜网 Cab组合公式 山东福彩群英会走势图 赌场风云粤语 喜乐彩2018085 时时彩规律口诀 福建体彩31选7开奖结果 山东时时彩怎么中奖号码的真实规律 时时彩缩水软件免费版 1足球比分推荐 广东十一选5走势图爱彩乐 决战21點在线播放免费 重庆欢乐生肖走势图乐彩网 竞彩篮球大小分技 七星彩18082