您的位置：首页 > Web前端 > extjs > 正文

extjs中treegrid

更多时间：2014-4-22 类别：Web前端浏览量：4122

extjs中treegrid

extjs中treegrid

Ext下载的实例文件里，我们可以找到treegrid的实例，大家可以先分析官网的源码实例，加深印象。下面通过简单的实例介绍treegrid的用法

使用treegrid，需要在调用页面的head中加载以下几个文件：

treegrid实例

1、完整实例

HTML 代码复制


<html>
<head>
    <title>树形列表</title>
    <!-- ext css includes -->
    <link href="../ExtJS/resources/css/ext-all。css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../extjs/examples/ux/treegrid/treegrid。css"/>
    
    <!-- ext javascript includes -->
    <script src="../ExtJS/adapter/ext/ext-base-debug。js" type="text/javascript"></script>
    <script src="../ExtJS/ext-all-debug。js" type="text/javascript"></script>
    
    
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridSorter。js"></script>
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridColumnResizer。js"></script>
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridNodeUI。js"></script>
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridLoader。js"></script>
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridColumns。js"></script>
    <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGrid。js"></script>
    
    <script type="text/javascript">...
    <!--
    Ext.BLANK_IMAGE_URL = "/pmscost/baselib/extjs/resources/images/default/s。gif";
    
    Ext.onReady(function() ...{
        Ext.QuickTips.init();

        var tree = new Ext.ux.tree.TreeGrid(...{
            title: 'Core Team Projects',
            width: 500,
            height: 300,
        
        //定义树的加载器 
        var treeloader = new Ext.ux.tree.TreeGridLoader(...{ 
            dataUrl : "../Cost_JsonDb。ashx?tablename=boq_model&parentSysId=0" 
        }); 
        
        //定义treegrid 
        var treeGrid = new Ext.ux.tree.TreeGrid(...{ 
            title : '建筑工程.表三',                //表头名称，去掉则不显示表头
            id : "tg_boqm_c",                       //树形列表id
            width: 1000,
            height: 600,
            //renderTo: Ext.getBody(),
            //autoScroll : true, 
            //autoHeight : true, 
            //border : false, 
            animate : true, 
            enableDD : true, 
            rootVisible : false, 
            containerScroll : true, 
            enableSort:false,           //默认为true，控件根据列的内容排序；置为false，则按照数据顺序显示
            columns : [ ...{ 
                header : '序号', 
                dataIndex : 'boqm_sequence', 
                width : 150 
            },...{ 
                header : '定额编号', 
                dataIndex : 'bqs_code', 
                width : 100,
                align : 'center'
            },...{ 
                header : '项目名称及规范', 
                dataIndex : 'boqm_boq_name', 
                width : 300,
                align : 'center'
            },...{ 
                header : '单位', 
                dataIndex : 'boqm_unit',
                width : 80 /**//*, 
                renderer : function(n) { 
                if (n == '1') { 
                return "省、自治区"; 
                } else if (n == '2') { 
                return "市、州"; 
                } else if (n == '3') { 
                return "县"; 
                } else if (n == '4') { 
                return "乡镇"; 
                } else if (n == '5') { 
                return "村"; 
                } 
                } */
            },...{ 
                header : '系统编号', 
                dataIndex : 'sysid',
                hidden : true 
            },...{ 
                header : '填写方式', 
                dataIndex : 'boqm_filltype',
                hidden : true 
            },...{ 
                header : '父级编号', 
                dataIndex : 'parent_sysid',
                hidden : true 
            }], 
            //dataUrl : 'treegrid-data.json',
            loader : treeloader 
            //绑定加载器 
        }); 
        
        // 异步加载根节点 
        var rootnode = new Ext.tree.AsyncTreeNode(...{ 
            id : '0', 
            text : '中华人民共和国行政区划代码', 
            draggable : false,// 根节点不容许拖动 
            expanded : true
        }); 
        //设置节点属性 
        rootnode.attributes = ...{ 
            sysid : '0',
            boqm_sequence : '0',
            bqs_code : '0',
            boqm_boq_name : '0',
            boqm_unit : '0',
            boqm_filltype : 'sum',
            parent_sysid : '-1'
        }; 
        
        // 为tree设置根节点 
        treeGrid.setRootNode(rootnode); 

        // 响应加载前事件，传递node参数 
        treeGrid.on(
            'beforeload',
            function(node) ...{ 
                var sysid = node.attributes["sysid"];
                //alert(sysid);
                treeGrid.loader.dataUrl = "../Cost_JsonDb。ashx?tablename=cost_boq_model&parentSysId=" + sysid; // 定义子节点的Loader 
            },
            treeloader
        );
        
        treeGrid.render(Ext.getBody());
        
        treeGrid.expand(false,false);

    });
    //-->
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <li id="tree">
    
    </li>
    </form>
</body>
</html>

实例说明

1、Ext框架中所有的图片均先放置一个空白的s.gif文件，然后再用需要显示的图片替换s.gif。默认状态下，Ext控件会到官网下载s.gif。

如果你的程序是在内网发布，不发访问外网的话，可以使用Ext自带的s.gif替换，具体方法如下：

Ext.BLANK_IMAGE_URL = extjs/resources/images/default/s。gif";

2、在ASP.Net下使用的Ext，vs.net在新增一个aspx文件时，会自动增加DOCTYPE。如果使用ext控件，一定要把这个东西去掉。

3、实例化TreeGrid时，不要指定rendeTo属性，而是要在最后通过TreeGrid.render(object)的方式渲染控件。否则，成宿会报“this.ui为空或不是对象”错误。

4、根节点可以在TreeGrid的Config参数中指定，也可以通过setRootNode方法指定。不论使用哪种方法，都需要指定一个TreeNode对象。

官网帮助文档中给出的演示代码中，在Config中指定root属性的值，是一组json值，程序会报错。

5、使用.net的事务处理文件ashx向前端输出动态加载的数据；

实例二、ext treegrid 异步加载

js代码如下

标签：treegrid extjs

上一篇：CSS中英文换行和不换行

下一篇：css !important的用法

您可能感兴趣

排行榜

1
extjs中treegrid

extjs中treegrid

extjs中treegrid

热门推荐

排行榜