2013-02-20 47 views
0

這是jQuery jqGrid的一個問題。我們需要一個函數來將treegrid擴展到某個級別。我試着直接使用collapseRow,expandRow,collapseNode和expandRow。但是,collapseRow/expandRow是遞歸的。所以,在每一行調用這些函數真的很慢。因此,我向jqgrid添加了hideRow和showRow函數。我成功地展開並將樹倒塌到了一定的水平。但是,當樹擴展到第3級時,如果通過單擊頂層三角形來關閉樹。一些展開的行仍然存在。jquery jqgrid treegrid展開到特定級別

這是我在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中正確設置了「expanded」值。但是,當您單擊頂層的三角形以摺疊整棵樹時,值「expanded」被設置爲其他值。所以,問題是可能的原因是什麼?提前致謝。

回答

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"); 
     } 
    }); 
}, 

順便說一句,不要問我爲什麼我們需要這兩行。我不認識我自己。這就像一位家庭主婦通過將電線與顏色相匹配來固定短路。但是,她可能不知道短路是什麼意思。