ExtJS——TreeGrid异步加载

来源：互联网发布：knx网络专用线缆编辑：程序博客网时间：2024/05/09 02:53

http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html

TreeGrid是Ext在发布3.0版本后新增的控件，扩展Ext.ux.tree.TreePanel的功能，因此它本质上还是一棵树。

一、参考资料

1、官网实例及帮助文档

2、因为之前从没有深入研究过Ext，因此在制作这个例子的过程中，参考了网上的一个朋友写的例子，连接如下：

http://yuanlg.iteye.com/blog/920871

在他得例子的基础上完成了我自己的实例。

二、实例完整代码

<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">    <div id="tree">        </div>    </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向前端输出动态加载的数据；