EasyUi——快速入门2

最新推荐文章于 2024-11-02 15:48:17 发布

名字太难～

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量123

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/m0_67888923/article/details/124597803

版权

本文档介绍了EasyUI的全局path定义、页面缓存管理和Postman接口测试工具的使用。重点讲解了如何实现Tree组件的JSON数据绑定，动态添加选项卡的功能，以及树控件的数据格式化，包括节点的ID、文本、状态和自定义属性等。

摘要由CSDN通过智能技术生成

文章目录

一、全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面

	<base href = "${pageContext.request.servletContext.contextPath}/static/">	

	var globalPath = "${pageContext.request.servletContext.contextPath}";

二、页面缓存

<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">

三、postman使用

接口测试工具；postman发送请求给服务器，然后从服务器接受响应，最后在postman中展示出来。

四、tree组件实现JSON数据绑定

标签实现——不推荐
    JSON实现
	$('#tt').tree({    
    		url:'tree_data.json'   
	});

五、动态添加选项卡

$(function(){
			//绑定属性菜单绑定数据
			$("#menuTree").tree({    
				//实际开发中这里应该获取的是后台的数据（从servlet中获取）
			    url:'tree_data.json',
			    //在用户点击一个节点的时候触发。
			    onClick: function(node){
					//alert(node.text);  // 在用户点击的时候提示
					console.log(node.id,node.text,node.children);
					if(node.id === "-1"){
						return;
					}
					//判断选项卡是否存在选中
					var flag = $("#tabs_index").tabs('exists',node.text);
					//alert(flag);
					if(flag){
						$("#tabs_index").tabs('select',node.text);
						return;
					}
					
			    	// 添加一个未选中状态的选项卡面板
			    	$('#tabs_index').tabs('add',{
			    		title: node.text,
			    		content:node.text,
			    		closable:true,  
			    	});
				}
			});  
		});

六、Tree（树）

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

<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>  

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

七、树控件数据格式化

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

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#"   
    }]    
}]