EasyUI Tree 树

 

一、EasyUI Tree 树：http://www.jeasyui.net/plugins/185.html

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

用法

树（tree）定义在

元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的
• 元素。
  属性

  每个节点可以包括下列属性：

  • id：节点的 id，它对于加载远程数据很重要。
  • text：要显示的节点文本。
  • state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
  • checked：指示节点是否被选中。
  • attributes：给一个节点添加的自定义属性。
  • children：定义了一些子节点的节点数组。
  • iconCls：用来显示图标的 css class。
  • target：目标的 DOM 对象。这个是回调时用的！

  1、树的基本用法

  	
  
  		
  
  	
  
  --index.js--
  $(function(){	
  	$("#tt").tree({
  		data: [
  			{id:0,text:"全部",children:[
  				{id:"1",text:"node1"},
  				{id: 2, text:"node2"},
  				{id:"3", checked:true,text:"node3"}, //复选框有效可用checked属性
  				{id:"5",text:"node4",children:[
  					{id:"5",text:"node4-1",iconCls:"icon-save"},
  					{id:"6",text:"node4-1"}
  				]}
  			]}
  		],
  		dnd: true, //可拖放
  		lines: true, //显示树线条
  		checkbox: true, //显示复选框
  		animate: true //展开动画效果
  	});
  	
  });

   1：       2：

  2、格式化树节点和过滤树节点   

  formatterfunction(node)定义如何呈现节点文本。 代码实例：
  1. $('#tt').tree({
  2. formatter:function(node){
  3. return node.text;
  4. }
  5. });
   loadFilterfunction(data,parent)返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数： data：要加载的原始数据。 parent：DOM 对象，表示父节点。

    在1中添加如下js

  		animate: true, //展开动画效果
  		formatter: function(node){	//格式化节点，参数node：为tree所有节点
  			var ftext = node.text;
  			if (node.children){
  				ftext += ' (' + node.children.length + ')';
  			}
  			return ftext;
  		},
  		loadFilter: function(data){ //对显示节点过滤，data：要加载的原始数据。
  			for(var i=0; i