extjs中treegrid

extjs中treegrid

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

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

<link rel="stylesheet" type="text/css" href="css/ext-all。css">

<script type="text/javascript" src="ext-all。js"></script>

<script type="text/javascript" src="treegrid。js"></script>

 

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代码如下

  •  
  • 标签: