关于treegrid与combotree的使用

• 最重要的一点应该是返回的数据类型与格式，如果不正确是得不到树形的结构的，或者得到undefined

treegrid

属性 类型 描述 idField string 定义关键字段来标识树节点（必须的） treeField string 定义树节点字段（必须的）

可以分为2种
1. 懒加载：点击一下节点加载一部分，点一下继续加载
2. 直接一次性全部加载好

懒加载

• 点击一次加载一次，不会直接把所有数据查出来，提高效率

  $("#treegrid").treegrid({url:'area/queryLazyData.do',pagination : true, //分页rownumbers : true,// 行数queryParams:{    },striped : true,// 奇偶行颜色区分pagePosition : 'bottom',checkOnSelect : true,selectOnCheck : true,singleSelect : true,fitColumns : true,border : false,pagination : true,//定义关键字段来标识树节点idField : 'DM',//定义树节点字段treeField:'DMMC',fit : true,loadMsg : '数据加载中请稍后...',columns : columns,toolbar : '#toolbar',//懒加载，展开前把url更换为查询子节点的urlonBeforeExpand : function(row){    var url = "area/areaNode.do";    $("#treegrid").treegrid("options").url = url;    return true;},//这个就是树形菜单加载鼠标右键菜单的代码onContextMenu: function(e,row){                  e.preventDefault();    //屏蔽浏览器的菜单    $(this).treegrid('unselectAll');    //清除所有选中项    $(this).treegrid('select', row.DM);    //选中状态     if(userAreaDm == row.DM){        //最上一级不能修改或者删除        $('#menu').menu('disableItem',$('#xg')[0]);        $('#menu').menu('disableItem',$('#sc')[0]);    }else{              $('#menu').menu('enableItem',$('#xg')[0]);        $('#menu').menu('enableItem',$('#sc')[0]);    }                   $('#menu').menu('show', {    left: e.pageX,    top: e.pageY    });},onLoadSuccess : function(row,data){//加载完成后一定要还原查询的url，不然又会去onBeforeExpand里面的url    var url = "area/queryLazyData.do";   $("#treegrid").treegrid("options").url = url;},              

  });
  });

  ★返回的JSON格式为:[{      "DM":"000086",    "DMMC":"中国",    "state":"open",    "children":[{            "DM":"510000",            "YXBZ":"1",            "DMMC":"四川省",            "DM_SJ":"000086",            "state":"closed",            },            {            "DM":"110000",            "YXBZ":"1",            "DMMC":"北京",            "DM_SJ":"000086",            "state":"closed"}]

  }]
  ★注：大部分返回以后是undefined的都是返回的数据格式不正确，state：表示这个节点的展开状态(必须要有)，open表示展开，closed表示关闭。children表示该节点的子节点，由于是懒加载，所以它的节点不需要children，点击时再去查

一次性加载

    主要就是返回的JSON数据不一样    由于一次性加载，所以需要一次把所有数据的加载返回    返回的JSON格式为:     [{          "DM":"000086",        "DMMC":"中国",        "state":"open",        "children":[{                "DM":"510000",                "YXBZ":"1",                "DMMC":"四川省",                "DM_SJ":"000086",                "state":"closed",                "children":[{                     "DM":"123000",                     "YXBZ":"1",                     "DMMC":"成都市",                     "DM_SJ":"510000",                     "state":"closed",                     "children":[{                        "DM":"022354",                        "YXBZ":"1",                        "DMMC":"武侯区",                        "DM_SJ":"123000",                        "state":"open",                        "children":[{}]                     }]                 }}                },                {                "DM":"110000",                "YXBZ":"1",                "DMMC":"北京",                "DM_SJ":"000086",                "state":"closed",                "children":[{}]                }]}]//一次性加载并展开到固定节点(这里是只展开根节点)    1.得到数据后先折叠所有节点        $("#treegrid").treegrid('collapseAll');    2.得到要展开节点的id(这里是根节点id)        var id = $("#treegrid").treegrid('getRoot').id;    3.展开指定节点(expandTo这个是从根节点展开到指定的节点)        $("#treegrid").treegrid('expand',id);

combotree

• 懒加载和一次性加载基本与上面的一样，要注意的是这个返回的json格式的数据不能指定idField与treeField，所以只能按api上面介绍的格式，只能返回id与text，否则undefined

  [{
  “id”: 1,
  “text”: “Node 1”,
  “state”: “closed”,
  “children”: [{
  “id”: 11,
  “text”: “Node 11”
  },{
  “id”: 12,
  “text”: “Node 12”
  }]
  },{
  “id”: 2,
  “text”: “Node 2”,
  “state”: “closed”
  }]