tree前端实现：

最新推荐文章于 2024-04-29 01:56:39 发布

落日飞行

最新推荐文章于 2024-04-29 01:56:39 发布

阅读量912

点赞数

文章标签： easyui 前端框架

本文链接：https://blog.csdn.net/m0_53151031/article/details/120228471

版权

前言：昨天与大家分享了EasyUI的基础知识，基础知识还是简单，倒是越到后面代码量就会越来越多，而今天跟大家分享的是tree前端实现。

一、目标：使用tree控件和tabs控件要达到的效果：

这个效果要用到tree控件以及tabs控件共同完成的效果，左边则是tree控件的实现效果，右边内容摘要的效果则是tabs控件实现的效果。

整体思路：

1、首先要在js文件专门建一个写js代码的file文件（index.js）

2、将我们需要的tree-data1-json文件导入到web—content中

3、最后新建两个要跳转的jsp界面来实现菜单点击效果。

二、tree控件的使用：

1、如何使用：（下面的tabs也是有这两种使用方法）

1、使用api使用手册进行操作：

2、使用demo进行操作 :

2、为了能实现效果，需要写如下代码：

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

以上的代码有写繁琐，有更简便的代码可以实现树状效果：树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据：

<ul id="tt"></ul>

js代码：

$('#tt').tree({    
    url:'tree_data.json'   
});

展现效果：

上面一些数据都是来自tree_data1.json:

[
	{
		"id": 1,
		"text": "My Documents",
		"chiladren": [
			{
				"id": 11,
				"text": "Photos",
				"state": "closed",
				"children": [
					{
						"id": 111,
						"text": "Friend"
					},
					{
						"id": 112,
						"text": "Wife"
					},
					{
						"id": 113,
						"text": "Company"
					}
				]
			},
			{
				"id": 12,
				"text": "Program Files",
				"children": [
					{
						"id": 121,
						"text": "Intel",
						"attributes": {
							"url": "demo1.jsp",
							"p2": "Custom Attribute2"
						}
					},
					{
						"id": 122,
						"text": "Java",
						"attributes": {
							"url": "demo2.jsp",
							"p2": "Custom Attribute2"
						}
					},
					{
						"id": 123,
						"text": "Microsoft Office"
					},
					{
						"id": 124,
						"text": "Games",
						"checked": true
					}
				]
			},
			{
				"id": 13,
				"text": "index.html"
			},
			{
				"id": 14,
				"text": "about.html"
			},
			{
				"id": 15,
				"text": "welcome.html"
			}
		]
	}
]

3、关于tree控件的其他知识：

1、树控件数据格式化：

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点

一些案列：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

2、异步树控件:

树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。例子如下：

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为'id'，通过URL发送到服务器上面检索子节点。

下面是从服务器端返回的数据。

[{
    "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"
}]

3、属性：

属性名	属性值类型	描述	默认值
url	string	检索远程数据的URL地址。	null
method	string	检索数据的HTTP方法。（POST / GET）	post
animate	boolean	定义节点在展开或折叠的时候是否显示动画效果。	false
checkbox	boolean	定义是否在每一个借点之前都显示复选框。	false
cascadeCheck	boolean	定义是否层叠选中状态。	true
onlyLeafCheck	boolean	定义是否只在末级节点之前显示复选框。	false
lines	boolean	定义是否显示树控件上的虚线。	false
dnd	boolean	定义是否启用拖拽功能。	false
data	array	节点数据加载。 $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] });	null
queryParams	object	在请求远程数据的时候增加查询参数并发送到服务器。（该属性自1.4版开始可用）	{}
formatter	function(node)	定义如何渲染节点的文本。代码示例： $('#tt').tree({ formatter:function(node){ return node.text; } });	false
filter	function(q,node)	定义如何过滤本地展示的数据，返回true将允许节点进行展示。（该属性自1.4.2版开始可用）	json loader
loader	function(param,success,error)	定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数： param：发送到远程服务器的参数对象。 success(data)：当检索数据成功的时候调用的回调函数。 error()：当检索数据失败的时候调用的回调函数。	json loader
loadFilter	function(data,parent)	返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数： data：加载的原始数据。 parent: DOM对象，代表父节点。

4、事件：

