jquery jqgrid treegrid扩展到特定级别

时间:2013-02-20 17:00:48

标签: javascript jquery jqgrid

这是jQuery jqGrid的问题。我们需要一个函数来将treegrid扩展到一定的级别。我尝试直接使用collapseRow,expandRow,collapseNode和expandRow。但是,collapseRow / expandRow是递归的。因此,在每一行调用这些函数真的很慢。因此,我将hideRow和showRow函数添加到jqgrid。我成功地将树扩展并折叠到一定程度。但是,如果通过单击顶层的三角形来关闭树,则将树展开为3级。一些扩展的行仍在那里。

这是我在jqgrid下添加的功能。

hideRow: function (record) {
    this.each(function(){
        $( this.rows.namedItem(record.id)).css("display","none");
    });          
},
showRow: function (record) {
    this.each(function(){
        $( this.rows.namedItem(record.id)).css("display","");
    });          
},

这就是我调用这些函数的方法。 (我省略了一些上下文,但这不应该是路障。)

var len = me.gjson.datastr[me.reader_root].length;
for (var i=len-1; i>-1; i--) {
    var one_node = jQuery(me.gid).getInd(i+1,true);
    one_node._id_ = one_node.id;
    if (parseInt(me.gjson.datastr[me.reader_root][i].level)<me.expand_level) {
        jQuery(me.gid).jqGrid('expandNode',one_node);
    } else {
        jQuery(me.gid).jqGrid('collapseNode',one_node);
    }
}

for (var i=0; i<len; i++) {
    var one_node = jQuery(me.gid).getInd(i+1,true);
    one_node._id_ = one_node.id;
    if (parseInt(me.gjson.datastr[me.reader_root][i].level)<me.expand_level+1) {
        jQuery(me.gid).jqGrid('showRow',one_node);
    } else {
        jQuery(me.gid).jqGrid('hideRow',one_node);
    }
}

我追溯到jqGrid代码。它显示在collapseNode / expandNode中正确设置了“扩展”值。但是,当您单击顶层的三角形以折叠整个树时,值“已扩展”设置为其他值。那么,问题是可能的原因是什么?提前谢谢。

1 个答案:

答案 0 :(得分:0)

自己有一个肮脏的解决方案。我在collapseNode和expandNode中添加了2行。

expandNode : function(rc) {
    return this.each(function(){
        if(!this.grid || !this.p.treeGrid) {return;}
        var expanded = this.p.treeReader.expanded_field,
        parent = this.p.treeReader.parent_id_field,
        loaded = this.p.treeReader.loaded,
        level = this.p.treeReader.level_field,
        lft = this.p.treeReader.left_field,
        rgt = this.p.treeReader.right_field;

        if(!rc[expanded]) {
            var id = $.jgrid.getAccessor(rc,this.p.localReader.id);
            var rc1 = $("#"+$.jgrid.jqID(id),this.grid.bDiv)[0];
            var position = this.p._index[id];
            if( $(this).jqGrid("isNodeLoaded",this.p.data[position]) ) {
                rc[expanded] = true;
                this.p.data[position][expanded] = true; // <--- add this line in jqgrid.src.js
                $("div.treeclick",rc1).removeClass(this.p.treeIcons.plus+" tree-plus").addClass(this.p.treeIcons.minus+" tree-minus");
            } else if (!this.grid.hDiv.loading) {
                rc[expanded] = true;
                $("div.treeclick",rc1).removeClass(this.p.treeIcons.plus+" tree-plus").addClass(this.p.treeIcons.minus+" tree-minus");
                this.p.treeANode = rc1.rowIndex;
                this.p.datatype = this.p.treedatatype;
                if(this.p.treeGridModel == 'nested') {
                    $(this).jqGrid("setGridParam",{postData:{nodeid:id,n_left:rc[lft],n_right:rc[rgt],n_level:rc[level]}});
                } else {
                    $(this).jqGrid("setGridParam",{postData:{nodeid:id,parentid:rc[parent],n_level:rc[level]}} );
                }
                $(this).trigger("reloadGrid");
                rc[loaded] = true;
                if(this.p.treeGridModel == 'nested') {
                    $(this).jqGrid("setGridParam",{postData:{nodeid:'',n_left:'',n_right:'',n_level:''}});
                } else {
                    $(this).jqGrid("setGridParam",{postData:{nodeid:'',parentid:'',n_level:''}}); 
                }
            }
        }
    });
},
collapseNode : function(rc) {
    return this.each(function(){
        if(!this.grid || !this.p.treeGrid) {return;}
        var expanded = this.p.treeReader.expanded_field;
        if(rc[expanded]) {
            rc[expanded] = false;
            var id = $.jgrid.getAccessor(rc,this.p.localReader.id);
            this.p.data[this.p._index[id]][expanded] = false; // <--- add this line in jqgrid.src.js                
            var rc1 = $("#"+$.jgrid.jqID(id),this.grid.bDiv)[0];
            $("div.treeclick",rc1).removeClass(this.p.treeIcons.minus+" tree-minus").addClass(this.p.treeIcons.plus+" tree-plus");
        }
    });
},
顺便说一句,不要问我为什么需要这两行。我不知道自己。这就像家庭主妇通过将电线与颜色匹配来修复短路。但是,她可能不知道短路意味着什么。