jqgrid treegird的实践

jqGrid  4.5.4 - jQuery Grid

1.项目目录如下

2.页面如下

<1>本身打算实现如图所示功能

 $(function(){
      
      $.fn.fmatter.checkTextFormat = function(cellvalue, opts, rowObject){
       
        var op = $.extend({},opts.checkbox), ds;
if(opts.colModel !== undefined && opts.colModel.formatoptions !== undefined) {
op = $.extend({},op,opts.colModel.formatoptions);
}
if(op.disabled===true) {ds = "disabled=\"disabled\"";} else {ds="";}
if($.fmatter.isEmpty(cellvalue) || cellvalue === undefined ) {cellvalue = $.fn.fmatter.defaultFormat(cellvalue,op);}
cellvalue=String(cellvalue);
cellvalue=(cellvalue+"").toLowerCase();
var bchk = (rowObject.isChecked == "1" ? " checked='checked' " : "");
return "<input type=\"checkbox\" " + bchk  + " value=\""+ cellvalue+"\" offval=\"no\" "+ds+ "/>" + cellvalue;
      }
   
       $.unformat.checkTextFormat = function (cellvalue, options, cell){
      var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes","No"];
  var ret = $('input',cellvalue).is(":checked") ? cbv[0] : cbv[1];
  return ret;
       } 
   
   });
   

首先自定义formatter,但是当通过getRowData获取数据的时候，是获取的原始页面元素,查看源码发现如下:

if($t.p.treeGrid===true && nm === $t.p.ExpandColumn) {
res[nm] = $.jgrid.htmlDecode($("span:first",this).html());     //注意此处
} else {
try {
res[nm] = $.unformat.call($t,this,{rowId:ind.id, colModel:$t.p.colModel[i]},i);
} catch (e){
res[nm] = $.jgrid.htmlDecode($(this).html());
}
}

如果是树节点，则不调用格式化，所以会是原始页面。因为源码过大，如果修改可能导致其他问题，所以没有修改，而是在扩展列前放置一个checkbox列，如果达不到要求会考虑修改源码。

页面其余源码

 function deleteTreeNode(){
  jQuery("#treegrid").delTreeNode(2);
   }
   
   function setTreeNode(){
       jQuery("#treegrid").setTreeRow("1",{"id":1,"username":"two222"});
   }
   
   
   function getSelected(){
     
   
      var rows= jQuery("#treegrid").jqGrid('getRowData');
      console.log(rows);
      
      var paras=new Array();
      for(var i=0;i<rows.length;i++){
         var row=rows[i];
         
         
         alert($.param(row));
         paras.push($.param(row));
     }
   }