easyui treegrid动态加载树形列表

TreeGrid是一种DHTML控件，其完全使用JavaScript语言编写，用以在HTML页面上展示具有层次结构的数据项，其核心技术为多叉树。例如

 $('#tt').treegrid({

nowrap: false,

   rownumbers: true,

   animate:true,

   collapsible:true,

   loadMsg:'数据加载中……', 

   url:'getRooturl',

   onBeforeLoad:function(row,param){

       // 此处就是异步加载地所在

       if (row){

        $(this).treegrid('options').url = '${getSecondRooturl}?testId='+row.testId;

       } else {

        $(this).treegrid('options').url = '${getRooturl}';

       }

      },

      onClickRow:function(){

       /**

       ** 如果是新建或者修改，以及删除，则清除查询form表单数据 

       **/

       $('#materialSearch').form('clear');

      },

      idField:'id',

      treeField:'name',

      frozenColumns:[[

               {title:'名称',field:'name',width:250}

         ]],

   columns:[[

      {

field:'desc',

title:'描述',

align: 'center',

width:120

},{

field:'url',

title:'地址',

width:300

},{

field:'imgurl',

title:'图标',

align: 'center',

width:40,

 
formatter:function(value,row,index){

                         var e = '<img src="' + value + '" width="20" height="20" />';

                         return e;

                    }

},{

                    title: '操作',

                    field: 'id',

                    align: 'center',

                    formatter:function(value,row,index){  

                   

                 
 var e = '<a href="editurl?id='+row.id+'" )>编辑</a> '; 

                 
 

                 

                      return e;  

                  }

                }

   ]],

   onLoadSuccess: function () {  $('#tt').treegrid('collapseAll')}

});

 
 

 

easyui treegrid使用时需注意： 

1、必须要有根节点; 

2、父节点装载的数据格式和子节点装载的数据格式 是不一样的。 

父节点需要total和rows 而子节点装载的时候和tree的数据格式相同。 

3.

生成的json对象中必须包含state属性值为“closed”/“open”,

    closed：表示有子节点。

    open：表示没有子节点。

如果为根节点则不能有_parentId字段，如果为子节点则必须包含_parentId字段。