TreePanel 、TabPanel及GridPanel之间联动

最新推荐文章于 2016-04-07 08:12:23 发布
最新推荐文章于 2016-04-07 08:12:23 发布
阅读量803 收藏
点赞数
分类专栏： JavaScript 文章标签： string function search server button border

在之前已讲述TreePanel与GridPanel之间的联动，如果GridPanel在不同的标签中，又如何定位到标签中的GridPanel的某一行呢，这是本篇需要讲述的内容：以下做为一个例子：

   三个标签，分别为：TabClientJobs、TabCorporate、TabFreelance

代码

 

   
   

    
     <ext:TreePanel ID="ClientJobTree" runat="server" Icon="Note" Border="false"
                                AutoScroll="true">
                                <Listeners>
                                    <Click Handler="selectGridPanelbyNodeID(node.id,#{TabPanelClientJob});" />
                                </Listeners>
</ext:TreePanel>

脚本代码：

代码

 

   
   

    
     function selectGridPanelbyNodeID(id, tabPanel) {
//获取类型（即标签）
            var type = Coolite.AjaxMethods.GetType(id, { success: function(result) {
                switch (result) {
                    case "0":
                        {
//切换标签
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabClientJobs.ClientID %>"));
//获取GridPanel
                            var grid = Ext.getCmp("<%= GridPanelCustomer.ClientID %>");
//通过ID查找信息
                            var record = grid.store.getById(id);
//选中该行
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                    case "1":
                        {
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabCorporate.ClientID %>"));
                            var grid = Ext.getCmp("<%= GridPanelCorporate.ClientID %>");
                            var record = grid.store.getById(id);
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                    case "2":
                        {
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabFreelance.ClientID %>"));
                            var grid = Ext.getCmp("<%= GridPanelFreelance.ClientID %>");
                            var record = grid.store.getById(id);
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                }
            }
            });
        }

 

posted @ 2010-07-30 11:42 琴韵之弦 阅读(13) | 评论(0) |  编辑

     TreePanel的刷新，以下做为一个例子：

     当点击查询按钮时，TreePanel将重新刷新一次。

     前台代码：

代码

 

   
   

    
     <ext:Button ID="ButtonQuery" runat="server" Text="Search" meta:resourcekey="ButtonQueryResource"
                                                                                        StyleSpec="padding-left:105px;">
                                                                                        <Listeners>
                                                                                            <Click Handler="Search(#{ClientJobTree});" />
                                                                                        </Listeners>
                                                                                    </ext:Button>

 

  脚本代码：

代码

 

   
   

    
    function Search(tree) {
            Coolite.AjaxMethods.Query({
                success: function(result) {
                    var nodes = eval(result);
                    tree.root.ui.remove();
                    tree.initChildren(nodes);
                    tree.root.render();
                    tree.el.unmask();
                },
                failure: function(msg) {
                    tree.el.unmask();
                    Ext.Msg.alert('Failure', '未能加载数据');
                }
            });
        }

 

后台代码：

01/// <summary>
02      /// 绑定树
03      /// </summary>
04      public coolite.Ext.Web.TreeNodeCollection TreeBind()
05      {
06          coolite.Ext.Web.TreeNodeCollection nodes = new Coolite.Ext.Web.TreeNodeCollection();
07          string projectID = Request.QueryString["ProjectID"].ToString();
08          string name = TextFieldName.Text.ToString();
09          string clientGroup = ComboBoxClientGroup.SelectedItem.Text.ToString();
10          string services = ComboBoxClientService.SelectedItem.Text.ToString();
11          Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
12          //通过ProjectID找到Name
13          PROJ_ProjectBase projectBase = this.logic.GetProjectBaseByProjectID(projectID);
14          root.Text = projectBase.project_name;
15          ClientJobTree.Root.Add(root);
16          List<PROJ_ClientJob> rootList = this.logic.GetClientJob(projectID, name, services, clientGroup);
17          foreach (PROJ_ClientJob item in rootList)
18          {
19              string clientID = item.clientJob_id;
20              string clientName = item.job_name;
21              Coolite.Ext.Web.TreeNode supernode = new Coolite.Ext.Web.TreeNode();
22              supernode.NodeID = clientID;
23              supernode.Text = clientName;
24              supernode.Icon = Icon.Folder;
25              supernode.Expanded = true;
26              root.Nodes.Add(supernode);
27              this.NodeBind(clientID, supernode);
28          }
29 
30          return ClientJobTree.Root;
31      }
32 
33      /// <summary>
34      /// 树节点的绑定
35      /// </summary>
36      /// <param name="parentNodeID">父节点号</param>
37      /// <param name="parentcode">父节点</param>
38      public void NodeBind(string parentNodeID, Coolite.Ext.Web.TreeNode parentcode)
39      {
40          string projectID = Request.QueryString["ProjectID"].ToString();
41          List<PROJ_WBS> wbsList = this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);
42          foreach (PROJ_WBS item in wbsList)
43          {
44              Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
45              string wbsID = item.wbs_id;
46              node.NodeID = item.wbs_id;
47              node.Text = item.wbs_name;
48              node.Icon = Icon.Folder;
49              //node.Expanded = false;
50              parentcode.Nodes.Add(node);
51              this.NodeBind(wbsID, node);
52          }
53      }
54 
55 
56      /// <summary>
57      /// 查询事件
58      /// </summary>
59      [AjaxMethod]
60      public string Query()
61      {
62          Coolite.Ext.Web.TreeNodeCollection nodes = this.TreeBind();
63          return nodes.ToJson();
64      }
posted @ 2010-07-30 11:32 琴韵之弦 阅读(17) | 评论(0) |  编辑

     加载树有两种方法，一是通过js，二是直接在后台绑定。

     第一种方法：

1<ext:TreePanel ID="ClientJobTree" runat="SERVER" Icon="Note" Border="false"   AutoScroll="true">
2   <Listeners>
3     <Before Fn="LoadeNode" />
4   </Listeners>
5</ext:TreePanel>

脚本代码：

代码

 

   
   

    
            function LoadeNode(node) {
            Coolite.AjaxMethods.NodesBind(node.id, {
                success: function(result) {
                    var data = eval("(" + result + ")");
                    node.loadNodes(data);
                },

                failure: function(errorMsg) {
                    Ext.Msg.alert('Failure', errorMsg);
                }
            });
        }

后台代码：

加载一级和二级菜单

代码

 

   
   

    
            /// <summary>
        /// 绑定树
        /// </summary>
        public void TreeBind()
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            string Name = TextFieldName.Text.ToString();
            string clientGroup = ExtComboBoxParameterGroup.SelectedItem.Text.ToString();
            string services = ExtComboBoxParameterServices.SelectedItem.Text.ToString();
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            //通过ProjectID找到Name
            PROJ_ProjectBase projectBase = this.logic.GetProjectBaseByProjectID(projectID);
            root.Text = projectBase.project_name;
            ClientJobTree.Root.Add(root);
            List<PROJ_ClientJob> rootList = this.logic.GetClientJob(projectID, Name, services,clientGroup);
            foreach (PROJ_ClientJob item in rootList)
            {
                string clientID = item.clientJob_id;
                string clientName = item.job_name;
                AsyncTreeNode rootNode = new AsyncTreeNode();
                rootNode.NodeID = clientID;
                rootNode.Text = clientName;
                rootNode.Icon = Icon.Folder;
                rootNode.Expanded = true;
                root.Nodes.Add(rootNode);
            }
        }

绑定三级菜单

代码

 

   
   

    
            /// <summary>
        /// 树节点的绑定
        /// </summary>
        /// <param name="nodes">节点集合</param>
        /// <param name="parentNodeID">父节点号</param>
        public void NodeBind(Coolite.Ext.Web.TreeNodeCollection nodes, string parentNodeID)
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            List<PROJ_WBS> wbsList = this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);
            foreach (PROJ_WBS item in wbsList)
            {
                Coolite.Ext.Web.AsyncTreeNode treeNode = new Coolite.Ext.Web.AsyncTreeNode();
                treeNode.NodeID = item.wbs_id;
                treeNode.Text = item.wbs_name;
                treeNode.Icon = Icon.Folder;
                treeNode.Expanded = false;
                nodes.Add(treeNode);
            }
        }

        /// <summary>
        /// 绑定树节点
        /// </summary>
        /// <param name="nodeID"></param>
        /// <returns></returns>
        [AjaxMethod]
        public string NodesBind(string nodeID)
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = new Coolite.Ext.Web.TreeNodeCollection();
            this.NodeBind(nodes, nodeID);
            return nodes.ToJson();
        }

 

