[Ext.Net]TreePanel 异步加载数据
来源：互联网 发布：企业网软件下载 编辑：程序博客网 时间：2024/05/21 10:31
异步加载数据指的是页面加载的时候只显示根目录，点击根目录再去加载其子目录。
下面就来介绍下这种异步加载的树结构要怎么实现现将例子的图
- 前台画面中要布局下树TreePanel ，在异步加载中，这个树一定要有根节点(root)，而且这个根节点可以隐藏，但不可以消失，如果没有的话，浏览页面的时候就会报错。复制代码
- <ext:TreePanel ID ="tpl_left" runat ="server" Border ="true" RootVisible="false" AutoScroll="true" ContainerScroll="true" >
- <Root >
- <ext:AsyncTreeNode Text ="root" NodeID ="root" Expanded ="true" ></ext:AsyncTreeNode> <%--treepanel中的rootvisible="true"是隐藏root这个节点，但是展开了，异步加载的时候如果接下来的节点不确定是否一定有节点，最好不用root这个节点做为第一个节点，如果确定就节点就不用隐藏，直接用root节点--%>
- </Root>
- <Listeners >
- <BeforeLoad Handler ="nodeLoad(node,'','');" /> <%--这个是点击展开响应的事件 --%>
- <Click Handler="onClickSource(node.id);" /> <%--这个是单击节点响应的事件--%>
- </Listeners>
- </ext:TreePanel>
- <ext:TreePanel ID ="tpl_left" runat ="server" Border ="true" RootVisible="false" AutoScroll="true" ContainerScroll="true" >
- 在前台js中写下点击展开的节点的事件和单击节点的事件，这些事件再去调用到后台取出数据。
单击节点响应的事件(将选中的节点的ID记录下来，方便绑定其他数据以及刷新时使用)- function onClickSource(nid){
- hSelPosId.setValue(nid);
- Ext.net.DirectMethods.BindPosInfo();//根据选中的节点的ID绑定其他数据
- }
单击展开响应的事件()复制代码- //加載子節點
- function nodeLoad(node,strSign,strParentId) {
- Ext.net.DirectMethods.NodeLoad(node.id, { //加载子节点
- success: function(result) {
- if (result == "" || result == "undefined" || result == "[]")
- { return; }
- var data = eval("(" + result + ")");//这时返回回来的值
- node.loadNodes(data);
- tpl_left.body.unmask();
- //接下来这段是刷新的时候做的，由于我实现的功能比较复杂就不一一解释了，大概的思路是这样的，首先根据之前记录下来的选中的ID找出所有的父节点的ID，对当前树的节点进行查找该选中ID，如果找到，则选中，没有找到，则从该节点的最前面一个父节点ID开始查找下来，找到父节点则展开，这样一级级找下来就可以找到之前选中的节点
- if(strSign=="reload"){
- var strSelId=hSelPosId.getValue();
- if(strSelId !=""){
- //第一層
- var curNode = tpl_left.getNodeById(hSelPosId.getValue());
- if (curNode != null && curNode != undefined) {
- curNode.select();
- onClickSource(curNode.id);
- }else {
- var arrSelId=strSelId .split('|');
- if(arrSelId .length>1){
- switch (arrSelId [0]){
- case "g_id": //職等
- if(strParentId !=arrSelId [0]){
- curNode = tpl_left.getNodeById(arrSelId [0]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId [0]);
- }
- }else {
- onClickSource('');
- }
- break ;
- case "t_id"://職稱
- if(arrSelId.length ==2){
- if(strParentId !=arrSelId [0]){
- curNode = tpl_left.getNodeById(arrSelId [0]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId [0]);
- }
- }else {
- onClickSource('');
- }
- }else {
- if(strParentId==""){
- curNode = tpl_left.getNodeById(arrSelId[0]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId [0]);
- }
- }else if(strParentId ==arrSelId [0]){
- curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);
- }
- }else {
- onClickSource('');
- }
- }
- break ;
- case "f_id"://職務
- if(arrSelId.length ==2){
- if(strParentId !=arrSelId [0]){
- curNode = tpl_left.getNodeById(arrSelId [0]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId [0]);
- }
- }else {
- onClickSource('');
- }
- }else {
- if(strParentId==""){
- curNode = tpl_left.getNodeById(arrSelId[0]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId [0]);
- }
- }else {
- if(strParentId ==arrSelId [0]){
- curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);
- }
- }else if(strParentId ==(arrSelId[0]+"|"+arrSelId [1])){
- if(arrSelId .length ==4){
- curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
- if(curNode.hasChildNodes()==true){
- nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
- }
- }else {
- onClickSource('');
- }
- }else{
- onClickSource('');
- }
- }
- }
- break ;
- }
- }
- }
- }
- }
- },
- failure: function(errorMsg) {
- Ext.Msg.alert('Failure', errorMsg);
- }
- });
- }
- function onClickSource(nid){
- 在后台写下前台所调用的事件，并返回相应的值.
在后台取数据的时候要注意的问题：
后台加载节点时，节点的ID要设置好，建议最好是 父节点的ID+分隔符号（自己设定）+当前节点的ID，这样子，如果刷新树，还可以做定位到当前选中的节点
（例子中的节点 ID说明 "root"：root节点 ,"00":所有分类的节点，"f_id"、"g_id"、"t_id" 为所有分类下第一级的节点，"f_id|XXX"为所有分类下第二级到第N级的节点）。
- [Ext.Net.DirectMethod(ViewStateMode = Ext.Net.ViewStateMode.Enabled)]
- public string NodeLoad(string nodeID)
- {
- if (nodeID == "root")//綁定根目錄的節點（所有職位）
- {
- return BindPosRoot("");
- }
- else if (nodeID == "00")//職位大分類(職等、職稱、職務)
- {
- return BindPosCat();
- }
- else//職位大分類下的分類的小分類
- {
- return BindPosCatChild(nodeID);
- }
- }
- //下面这段是注意第二点要注意的
- //職位大分類下的分類
- public string BindPosCatChild(string strNodeId)
- {
- string[] arrStr=strNodeId .Split ('|');
- Ext.Net.TreeNodeCollection nodes = new Ext.Net.TreeNodeCollection();
- Ext.Net.AsyncTreeNode curNodes = new Ext.Net.AsyncTreeNode();
- Ext.Net.TreeNode curTreeNode = new Ext.Net.TreeNode();
- DataTable dt=null;
- DataTable dtChild=null;
- DataRow[] drsChild=null;
- string strParentId = arrStr [0];
- string strId = "";
- string strIdField = "";//顯示編號的字段
- string strTextField = ""; //顯示名稱的字段
- int ICount = 0;
- ICount = arrStr.Length
- switch (strParentId)
- {
- case "g_id"://職等
- if (ICount == 1)
- {
- dt = getInitData("ods_grade", "g_id,grade", " and g_status=1");
- strId = strParentId+"|";
- strIdField = "g_id";
- strTextField = "grade";
- }
- break;
- case "t_id"://職稱
- if (ICount == 1)
- {
- dt = getInitData("ods_title_cat", "t_cat_id,t_cat", "");
- dtChild = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1");
- strId = strParentId + "|";
- strIdField = "t_cat_id";
- strTextField = "t_cat";
- }
- else {
- dt = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1 and t_cat_id='"+arrStr [1]+"'");
- strId = strNodeId + "|";
- strIdField = "t_id";
- strTextField = "title";
- }
- break;
- case "f_id"://職務
- if (ICount ==1 )
- {
-
- dt = getInitData("ods_function_cat", "f_cat,f_cat_id", "");
- dtChild = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", "");
- strId = strParentId + "|";
- strIdField = "f_cat_id";
- strTextField = "f_cat";
- }
- else if (ICount == 2)
- {
- dt = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", " and f_cat_id='" + arrStr[1] + "'");
- dtChild = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1");
- strId = strNodeId + "|";
- strIdField = "f_dog_id";
- strTextField = "f_dog";
- }
- else {
- dt = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1 and f_dog_id='"+arrStr [2]+"'");
- strId = strNodeId + "|";
- strIdField = "f_id";
- strTextField = "functionName";
- }
- break;
- }
- //增加子節點
- foreach (DataRow dr in dt.Rows)
- {
- if (dtChild != null) {
- drsChild = dtChild.Select(strIdField + "='" + dr[strIdField].ToString() + "'");
- }
- //如果有子节点则用 AsyncTreeNode
- if (drsChild !=null &&drsChild.Length > 0)
- {
- curNodes = new Ext.Net.AsyncTreeNode();
- curNodes.NodeID = strId + dr[strIdField].ToString();
- curNodes.Text = dr[strTextField].ToString();
- nodes.Add(curNodes);
- }
- else
- {
- curTreeNode = new Ext.Net.TreeNode();
- curTreeNode.NodeID = strId + dr[strIdField].ToString(); ;
- curTreeNode.Text = dr[strTextField].ToString ();
- curTreeNode.Leaf = true;
- nodes.Add(curTreeNode);
- }
- }
- return nodes.ToJson();
- }
0 0
- [Ext.Net]TreePanel 异步加载数据
- ext TreePanel 一次递归加载数据及异步加载数据（点子节点加载数据）
- asp.net ext treepanel 动态加载XML
- 异步Ext.TreePanel获取后台数据时的注意事项
- Ext Tree 异步加载数据
- [Ext.Net]TreePanel自定义图标
- [Ext.Net]TreePanel+gridPanel实例
- Extjs4---treepanel+struts2异步加载
- Extjs4 treePanel异步加载菜单
- Ext.tree.TreeLoader异步加载数据
- ext treepanel重复加载的问题
- Ext.Net TreePanel 修改Icon图标
- Ext.Net中TreePanel右键菜单
- EXT.NET TreePanel 相关属性、方法
- ext.net treepanel删除选中节点
- Ext.net中TreePanel动态生成
- ExtJS4 TreePanel 加载数据 J2EE
- Ext.TreePanel
- 用adblock过滤页面上固定位置的悬浮窗
- 什么是stream？
- Android开发心得——网页通过webview调用Android的图片或文件选择
- android系统中sendevent的妙用
- modem是什么
- [Ext.Net]TreePanel 异步加载数据
- 复习笔记之三--内核对象线程同步---事件
- 顺序栈实现
- 论计算机语言
- myeclipse 85 js插件安装
- DBCC大全集之（适用版本MS SQLServer 2008 R2）----DBCC DBREINDEX对指定数据库中的表重新生成一个或多个索引
- centos下mysql5.6.14安装
- Linux基础-用户管理
- VS2013调用MATLAB内建函数