事件名	事件参数	描述
onClick	node	在用户点击一个节点的时候触发。代码示例： $('#tt').tree({ onClick: function(node){ alert(node.text); // 在用户点击的时候提示 } });
onDblClick	node	在用户双击一个节点的时候触发。
onBeforeLoad	node, param	在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccess	node, data	在数据加载成功以后触发。
onLoadError	arguments	在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpand	node	在节点展开之前触发，返回false可以取消展开操作。
onExpand	node	在节点展开的时候触发。
onBeforeCollapse	node	在节点折叠之前触发，返回false可以取消折叠操作。
onCollapse	node	在节点折叠的时候触发。
onBeforeCheck	node, checked	在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）
onCheck	node, checked	在用户点击勾选复选框的时候触发。
onBeforeSelect	node	在用户选择一个节点之前触发，返回false可以取消选择动作。
onSelect	node	在用户选择节点的时候触发。
onContextMenu	e, node	在右键点击节点的时候触发。代码示例： // 右键点击节点并显示快捷菜单 $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // 查找节点 $('#tt').tree('select', node.target); // 显示快捷菜单 $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); // 右键菜单定义如下： <div id="mm" class="easyui-menu" style="width:120px;"> <div οnclick="append()" data-options="iconCls:'icon-add'">追加</div> <div οnclick="remove()" data-options="iconCls:'icon-remove'">移除</div> </div>
onBeforeDrag	node	在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）
onStartDrag	node	在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）
onStopDrag	node	在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）
onDragEnter	target, source	在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。（该事件自1.3.2版开始可用）
onDragOver	target, source	在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。（该事件自1.3.2版开始可用）
onDragLeave	target, source	在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。（该事件自1.3.2版开始可用）
onBeforeDrop	target, source, point	在拖动一个节点之前触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。 point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。（该事件自1.3.3版开始可用）
onDrop	target, source, point	当节点位置被拖动时触发。 target：DOM对象，需要被拖动动的目标节点。 source：源节点。 point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onBeforeEdit	node	在编辑节点之前触发。
onAfterEdit	node	在编辑节点之后触发。
onCancelEdit	node	在取消编辑操作的时候触发。

5、方法：

方法名	方法参数	描述
options	none	返回树控件属性。
loadData	data	读取树控件数据。
getNode	target	获取指定节点对象。
getData	target	获取指定节点数据，包含它的子节点。
reload	target	重新载入树控件数据。
getRoot	nodeEl	获取通过“nodeEl”参数指定的节点的顶部父节点元素。（该方法自1.4版开始可用）
getRoots	none	获取所有根节点，返回节点数组。
getParent	target	获取父节点，'target'参数代表节点的DOM对象。
getChildren	target	获取所有子节点，'target'参数代表节点的DOM对象。
getChecked	state	获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。代码示例： var nodes = $('#tt').tree('getChecked'); // get checked nodes var nodes = $('#tt').tree('getChecked', 'unchecked'); // 获取未选择节点 var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 获取不确定的节点译者注：（1.3.4新增获取方式） var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelected	none	获取选择节点并返回它，如果未选择则返回null。
isLeaf	target	判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
find	id	查找指定节点并返回节点对象。代码示例： // 查找一个节点并选择它 var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target);
select	target	选择一个节点，'target'参数表示节点的DOM对象。
check	target	选中指定节点。
uncheck	target	取消选中指定节点。
collapse	target	折叠一个节点，'target'参数表示节点的DOM对象。
expand	target	展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器请求子节点的数据。
collapseAll	target	折叠所有节点。
expandAll	target	展开所有节点。
expandTo	target	打开从根节点到指定节点之间的所有节点。
scrollTo	target	滚动到指定节点。（该方法自1.3.4版开始可用）
append	param	追加若干子节点到一个父节点，param参数有2个属性： parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。 data：数组，节点数据。代码示例： // 追加若干个节点并选中他们 var selected = $('#tt').tree('getSelected'); $('#tt').tree('append', { parent: selected.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] });
toggle	target	打开或关闭节点的触发器，target参数是一个节点DOM对象。
insert	param	在一个指定节点之前或之后插入节点，'param'参数包含如下属性： before：DOM对象，在某个节点之前插入。 after：DOM对象，在某个节点之后插入。 data：对象，节点数据。下面的代码展示了如何将一个新节点插入到选择的节点之前： var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); } 译者注：（1.3.4新增获取方式） var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] }); }
remove	target	移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
pop	target	移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
update	param	更新指定节点。'param'参数包含以下属性： target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。代码示例： // 更新选择的节点文本 var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }
enableDnd	none	启用拖拽功能。
disableDnd	none	禁用拖拽功能。
beginEdit	target	开始编辑一个节点。
endEdit	target	结束编辑一个节点。
cancelEdit	target	取消编辑一个节点。
doFilter	text	过滤操作，和filter属性功能类似。（该方法自1.4.2版开始可用）代码示例： $('#tt').tree('doFilter', 'easyui'); $('#tt').tree('doFilter', ''); // 清除过滤器

