treeGrid 详细参数

treeGrid 详细参数

 

一、html页面
<table id="tg" class="easyui-treegridprive-table"
 

        data-options="iconCls: 'icon-ok',rownumbers: true,animate:true,collapsible:true,fitColumns: true,url:'treegrid_data2.json',method: 'get',
             idField:'id',treeField: 'name',loadFilter: pagerFilter,
             pagination:true, pageSize: 2,  onClickRow: clickTest,pageList: [2,5,10]
         ">
      <thead>
         <tr>
            <thdata-options="field:'name',width:20">TaskName</th>
            <thdata-options="field:'persons',width:20,align:'right'">Persons</th>
            <thdata-options="field:'begin',width:20">BeginDate</th>
            <thdata-options="field:'end',width:10">EndDate</th>
            <thdata-options="field:'progress',width:20,formatter:formatProgress">Progress</th>
            <thdata-options="field:'id',width:10,formatter:formatOptions">操作</th>
         </tr>
      </thead>
   </table>Task NamePersonsBegin DateEnd DateProgress操作
二、参数说明

其特性扩展自 datagrid，下列是为 treegrid 增加的特性。 

名称类型说明默认值treeFieldstring定义树节点的字段nullanimateboolean定义当节点展开或折叠时是否显示动画效果false其事件扩展自 datagrid，下列是为 treegrid 增加的事件
名称参数说明onClickRowrow当用户点击一个节点时触发onDblClickRowrow当用户双击一个节点时触发onBeforeLoadrow, param发出一个加载数据的请求前触发，返回 false 就取消加载动作onLoadSuccessrow, data当数据加载成功时触发onLoadErrorarguments当数据加载失败时触发， arguments 参数和 jQuery.ajax 的 'error' 方法一样onBeforeExpandrow节点展开前触发，返回 false 就取消展开动作onExpandrow节点展开前触发onBeforeCollapserow节点折叠前触发，返回 false 就取消折叠动作onCollapserow节点折叠前触发onContextMenue,row当右键点击节点时触发onBeforeEditrow当用户开始编辑节点时触发onAfterEditrow,changes当用户完成编辑时触发onCancelEditrow当用户取消编辑节点时触发方法
名称参数说明optionsnone返回 treegrid 的optionsresizeoptions设置 treegrid 的尺寸， options 参数包含两个特性：
width： treegrid 的新宽度。
height： treegrid 的新高度fixRowHeightid适应指定行的高度loadDatadata加载 treegrid 的数据reloadid重新加载 treegrid 的数据reloadFooterfooter重新加载脚部数据getDatanone获取加载的数据getFooterRowsnone获取脚部数据getRootnone获取根节点，返回节点对象getRootsnone获取根节点们，返回节点数据getParentid获取父节点getChildrenid获取子节点们getSelectednone获取选中的节点并返回它，如果没有选中节点就返回 nullgetSelectionsnone获取所有的选中节点们getLevelid获取指定节点的层级findid找到指定节点并返回此节点数据selectid选择节点unselectid取消选择节点selectAllnone选择全部节点unselectAllnone取消选择全部节点collapseid折叠节点expandid展开节点collapseAllid折叠全部节点expandAllid展开全部节点expandToid从根部展开一个指定的节点toggleid切换节点的展开/折叠状态appendparam追加节点们到父节点。 param 参数包含下列特性：
parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点们的数据removeid移除节点和它的子节点们refreshid刷新指定的节点endEditid结束编辑节点beginEditid开始编辑节点cancelEditid取消编辑节点getEditorsid获取指定行的编辑器们。每个编辑器有下列特性：
actions：编辑器可以做的动作们。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型getEditoroptions获取指定的编辑器， options 参数包含两个特性：
id：行节点的 id。(注意：如不生效使用index：id，目前官网文档错误，虽然取id的值，但要用index属性)
field：字段名
操作：var t = $('#tg');
             var ed = t.treegrid('getEditor',{index:editingIndex,field:"name"});
             var val=$(ed.target).val();
三、部分js
// 动态加载查询
    functiontestm(){
      $.post('treegrid_data3.json',{id:123},function(data){
        $('#tg').treegrid('loadData',data);
      },'json');
    }
   
   //设置页面分页
    functionpagerFilter(data){
         //alert(data);
          if($.isArray(data)){   // is array 
              data = { 
                  total: 5,//data.length, 
                  rows: data 
              } 
          }
          var dg = $(this); 
       var state =dg.data('treegrid');
          var opts = dg.treegrid('options'); 
          var pager = dg.treegrid('getPager'); 
          pager.pagination({ 
              onSelectPage:function(pageNum, pageSize){ 
                  opts.pageNumber = pageNum; 
                  opts.pageSize = pageSize; 
                  pager.pagination('refresh',{ 
                      pageNumber:pageNum, 
                      pageSize:pageSize 
                  }); 
                  dg.treegrid('loadData',data); 
              } 
          }); 
          if (!data.topRows){ 
              data.topRows= [];
             data.childRows = [];
              for(var i=0;i
                 var row =data.rows[i];
                row._parentId ? data.childRows.push(row) :data.topRows.push(row);
              }
          data.total =(data.topRows.length);
          } 
          var start =(opts.pageNumber-1)*parseInt(opts.pageSize); 
          var end = start + parseInt(opts.pageSize); 
       data.rows =$.extend(true,[],data.topRows.slice(start,end).concat(data.childRows));
       returndata;
    }
    functionformatProgress(value){
      if (value){
          var s ='<div style="width:100%;border:1px solid#ccc">' +
               '<div style="width:' + value +'%;background:#cc0000;color:#fff">' + value + '%' +'</div>'+
               '</div>';
          returns;
       } else{
          return'';
       }
    }
//字段处理
    functionformatOptions(value,row){
       if(value){
          var s ='<a href="javascript:alert(' + value + ');"class="opts" id="' + value + '" ><iclass="icon-">&#xf044;</i></a>&nbsp;&nbsp;'+
               '<a href="#" class="opts" id="' + value + '"><iclass="icon-">&#xf014;</i></a>';
          returns;
       } else{
          return'';
       }
    }
四、数据格式
treegrid_data2.json
{
"rows":[
   {"id":1,"name":"AllTasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
   {"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
   {"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
   {"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
   {"id":23,"name":"ExportDocument","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
   {"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
   {"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
]
}