Ext tree

最新推荐文章于 2022-04-07 06:07:44 发布
最新推荐文章于 2022-04-07 06:07:44 发布
阅读量1.1k 收藏
点赞数
分类专栏： jquery 文章标签： tree ext function webservice stylesheet border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/susubuhui/article/details/7489242
版权 
 tree = new Ext.tree.TreePanel({
                    renderTo: 'CarListdiv',
                    useArrows: true,
                    border: true,
                    frame: true,

                    animCollapse: false,
                    draggable: false,
                    animate: false,
                    rootVisible: true,
                    enableDD: true,
                    containerScroll: true,
                    autoScroll: true,
                    height: 200,
                    root: tree_root
                , listeners: {


                    "click": function (node) {
                        // debugger;
                        //alert(node.leaf);alert(node.attributes.ishide);
                        if (node.leaf) {
                            node.ui.toggleCheck(true);
                            node.attributes.checked = true;
                            selectId = node.id;
                            selfOp = 1;
                            storeLoad = 0;


                            addCar(node.id);
                            debugger;
                            focusCar(node.id);
                            debugger;
                            showTooltip_rightClick(node.id, 1);
                        }
                        else {
                            if (ds1.isFiltered)
                                ds1.clearFilter();
                            setBestView(node)
                            node.expand();


                        }




                    },


                    "dblclick": function (node) {
                        node.ui.toggleCheck(true);
                        node.attributes.checked = true;


                        if (!node.leaf) {
                            node.expand();
                        }


                    },


                    'checkchange': function (node, e) {


                        if (!node.leaf) {


                            node.eachChild(function (child) {
                                child.ui.toggleCheck(node.attributes.checked);
                                child.attributes.checked = node.attributes.checked;
                                child.fireEvent('checkchange', child, node.attributes.checked);
                            });




                        }
                        else {
                            if (node.attributes.checked) {
                                debugger;
                                addCar(node.id);
                            }
                            else {
                                removeCar(node.id);
                            }
                        }


                    }

                   , 'load': function () {


                       if (load == 1)//加载完成后
                       {
                           // alert("加载完成后");
                           Ext.get(this.getEl()).unmask();
                       }


                   },
                    "beforeload": function () {
                        //  return;


                        if (load == 0) {
                            Ext.get(this.getEl()).mask('正在加载车辆，请稍候...', 'x-mask-loading');
                            load = load + 1;
                        } else {
                            if (load == 1) {
                                Ext.get(this.getEl()).unmask();
                                load = load + 1;
                            }
                        }
                    },
                    "contextmenu": function (node, e) {
                        debugger;
                        if (!node.leaf)
                            return;


                        selectId = node.id;


                        if (ds1.isFiltered())
                            ds1.clearFilter();
                        var car = ds1.getById(node.id);
                        if (car.data['LOCATIONTYPE'] == 1) {
                            bartitle = "人员";
                            createtreeMenuByperson();
                            treeMenuByperson.showAt(e.getPoint());
                        } else {
                            bartitle = "车辆";
                            if (car.data['LOCK_STATUS'] == 1) {


                                createTreeMenu();
                                treeMenu.showAt(e.getPoint());


                            }
                            else {
                                createTreeMenu();
                                treeMenu.showAt(e.getPoint());
                            }
                        }
                        //filterDs1();
                    }




                }


                });


                //设置属性
                tree.root.attributes.description = '这是根节点';

                //  debugger;
                tree.root.expand(true);

                appendChildNodesFromServerData(tree.root); // load data


 


                function appendChildNodesFromServerData(node) { // append child nodes from server data 
                    // debugger;
                    Ext.Ajax.request({

                        method: "post",
                        // headers: { 'Content-Type': 'application/json' },
                        jsonData: { v_companyInfo: '*' },
                        url: 'ws/ws_jquery_carinfo.asmx/GetAllCarByCmpId',
                        success: function (request) {
                            //debugger;
                            //alert(request.responseText);
                            var data = Ext.util.JSON.decode(request.responseText);



                            // debugger;
                            node.appendChild(data.d); // append child nodes 

                            //alert(data.d);
                            //document.writeln(data.d);


removeChildNodes(node);
                     node.reload();
                            node.expandChildNodes(true); // expand node 

                            //  debugger;

                        },
                        failure: function (resp, opts) {
                            // debugger;
                            var respText = Ext.util.JSON.decode(resp.responseText);
                            Ext.Msg.alert('错误', respText.error);


                            Ext.MessageBox.show({
                                title: '版块管理',
                                msg: 'appendChildNodesFromServerData 对不起,加载数据出现异常,请重试!',
                                buttons: Ext.MessageBox.OK,
                                icon: Ext.MessageBox.ERROR
                            });
                        }
                    });
                }


 

 

