隨筆-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 閱讀(1143) 評論(0)  編輯  收藏

只有注冊用戶登錄后才能發表評論。


網站導航:
 
{ganrao} 金算盘准确一头一尾 pk10官方网站 白小姐图片+一肖中特 麻将必胜技巧大全 516棋牌游戏中心? 正规挣钱最快的app 西甲赛程是怎么安排的 重庆麻将怎么打初学规则 上海选四历史开奖号 网络正规捕鱼赢钱游戏 熊猫四川麻将血战到 喜乐彩票怎么玩 捕鱼王者稳赢版 宝博棋牌最新版下载 浙江快乐彩规则 篮球直播360