Easy UI框架_esyiu-CSDN博客

本文链接：https://blog.csdn.net/qq_42542609/article/details/104259314

这里只是初步了解
文中括号内容是复习时提醒自己的
1.下载EasyUi
（放在了c/professionalapp/easyUi里，里面有个EasyUi，是课程中用到的，直接复制就行）
把所需easyUi资源复制粘贴到新建的web工程下的WEB-INF目录下
在这里插入图片描述

layout控件

webRoot下新建一个jsp页面layout.jsp
1.在head里进行引入
引入时要注意顺序

<link href="EasyUI/themes/default/easyui.css" rel="stylesheet"
	type="text/css" />
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css" />
<script src="EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>

body里写

<div class="easyui-layout" style="width: 700px; height: 350px;">
		<div data-options="region:'north'" style="height: 50px">这是北区north</div>
		<div data-options="region:'south',split:true" style="height: 50px;">这是南区south</div>
		<div data-options="region:'east',split:true" title="East"
			style="width: 100px;">这是东区east</div>
		<div data-options="region:'west',split:true" title="West"
			style="width: 100px;">这是西区west</div>
		<div
			data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			这是中区center</div>
	</div>

运行一下
在这里插入图片描述
（其中组件可以改变大小，隐藏，可以运行下再看看，然后对比使用）

Tabs空间

使用Tabs控件可以实现选项卡布局，一般用于中部选项卡
引入文件部分不变

<body>
<div class="easyui-layout" style="width: 700px; height: 350px;">
		<div class="easyui-tabs" style="width: 700px; height: 250px">
		<div title="选项卡1" style="padding: 10px">页面1</div>
		<div title="选项卡2" style="padding: 10px">页面2</div>
		<div title="选项卡3" data-options="iconCls:'icon-help',closable:true"
			style="padding: 10px">页面3</div>
	</div>
</body>

在这里插入图片描述

Tree控件

<body>	
	<!-- 定义ul -->
	<ul id="tt"></ul>
	<script type="text/javascript">
		// 为Tree控件指定数据源
		$('#tt').tree({
			url : 'tree_data.json'
		});
	</script>
</body>

在同一目录下放入url的tree_data.json文件，内容如下

[
    {
        "id": 1,
        "text": "订餐系统管理后台",
        "fid": 0,
        "children": [
            {
                "id": 2,
                "text": "餐品管理",
                "fid": 0,
                "children": [
                    {
                        "id": 3,
                        "text": "餐品列表",
                        "fid": 0
                    },
                    {
                        "id": 4,
                        "text": "餐品类型列表",
                        "fid": 0
                    }
                ]
            }, {
                "id": 12,
                "text": "退出系统",
                "fid": 0
            }
        ]
    }
]

运行结果
在这里插入图片描述
其实也就那样吧，之前学过bootstrap，那个会更好看一点，但另一方面，这个有js效果，bootstrap当时也只是初步学习，可能也有这样的效果，但我没注意。
（这个真用的话还是要看看源码，毕竟这ui功能虽有，也很简单，但，丑了点。
目前学这个是因为后面第一个实例项目会用到，还是要初步过一遍的）
还有一点：他的数据源时json文件，这个之前做项目的时候没有用过，他之后应该会把数据库拿出来的东西变成json格式文件，然后作为前端ui的数据源，这个操作到时候多留心

DataGrid

在这里插入图片描述

<table id="newsinfoDg" class="easyui-datagrid"></table>
	<script type="text/javascript">
		// 自执行函数
		$(function() {
			$('#newsinfoDg').datagrid({
				fit : true,
				fitColumn : true,
				rownumbers : true,
				singleSelect : false,
				url : 'datagrid_data.txt',
				columns : [ [ {
					title : '',
					field : 'productid',
					align : 'center',
					checkbox : true
				}, {
					field : 'unitcost',
					title : 'unitcost',
					width : 50
				}, {
					field : 'status',
					title : 'status',
					width : 60
				}, {
					field : 'listprice',
					title : 'listprice',
					width : 50
				}, {
					field : 'attr1',
					title : 'attr1',
					width : 200
				}, {
					field : 'itemid',
					title : 'itemid',
					width : 100
				} ] ]
			});
		});
	</script>


[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}]