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

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


          網站導航:
           
          主站蜘蛛池模板: 安庆市| 永新县| 保山市| 乌拉特前旗| 耒阳市| 马边| 马尔康县| 乌兰察布市| 台北市| 漯河市| 湾仔区| 巴彦县| 潜山县| 平湖市| 恩平市| 汉源县| 沙洋县| 沂南县| 建始县| 封丘县| 柘城县| 绍兴市| 达拉特旗| 大同市| 扎鲁特旗| 辽宁省| 怀宁县| 镇巴县| 苏州市| 大荔县| 漳浦县| 铜川市| 射阳县| 万山特区| 余姚市| 大理市| 石林| 满城县| 日照市| 公安县| 周宁县|