照片后期网站长沙网络推广公司
这里只是初步了解
文中括号内容是复习时提醒自己的
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><divdata-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"}]
(复习的时候自己找对应规律）
之后做项目会用到一点，到时候再深入了解下