4、关于tabs控件的其他知识：

1、为了能实现效果，需要写如下代码：

整体思路：

1、要给左栏菜单增加点击事件：

2、要运用tabs组件打开相应的界面

3、选项卡打开出现对应的界面

	<div data-options="region:'center',title:'内容摘要'"
		style="padding: 5px; background: #eee;">
		<div id="stuTabs" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div title="Tab1" style="padding: 20px; display: none;">tab1</div>
			<div title="Tab2" data-options="closable:true"
				style="overflow: auto; padding: 20px; display: none;">tab2</div>
			<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
				style="padding: 20px; display: none;">tab3</div>
		</div>
	</div>

js代码：

onClick : function(node) {
			// alert(node.text); // 在用户点击的时候提示
			var exists = $('#stuTabs').tabs('exists',node.text);
			if (exists) {
				$('#stuTabs').tabs('select',node.text);
			} else {
				$('#stuTabs').tabs('add', {
					title : node.text,
					content : node.text + 'Tab Body',
					closable : true,
					tools : [ {
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					} ]
				});
			}

展现效果：

在其中遇到了一些问题：

1、不能打开重复的tabs：

但是在操作过程中，当再次点击已经选中的选项卡时，会新增一个新的对应的选项卡：

解决思路：

1、拿到目前所有打开的tabs选项卡，与将要打开的选项卡进行对比。

2、存在---->true

不存在--->false

代码：

onClick : function(node) {
			// alert(node.text); // 在用户点击的时候提示
			var exists = $('#stuTabs').tabs('exists',node.text);
			if (exists) {
				$('#stuTabs').tabs('select',node.text);
			} else {
				$('#stuTabs').tabs('add', {
					title : node.text,
					content : node.text + 'Tab Body',
					closable : true,
					tools : [ {
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					} ]
				});
			}

2、点击已经出现的选项卡，再次点击菜单栏中的选项卡时，不能跳转到相应界面：

直接使用代码：

$('#stuTabs').tabs('select',node.text);

2、关于tabs其他知识：

2.1、属性：

属性名	属性值类型	描述	默认值
width	number	选项卡容器宽度。	auto
height	number	选项卡容器高度。	auto
plain	boolean	设置为true时，将不显示控制面板背景。	false
fit	boolean	设置为true时，选项卡的大小将铺满它所在的容器。	false
border	boolean	设置为true时，显示选项卡容器边框。	true
scrollIncrement	number	选项卡滚动条每次滚动的像素值。	100
scrollDuration	number	每次滚动动画持续的时间，单位：毫秒。	400
tools	array,selector	工具栏添加在选项卡面板头的左侧或右侧。可用的值有： 1. 一个工具菜单数组，每个工具选项都和linkbutton相同。 2. 一个指向<div/>容器工具菜单的选择器。代码示例：通过数组定义工具菜单。 $('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }] }); 通过存在的DOM容器定义工具菜单。 $('#tt').tabs({ tools:'#tab-tools' }); <div id="tab-tools"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> </div>	null
toolPosition	string	工具栏位置。可用值：'left','right'。（该属性自1.3.2版开始可用）	right
tabPosition	string	选项卡位置。可用值：'top','bottom','left','right'。（该属性自1.3.2版开始可用）	top
headerWidth	number	选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。（该属性自1.3.2版开始可用）	150
tabWidth	number	标签条的宽度。（该属性自1.3.4版开始可用）	auto
tabHeight	number	标签条的高度。（该属性自1.3.4版开始可用）	27
selected	number	初始化选中一个标签页。（该属性自1.3.5版开始可用）	0
showHeader	boolean	设置为true时，显示标签页标题。（该属性自1.3.5版开始可用）	true
justified	boolean	设置为true时，生成等宽标题选项卡。为true时：为false时：（该属性自1.4.2版开始可用）	false
narrow	boolean	设置为true时，删除选项卡标题之间的空间。为true时：为false时：（该属性自1.4.2版开始可用）	false
pill	boolean	设置为true时，选项卡标题样式改为气泡状。为true时：为false时：（该属性自1.4.2版开始可用）	false

2.2、事件：

事件名	事件参数	描述
onLoad	panel	在ajax选项卡面板加载完远程数据的时候触发。
onSelect	title,index	用户在选择一个选项卡面板的时候触发。
onUnselect	title,index	用户在取消选择一个选项卡面板的时候触发。（该属性自1.3.5版开始可用）
onBeforeClose	title,index	在选项卡面板关闭的时候触发，返回false取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。 $('#tt').tabs({ onBeforeClose: function(title){ return confirm('您确认想要关闭 ' + title); } }); // 使用异步确认对话框 $('#tt').tabs({ onBeforeClose: function(title,index){ var target = this; $.messager.confirm('确认','你确认想要关闭'+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // 允许现在关闭 $(target).tabs('close',index); opts.onBeforeClose = bc; // 还原事件函数 } }); return false; // 阻止关闭 } });
onClose	title,index	在用户关闭一个选项卡面板的时候触发。
onAdd	title,index	在添加一个新选项卡面板的时候触发。
onUpdate	title,index	在更新一个选项卡面板的时候触发。
onContextMenu	e, title,index	在右键点击一个选项卡面板的时候触发。

2.2、方法：

方法名	方法参数	描述
options	none	返回选项卡属性。
tabs	none	返回所有选项卡面板。
resize	none	调整选项卡容器大小和布局。
add	options	添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。添加一个非选中状态的选项卡面板时，记得设置'selected'属性为false。 // 添加一个未选中状态的选项卡面板 $('#tt').tabs('add',{ title: '新选项卡面板', selected: false //... }); （该功能自1.4.2版开始可用） // 在索引为2的位置上插入一个选项卡面板 $('#tt').tabs('add',{ title: '插入的选项卡面板', index: 2 });
close	which	关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。
getTab	which	获取指定选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
getTabIndex	tab	获取指定选项卡面板的索引。
getSelected	none	获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index);
select	which	选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
unselect	which	取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。（该方法自1.3.5版开始可用）
showHeader	none	显示选项卡的标签头。（该方法自1.3.5版开始可用）
hideHeader	none	隐藏选项卡的标签头。（该方法自1.3.5版开始可用）
showTool	none	显示工具栏。（该方法自1.4.3版开始可用）
hideTool	none	隐藏工具栏。（该方法自1.4.3版开始可用）
exists	which	表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
update	param	更新指定的选项卡面板，'param'参数包含2个属性： tab：要更新的选项卡面板。 type：更新类型，可用值有：'header', 'body', 'all'。（该参数自1.4.1版开始可用） options：面板的属性。代码示例： // 更新选择的面板的新标题和内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 $('#tt').tabs('update', { tab: tab, options: { title: '新标题', href: 'get_content.php' // 新内容的URL } }); // 调用 'refresh' 方法更新选项卡面板的内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 tab.panel('refresh', 'get_content.php');
enableTab	which	启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）代码示例： $('#tt').tabs('enableTab', 1); // 启用第二个选项卡面板 $('#tt').tabs('enableTab', 'Tab2'); // 启用标题为Tab2的选项卡面板
disableTab	which	禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）代码示例： $('#tt').tabs('disableTab', 1); // 禁用第二个选项卡面板
scrollBy	deltaX	滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。（该方法自1.3版开始可用）代码示例： // 滚动选项卡标题到左边 $('#tt').tabs('scroll', 10);

2.3、选项卡面板：

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名	属性值类型	描述	默认值
id	string	选项卡面板的ID属性。	null
title	string	选项卡面板的标题文本。
content	string	选项卡面板的内容。
href	string	从URL加载远程数据内容填充到选项卡面板。	null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。	true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题。	null
width	number	选项卡面板宽度。	auto
height	number	选项卡面板高度。	auto
collapsible	boolean	如果为true，则允许选项卡摺叠。	false

下面的是选项卡面板新增且独有的属性。

属性名	属性值类型	描述	默认值
closable	boolean	在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。	false
selected	boolean	在设置为true的时候，选项卡面板会被选中。	false
disabled	boolean	在设置为true的时候，选项卡面板会被禁用。（该属性自1.4.4版开始可用）	false

总结：今天分享的知识就到这里了，希望能够帮到大家，祝大家生活愉快！

落日飞行

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
tree前端实现：

前言：昨天与大家分享了EasyUI的基础知识，基础知识还是简单，倒是越到后面代码量就会越来越多，而今天跟大家分享的是tree前端实现。一、目标：使用tree控件和tabs控件要达到的效果：这个效果要用到tree控件以及tabs控件共同完成的效果，左边则是tree控件的实现效果，右边内容摘要的效果则是tabs控件实现的效果。整体思路： 1、首先要在js文件专门建一个写js代码的file文件（index.js） 2、将我们需要的t...
复制链接

扫一扫