当前位置：首页 > news >正文

dz网站建设器seo全网营销公司

news 2025/9/22 8:29:47

dz网站建设器,seo全网营销公司,茌平企业做网站推广,用哪个软件做网站这里只是初步了解文中括号内容是复习时提醒自己的 1.下载EasyUi （放在了c/professionalapp/easyUi里，里面有个EasyUi，是课程中用到的，直接复制就行） 把所需easyUi资源复制粘贴到新建的web工程下的WEB-INF目录下 lay…

这里只是初步了解
文中括号内容是复习时提醒自己的
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"}]