EasyUI学习笔记 -- day02 树和表格的实现

最新推荐文章于 2024-11-01 18:31:52 发布

DJTUDaker

最新推荐文章于 2024-11-01 18:31:52 发布

阅读量885

点赞数

分类专栏： HTML 文章标签： easyui

本文链接：https://blog.csdn.net/wingzhezhe/article/details/53239922

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：使用easyui实现树结构

1.树的实现代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">

	<script type="text/javascript">
		$(function(){
			$("#jtree").tree({
				url:"tree-data.json",//树的json格式的数据，实际中应该是调用方法从后台查询的
				animate:true, //执行动画效果
				onBeforeExpand:function(node){
					//点击节点之前触发的事件,node为当前节点
				},
				lines:true,//显示虚线
				checkbox:true, //显示复选框
				dnd:true, //节点可拖动
				onclick:function(node){
					//点击事件
				}
			})
		}); 
	</script>

<title>Insert title here</title>
</head>
<body>

	<!-- 实现树结构 -->	
	<ul id="jtree"></ul>
</body>
</html>

2.数据的格式

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

二：通过easyui实现表格数据

1.表格数据的json格式

{
	"total":330,
	"rows":[
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"},
		{"codeNum":"G89","startStation":"北京/郑州","startTime":"12:56<br>15:29","totalTime":"4小时","swz":"有",
		"tdz":"有","edz":"有","noz":"-","remark":"<a id='btn' href='#'>预定</a>"}
	]
}

2.表格数据的实现代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">
	
	<!-- 引入国际化文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function(){
			$("#table_grid").datagrid({
				url:"${pageContext.request.contextPath}/view/datagrid.json",
				columns:[[
					{field:'codeNum',title:'车次',width:100,checkbox:true},//checkbox:添加复选框
					{field:'startStation',title:'出发站<br>到达站',width:100},
					{field:'startTime',title:'出发时间<br>到达时间',width:100},
					{field:'totalTime',title:'历时',width:100},
					{field:'swz',title:'商务座',width:100},
					{field:'tdz',title:'特等座',width:100},
					{field:'edz',title:'二等座',width:100},
					{field:'noz',title:'无座',width:100},
					{field:'remark',title:'备注',width:100}
				]],
				toolbar:[
				    {
						iconCls:'icon-edit',
						text:"编辑",
						handler:function(){
							alert("点击按钮触发事件");
						}
					},{
					
					}
				],
				onLoadSuccess:function(){
					//数据加载完毕后触发的事件
					$("a").linkbutton({
					})
				},
				pagination:true,//显示分页组件
				fitColumns:true, //表格自适应屏幕大小
				rownumbers:true, //显示行号
				singleSelect:true,	//每次只允许选中一行
				loadMsg:"加载中，请稍候"	//显示加载时提示信息
			})
		})
	</script>

<title>Insert title here</title>
</head>
</style>
<body>
	<table id="table_grid"></table>
		
</body>
</html>