function removeChildNodes(node) { // remove all child nodes
             
             while (node.firstChild) {
                 removeChildNodes(node.firstChild);
             }
             if (node.getDepth() != "0") { // isn't root node
                 node.remove();
             }
         }    




 <script src="js/datetime.js" type="text/javascript"  charset="gb2312"></script>
     <link rel="stylesheet" type="text/css" href="js/ext-3.4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="js/ext-3.4.0/adapter/ext/ext-base.js"></script>
 
  <script type="text/javascript" src="js/ext-3.4.0/ext-all.js"></script>
    
    <script type="text/javascript">
        function singlemutimodel_change(obj) {
            //
            if ("单选" == obj.value) {
                appendChildNodesFromServerData(forumTree.root);
                document.getElementById("hfd_DeviceId").value = "";
 
            } else {
 
                appendChildNodesFromServerData(forumTree.root, false);
                document.getElementById("hfd_DeviceId").value = "";
            }
        }
    </script>
     <script type="text/javascript">
         var forumTree;
 
         function trimStr(rawStr, rpCha) {
             //去除开始字符窜
             //debugger;
             //if (rawStr.startsWith(rpCha)) 
            if( rawStr.indexOf(rpCha) == 0)
             {
 
                 
 
 
                 rawStr = rawStr.substring(rpCha.length, rawStr.length);
             }
 
             //去除结束字符串
             //if (rawStr.endsWith(rpCha)) 
             if( rawStr.indexOf(rpCha)== rawStr.length-rpCha.length)
             {
 
                
 
                 rawStr = rawStr.substring(0, rawStr.length - rpCha.length);
             }
 
             return rawStr;
         }
 
         function CheckTreeNodeCheckState(node) {
             var tmpIpcList = document.getElementById("hfd_DeviceId").value;
             var tmpselectId;
             if (node.attributes.checked && node.isLeaf) {
 
                 tmpselectId = node.id;
                 if (tmpselectId != null) {
                     var realIpcId = tmpselectId.toString().substring("ipc_".length, tmpselectId.length);
                     //
                     tmpIpcList = tmpIpcList.replace(realIpcId, "");
                     tmpIpcList = tmpIpcList.replace("&&", "&");
                     tmpIpcList = trimStr(tmpIpcList, '&');
 
                     //
                     if (tmpIpcList != "") {
                         tmpIpcList += "&";
                     }
                     tmpIpcList += realIpcId;
                     tmpIpcList = trimStr(tmpIpcList, '&');
 
 
 
 
 
                     document.getElementById("hfd_DeviceId").value = tmpIpcList;
                     //alert(tmpIpcList);
                 }
 
 
             } else if (!node.attributes.checked && node.isLeaf) {
                 tmpselectId = node.id;
                 if (tmpselectId != null) {
                     var realIpcId = tmpselectId.toString().substring("ipc_".length, tmpselectId.length);
                     tmpIpcList = tmpIpcList.replace(realIpcId, "");
                     tmpIpcList = tmpIpcList.replace("&&", "&");
                     tmpIpcList = trimStr(tmpIpcList, '&');
                     document.getElementById("hfd_DeviceId").value = tmpIpcList;
                     // alert(tmpIpcList);
                 }
 
             }
 
 
 
 
         }
         function removeChildNodes(node) { // remove all child nodes
 
             while (node.firstChild) {
                 removeChildNodes(node.firstChild);
             }
             if (node.getDepth() != "0") { // isn't root node
                 node.remove();
             }
         }
 
 
         function appendChildNodesFromServerData(node, v_checked) { // append child nodes from server data
             var myurl = 'WebService_ClientApp.asmx/GetIpcListForExtTree_nocheck';
 
             var cliAcctType = 'Father';
             var zhuAcctId;
             var loginUserId = 'test';
             var LoginPwd;
             var checked = false;
             if (v_checked != null) {
                 checked = v_checked;
                 myurl = 'WebService_ClientApp.asmx/GetIpcListForExtTree';
             }
 
 
             LoginPwd = 'test';
 
             if (cliAcctType == "Father") {
                 zhuAcctId = 'test';
                 loginUserId = zhuAcctId;
 
             } else if (cliAcctType == "Child") {
                 zhuAcctId = '';
 
 
             }
 
             Ext.Ajax.request({
                 method: "post",
                 headers: { 'Content-Type': 'application/json' },
                 jsonData: {
                     v_ZhuYongHuId: zhuAcctId
                 , v_Model: cliAcctType
                 , v_UserId: loginUserId
                 , v_UserPwd: LoginPwd
                 , v_check: checked
                 },
                 url: myurl,
                 success: function (request) {
 
 
                     var data = Ext.util.JSON.decode(request.responseText);
 
 
                     // debugger;
                     removeChildNodes(node);
                     node.reload();
                     node.appendChild(data.d); // append child nodes  
 
 
 
                     node.expandChildNodes(true); // expand node
                 },
                 failure: function (resp, option) {
                     // debugger;
                     Ext.MessageBox.show({
                         title: '版块管理',
                         msg: '对不起,加载数据出现异常,请重试!',
                         buttons: Ext.MessageBox.OK,
                         icon: Ext.MessageBox.ERROR
                     });
                 }
             });
         }
 
 
 
         Ext.onReady(function () {
             Ext.QuickTips.init();
 
             forumTree = new Ext.tree.TreePanel({
 
 
             
                 useArrows: true,
                 border: true,
                 frame: false,
                 renderTo: 'IpcTree',
                 title: '',
                 animCollapse: false,
                 draggable: false,
                 animate: false,
                 rootVisible: true,
                 enableDD: true,
                 containerScroll: true,
 
                 autoScroll: true,
                 height: 500,
                 
 
                 root: new Ext.tree.AsyncTreeNode({
                     nodeType: 'async',
 
                     id: "id",
                     text: "根节点",
                     expanded: true,
                     leaf: false,
                     iconCls: 'group'
                         ,
                     children: [
 
 
                     ]
 
 
 
 
                 })
 
                  , listeners: {
 
                      "click": function (node) {
 
                          if (node.leaf) {
                              node.ui.toggleCheck(true);
                              node.attributes.checked = true;
                              selectId = node.id;
                              selfOp = 1;
                              storeLoad = 0;
 
                              var realIpcId = selectId.toString().substring("ipc_".length, selectId.length);
 
                              //alert(selectId + " >>> " + realIpcId);
 
                              document.getElementById("hfd_DeviceId").value = realIpcId;
                          }
                          else {
 
                              node.expand();
 
                          }
 
 
                      }
 
                        , 'checkchange': function (node, e) {
 
                            if (!node.leaf) {
 
                                node.eachChild(function (child) {
                                    child.ui.toggleCheck(node.attributes.checked);
 
                                    //                                    if(child.attributes.checked==node.attributes.checked)
                                    //                                        child.attributes.checked = node.attributes.checked;
 
                                    // child.fireEvent('checkchange', child, node.attributes.checked);
                                });
 
                            }
                            else {
                                if (node.attributes.checked) {
 
                                    CheckTreeNodeCheckState(node);
 
                                }
                                else {
                                    CheckTreeNodeCheckState(node);
                                }
                            }
 
                        }
                  }
 
             });
             // debugger;
             //forumTree.render(document.body);
             forumTree.render();
             forumTree.expandAll(); // 展开所有结点
             //forumTree.render();
             // debugger;
 
             //             if(hdf_SelectedIndexChanged.Value=="单选")
             //                 appendChildNodesFromServerData(forumTree.root); // load data
             //             else
             appendChildNodesFromServerData(forumTree.root, false); // load data
 
 
 
             /
 
 
         });
          
 
       
 
 
     </script>


susubuhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ext TREE
03-27
NULL 博文链接：https://scmky.iteye.com/blog/1174740
Ext.tree
iteye_8475的博客
04-12 163
1、Ext.tree.TreePanel       主要配置项：             root：树的根节点。             rootVisible：是否显示根节点，默认为true。             useArrows：是否在树中使用Vista样式箭头，默认为false。             lines：是否显示树线，默认为true。             loader...
Ext的tree
下雨天的程序生活专栏
09-22 927
 YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤；1.定义一个Tree对象：var tree = new Ext.tree.TreePanel(tree, {                  animate:true,                   loader: new Ext.tree
EXT 组件一些属性与方法（Tree）
Angie Chiu
01-13 848
1、Ext.tree.TreePanel  主要配置项：  root：树的根节点。  rootVisible：是否显示根节点，默认为true。  useArrows：是否在树中使用Vista样式箭头，默认为false。  lines：是否显示树线，默认为true。  loader：树节点的加载器，默认为Ext.tree.TreeLoader。  selModel：树的选择模式，默
ext中的Tree组件
随心所欲
05-17 1487
YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤； 1.定义一个Tree对象： var tree = new Ext.tree.TreePanel('tree', {                   animate:true,                   loader: new Ext.
ext tree 分页
12-22
在EXT JS框架中，"ext tree 分页"是一种优化技术，用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件（TreePanel）中，如果一次性加载所有节点，特别是当树结构非常深或者节点数量巨大时，不仅会消耗大量...
Ext Tree示例
03-10
Ext Tree 是 Ext JS 库中的一个组件，它用于在用户界面上展示层次化的数据结构，类似于文件系统的目录结构。在给定的资源中，我们有多个 HTML 文件（tree2.html, tres.html, s1.html, tree.html）和 JavaScript 文件...
oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree
09-20
标题中的"oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree"似乎是一个组合字符串，它可能代表了某个项目或教程的文件结构。其中，“oa”可能是项目或系统的名称，而“ext”、“java”、“oa_ext”、“tree_...
Ext tree build
03-17
标题“Ext tree build”指的是在Ext JS框架中构建树形结构的过程。Ext JS是一个流行的JavaScript库，用于构建富客户端Web应用程序。它提供了丰富的组件库，其中包括用于显示层次数据的树形控件（Tree）。在本篇文章...
Ext.tree.Panel6.2
NewOnexs的博客
04-11 517
关于ext6.2的Ext.tree.PanelExt.tree.Panel一些重要的配置数据结构1代码块1数据结构2代码块2效果图 Ext.tree.Panel一些重要的配置 最近一段时间一直在学习ext6.2版本, 是一个不折不扣的ext新手（之前的版本都没有接触过），官网和百度都没有找到相应的中文文档，所以学些起来比较吃力，特别是在学习Ext.tree.Panel树结构这一块的时候，但最终还是...
EXT tree 使用 实例 最新
05-14
EXT tree 使用 实例 最新 EXT使用实例，很漂亮。
extjs - 树
chanball的专栏
03-12 115
[b][/b]重新load单一树节点(node) [code="js"] tree.loader.load(node); [/code] [b][/b]刷新整棵树 [code="js"] tree.root.reload(); [/code] [b][/b]修改ext tree树的节点请求地址 [code="js"] 用treepanel.loader.dataUrl...
extjs tree 树
Java小白的博客
11-25 2320
extjs 从数据库获取数据，生成一颗树
Ext.tree树形控件设置
halimao的博客
10-31 1918
Ext.tree笔记
EXT tree 事件
okkeqin的专栏
01-14 911
treePanel.on({             //目录树单击事件             'itemclick' : function(view, rcd, item, idx, event, eOpts) {                 var dirid = rcd.get('id'); //节点id                 var dirtype = rcd.ra
Ext-Tree 设计与实现
noobzc的专栏
12-29 616
在项目开发中，我们会经常用到一种数据结构—树。”树”这种数据结构名称的灵感完全来自自然界的树，在计算机中，树是倒着长的，根在上，叶子在下。 下面来介绍下，在使用ExtJs进行实际项目开发过程中，怎样才能构建一颗树，其中分为静态树和动态异步树两种类型。如图所示   一、静态树   以上TreePanel提供了树形结构数据的树形UI展示。添加到TreePanel中的每个TreeNode都
TreePanel的各项属性
热门推荐
flyz0001的专栏
07-05 1万+
TreePanel的各项属性 1、Ext.tree.TreePanel主要配置项：root：树的根节点。rootVisible：是否显示根节点，默认为true。useArrows：是否在树中使用Vista样式箭头，默认为false。lines：是否显示树线，默
Ext Tree学习小结
u012844628的专栏
04-23 526
这两天用Ext做了个树，期间碰到不少问题
[Ext JS] 3.7 树(Tree)的定义和使用
oscar999的专栏
04-07 490
树的构成 树面板：Ext.tree.Panel ， 面板用来创建一个树的组件 树视图：Ext.tree.View ， 对树的样式做一些配置 ，比如是否显示根节点（rootVisible）， 视图不直接使用，通过面板的viewConfig配置项进行配置。 树的列：Ext.tree.Column，一般而言，树只需要一列，也可以像Grid那样，定义多列。 定义与示例 树使用Ext.tree.Panel创建， 使用Ext.create()和配置方式都可以。 树的数据使用Ext.data.TreeStore类型
Ext tree的重新加载,数据更新
最新发布
06-08
可以使用Ext tree的`reload()`方法重新加载树的数据。该方法会向服务器发起请求，获取最新的数据，然后重新渲染树形结构。 如果只是需要更新某个节点的数据，可以使用`getNodeById()`方法获取该节点，然后调用`set...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值