第二种方法：（直接在后台绑定，不需要<beforeLoad fn=”" />

代码

 

   
   

    
    /// <summary>
        /// 绑定树
        /// </summary>
        public Coolite.Ext.Web.TreeNodeCollection TreeBind()
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = new Coolite.Ext.Web.TreeNodeCollection();
            string projectID = Request.QueryString["ProjectID"].ToString();
            string name = TextFieldName.Text.ToString();
            string clientGroup = ComboBoxClientGroup.SelectedItem.Text.ToString();
            string services = ComboBoxClientService.SelectedItem.Text.ToString();
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            //通过ProjectID找到Name
            PROJ_ProjectBase projectBase = this.logic.GetProjectBaseByProjectID(projectID);
            root.Text = projectBase.project_name;
            ClientJobTree.Root.Add(root);
            List<PROJ_ClientJob> rootList = this.logic.GetClientJob(projectID, name, services, clientGroup);
            foreach (PROJ_ClientJob item in rootList)
            {
                string clientID = item.clientJob_id;
                string clientName = item.job_name;
                Coolite.Ext.Web.TreeNode supernode = new Coolite.Ext.Web.TreeNode();
                supernode.NodeID = clientID;
                supernode.Text = clientName;
                supernode.Icon = Icon.Folder;
                supernode.Expanded = true;
                root.Nodes.Add(supernode);
                this.NodeBind(clientID, supernode);
            }

            return ClientJobTree.Root;
        }

        /// <summary>
        /// 树节点的绑定
        /// </summary>
        /// <param name="parentNodeID">父节点号</param>
        /// <param name="parentcode">父节点</param>
        public void NodeBind(string parentNodeID, Coolite.Ext.Web.TreeNode parentcode)
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            List<PROJ_WBS> wbsList = this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);
            foreach (PROJ_WBS item in wbsList)
            {
                Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
                string wbsID = item.wbs_id;
                node.NodeID = item.wbs_id;
                node.Text = item.wbs_name;
                node.Icon = Icon.Folder;
                //node.Expanded = false;
                parentcode.Nodes.Add(node);
                this.NodeBind(wbsID, node);
            }
        }

sophiasy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
treegrid动态加载tree级联更新下拉列表动态计算数量乘以单价的和
04-18
treegrid动态加载tree级联更新下拉列表，保存让下拉列表显示名称，不是id，和动态计算数量乘以单价的和，和总合计，添加一列删除一列,撤回,保存的合计。
TabPanel的使用介绍
麦田守望者
03-24 674
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;使用EXT输出HelloWorld&lt;/TITLE&gt; &lt;!-- 导入extjs配置 … ... --&gt; &lt;link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all
完美解决动态二级下拉菜单联动问题
技术资料收集站
04-07 7115
现在是一个静态的演示来说明实现的原理：  var totalCount=12;  //定义数据总数，包括1级2级    //数据结构，是个数组的数组，可以使用开发语言动态产生  dataArray = new Array();  dataArray[0] = new Array("1100","1100","0");  //一级菜单表示为0  dataArray[1] =
Ext.net TreePanel的Checkbox操作及父子联动
08-29
在这个特定的场景中，我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 Checkbox在TreePanel中的应用允许用户进行多选操作，这对于数据筛选、权限设置等场景非常有用。在EXT.NET中，我们可以为每...
treepanel 和 tabpanel 完整
09-09
在本文中，我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件，并讨论如何将它们结合在一起，以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据，而`TabPanel`则提供了多标签页的功能，两者...
一个Coolite TreePanel TabPanel的网站后台框架示例
08-11
一个Coolite TreePanel TabPanel的网站后台框架示例 Coolite 是一个用C#封装了ExtJS的Ajax控件,后台效果的用户体验还是很不错的! 项部是一个图片,左边一棵树形,树形可以从后台配置,点击叶子结点时从Tabs页内依次打开...
Extjs入门教程（treePanel和GridPanel）
04-19
在集成TreePanel和GridPanel时，可能涉及到的概念有：将TreePanel的节点与GridPanel的数据关联，实现点击树节点时动态加载或更新GridPanel的数据，以及可能的父子数据联动操作。 在实际应用中，你可能会学习到以下...
treePanel与gridPanel技术实现页面的增删改查
03-18
在本文中，我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件，广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据，如文件...
[Ext.Net]TreePanel+gridPanel实例
德仔
12-26 2364
 @小花要完整例子，尝试一下图文并茂，力求完整。 gridPanel TreePanel.JPG (27.49 KB, 下载次数: 16) 下载附件  保存到相册 2013-1-6 11:24 上传 前台代码 ... .... AutoScroll="true">
实现二级菜单的联动
rigger21
06-11 219
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;script language="JavaScript" type="text/javasc
源代码-创意互动网站导航（ASP静态版） v1.0.zip
最新发布
08-24
源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip
java源码资源很不错的Java计算器java源码资源很不错的Java计算器
08-24
java源码资源很不错的Java计算器java源码资源很不错的Java计算器提取方式是百度网盘分享地址
源代码-补单系统 v1.0.zip
08-24
源代码-补单系统 v1.0.zip
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版
08-24
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版提取方式是百度网盘分享地址
数字万用表使用介绍.mp4
08-24
数字万用表使用介绍.mp4
SAP 客户主数据导入程序模板
08-24
客户主数据导入模板
基于springboot和vue的 闲置图书分享源码 闲置图书分享代码（高分毕设项目源码）
08-24
1. 闲置图书分享代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
ExtJS表格与树控件详解：GridPanel与TreePanel
在完成本节学习后，应掌握GridPanel和TreePanel的创建及基本配置，了解Store和TreeLoader的使用，以及如何处理与服务器的数据交互。同时，熟悉EXTJS中表格和树控件的各种功能，以便在实际项目中灵活运用。 EXTJS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值