博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ext.net TreeGrid
阅读量:5139 次
发布时间:2019-06-13

本文共 3572 字,大约阅读时间需要 11 分钟。

  系统中常会面临处理一些具有多属性列的而且具有层级关系的数据项,Ext.Net中 这种情况下一个比较好的选择就是使用TreeGrid来处理。TreeGrid其实是对TreePanel的继承和扩展,一次他的数据源是不支持Store来绑定的,而是通过TreeNode的集合,每个TreeNode通过添加CustomAttributes的ConfigItem来扩展显示的列属性。通过配置TreeGrid的TreeLoader来加载业务中的数据。下面给出一个简单的样例代码: 

前台HTML
1    
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
后台Controler中的业务数据代码
1   public string LoadNodes(string id, string pId) 2         { 3             TreeNodeCollection nodeList = new TreeNodeCollection(); 4             for (int i = 0; i < 10; i++) 5             { 6                 Random ran = new Random(); 7                 var index = ran.Next(); 8                 AsyncTreeNode asyNode = new AsyncTreeNode() 9                 {10                     Text = string.Format("张三{0}", i),11                     NodeID = i.ToString(),12                     Leaf = index % 2 == 0 ? true : false,13                 };14                 asyNode.CustomAttributes.Add(new ConfigItem("Name", asyNode.Text, ParameterMode.Value));15                 asyNode.CustomAttributes.Add(new ConfigItem("Age", (i + 10).ToString(), ParameterMode.Value));16                 asyNode.CustomAttributes.Add(new ConfigItem("Sex", (index % 2 == 0 ? true : false).ToString(), ParameterMode.Value));17                 asyNode.CustomAttributes.Add(new ConfigItem("Remark", "备注信息。。。。" + i, ParameterMode.Value));18                 nodeList.Add(asyNode);19                 Thread.Sleep(10);20             }21             return nodeList.ToJson();22         }

 那么我们如何更新TreeGrid中的数据呢?一个方法是更新了数据之后,重新加载编辑节点的数据项;另一个是更新成功后,不重新加载,只是修改前台界面的值。对比之下后者的性能跟定更高,对服务器和数据库来说减小了压力,那么我们如何来更新前台界面上的数据呢?这里简单介绍一个方法,举例说明更新界面方法,比如我们更新选中行(其实是个TreeNode/AsyncTreeNode)数据:

数据更新处理Js code
1  function UpdateNodeInfo() { 2             var node = TG.getSelectionModel().selNode; 3             if (node) { 4                 var nodeEl = node.ui.elNode; 5                 var columnTest1 = nodeEl.childNodes[0].childNodes[0]; 6                 var columnTest2 = nodeEl.childNodes[1].childNodes[0]; 7                 var columnTest3 = nodeEl.childNodes[2].childNodes[0]; 8                 var columnTest4 = nodeEl.childNodes[3].childNodes[0]; 9                 node.ui.node.attributes.Name = columnTest1.innerHTML = '王五';10                 node.ui.node.attributes.Age = columnTest2.innerHTML = '100';11                 node.ui.node.attributes.Sex = columnTest3.innerHTML = 'boy';12                 node.ui.node.attributes.Remark = columnTest4.innerHTML = '王五.....';13             }14         }

转载于:https://www.cnblogs.com/rpoplar/archive/2012/11/06/2757878.html

你可能感兴趣的文章
[JOI 2015 Final] 分蛋糕 2
查看>>
LeetCode "Smallest Rectangle Enclosing Black Pixels"
查看>>
Vim XDebug调试PHP php远程调试
查看>>
public private protected
查看>>
少年的烦恼
查看>>
使用定时器制作雪花动画
查看>>
英文邮件常用句型汇总2
查看>>
html+css:将有关系的域组成一组
查看>>
Spring学习笔记--注入Bean属性
查看>>
2019春第二次课程设计实验报告
查看>>
mybatis配置文件xml中插入新数据
查看>>
获取指定文件下的所有file文件
查看>>
Character类--字符操作
查看>>
有序数组的二分查找
查看>>
php性能优化
查看>>
1.9 Android
查看>>
分布式系统中接口的幂等性(转)
查看>>
c语言第三次博客作业
查看>>
mybatis 乐观锁和逻辑删除
查看>>
PAT 1055. 集体照 (25)
查看>>