ext3.4树形表格

树形表格：（添加了是否选中项，该项可以设置全选的功能）该版本不支持ext.js的高版本，因为extjs高版本已经有store容器。

 var treeloader = new Ext.ux.tree.TreeGridLoader({
            url: "treeGrid.do"
       });
 var treeGrid = new Ext.ux.tree.TreeGrid({
            id: "xtgl005LT",
            style: "margin-right:10px;",
            height: 400,
            autoScroll: true,
            autoHeight: true,
            border: false,
            animate: true,
            enableDD: true,
            sortable: false,
            columns: [
                {
                    header: '模板名称',
                    dataIndex: 'nodeName',
                    width: 250,
                    align: 'center',
                }, {
                    header: '模板id',
                    dataIndex: 'nodeId',
                    width: 60,
                    align: 'center',
                    style: "padding-left:10px",
                }, {
                    header: '采集周期',
                    dataIndex: 'cycle',
                    align: 'center',
                    style: "padding-left:10px",
                    width: 60,
                },
                {
                    header: '上次发布结束日期',
                    dataIndex: 'endDate',
                    align: 'center',
                    width: 110,
                    style: "padding-left:10px",
                }, {
                    header: '本次发布结束日期',
                    dataIndex: 'endDatePL',
                    align: 'center',
                    width: 110,
                    style: "padding-left:10px",
                },
                {
                    header: '选择发布',
                    dataIndex: 'checked',
                    align: 'center',
                    style: "padding-left:10px;z-index:9999",
                    width: 100,
                    // html:"<input type='checkbox'>选择发布"
                }
            ],
            loader: treeloader,
            listeners: {
                render: function () {
                },
                afterRender: function (node) {
                    //表格加载完之后执行的
                    //表头点击时的列表，只显示两个
                    $("#xtgl005LT table thead").on('click', function () {
                        setTimeout(function () {
                            $("#xtgl005LT-hctx ul").css({
                                "heigth": "45px !important",
                            });
                            $("#xtgl005LT-hctx").prev(".x-show").css({
                                "heigth": "48px !important",
                            });
                            $("#xtgl005LT-hctx ul li:eq(2)").remove();
                        }, 0)
                    })
                    $("#xtgl005LT-xlhd-6").empty();
                    $("#xtgl005LT-xlhd-6").append("<input type='checkbox' id='firstCheckBoxPL'>选择发布");
                    }
              }
        })

      treeGrid.on('beforeload', function (node) {
            if (node.attributes.nodeId != undefined) {
                treeGrid.loader.dataUrl = "treeGrid.do?nodeId=" + node.attributes.nodeId;
            } else {
                treeGrid.loader.dataUrl = "treeGrid.do?nodeId=" + nodeModId;
            }
        }, treeloader);
//添加
        Ext.getCmp("now_rel_boxPL").add(treeGrid);

效果图：

form.png