初入公司,经过简单培训,现要求我们自己动手实现课程表的查询,以easyUI+springMVC+hibernate,为框架基础。笔者数据库使用的是oracle。![实现结果如下](https://img-blog.csdn.net/20170731164840502?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU0Mzc1ODM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
此篇文章主要讲的是前端的构建,用于自己回顾,框架的配置,后面会补。
easyUI有其自己的特点,一个功能有两种方式来实现,可以直接在 HTML 声明组件,也可以编写 JavaScript 代码来创建组件。由于是自己的小练习,我两种方法都用到了,代码可能会有点乱,望谅解。
在easyUI官网下载工具包,在新建的jsp文件中引入样式:
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
自己存放的路径不同,也需要改正。我直接放入的WebContent下面。
个人感觉,从大往小的说比较容易懂,因此先从布局说起,整个页面分为东南西北中五个部分,当然其中可以嵌套,才能组合成为预期的页面,这里只用到西和中。
<div region="west" split="true" style="width:220px" title="课程类别" >
<!-- 课程列表 -->
<ul id="tt" class="easyui-tree"></ul>
</div>
west部分为一个树结构,因此在这里引用了名为“tt”的树,具体在js中定义如下:
$('#tt').tree({
url:'/Course/com/CourseList.action',
lines:true,
onBeforeSelect:function(node){
var isLeaf=$('#s_id').tree('isLeaf',node.target);
if(!isLeaf){
$.messager.alert("提示信息", "请选择课程!","error");
return false;
}
},
onClick:function(isLeaf){
if (isLeaf) {
$('#dg').datagrid('reload', {
s_id:isLeaf.id
});
}
}
});
树主要有三个属性,id,text,parentid,顾名思义。在这里,数据库中表的创建一定要有这三个属性,后台我是使用了一个工具类直接把json格式的数据转换为固定格式,代码见源码。在叶子节点设置一个点击事件,来时先查询id相同的那些数据,因为主要回顾前端,后台代码可以在源码里找。
center部分使用table工具,在table中来显示数据库中的数据,这里的列属性对应数据库中的列。代码如下:
<table id="dg" title="课程信息" iconCls="icon-dingdan" toolbar="#tb"
class="easyui-datagrid" style="width:100%;height:100%;"
data-options="idField:'id',rownumbers:true,fitColumns:true,pagination:true,singleSelect:true,
collapsible:true,
url:'/Course/com/getStudentInfoPage.action',method:'post',
checkOnSelect:'true',selectOnCheck:'true'">
<!-- pagination:分页 singleselect:单选中 collapsible:收起,放下 -->
<!-- <div style="margin:20px 0;"></div> --> <!-- 上下滑,左右滑条 -->
<thead>
<tr>
<!-- <th checkbox="true"></th> //前面点钩 -->
<!-- <th data-options="field:'id',width:100">编 号</th>-->
<th data-options="field:'name',width:100">姓 名</th>
<th data-options="field:'sex',width:100" formatter="formatPrice">性 别</th>
<th data-options="field:'birth',width:100">生 日</th>
<!-- th data-options="field:'s_id',width:100">课程编号</th> -->
<th data-options="field:'hobby',width:100">爱 好</th>
<th data-options="field:'s_id',width:100" formatter="formatPrice1">所选课程</th>
</tr>
</thead>
</table>
通过url路径访问到controller,来调用Service的方法,来实现查询。
在表单的上方设置一个工具类toolbar,这里我是用html标签来实现的,当然也可以用js。每个点击事件的方法在源码中,这里就不具体写了,代码如下:
<div id="tb"> <!-- 学生工具栏 -->
姓名查询: <input id="name" class="easyui-textbox" style="line-height:26px;border:1px solid #ccc"></input>
性别查询: <select id="sex" class="easyui-combobox" panelHeight="auto" style="width:100px">
<option value="">全部</option>
<option value="F">女</option>
<option value="M">男</option>
</select>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">查找</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="add()">增加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="update()">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()">删除</a>
</div>
代码:
<div id="win" class="easyui-window" style="width:400px;height:300px;padding:10px 70px"
closed="true" data-options="iconCls:'icon-save',modal:'true'" buttons="#win-buttons">
<!--<div class="ftitle">学生信息</div> -->
<form id="fm" method="post" > <!-- 学生编辑表单 -->
<div class="fitem" style="padding:5px 20px">
<label></label>
<input id="id" type="hidden" name="id" >
</div>
<div class="fitem" style="padding:5px 20px">
<label>姓 名:</label>
<input id="name" name="name" class="easyui-textbox" required="true" style="width:150px">
</div>
<div class="fitem" style="padding:5px 20px">
<label>性 别:</label>
<!-- <input id="sex" class="easyui-textbox" required="true"> -->
<select id="sex" name="sex" class="easyui-combobox" panelHeight="auto" style="width:150px">
<option value="F">女</option>
<option value="M">男</option>
</select>
</div>
<div class="fitem" style="padding:5px 20px">
<label>生 日:</label>
<input id="birth" name="birth" class="easyui-datebox" formatter required="true" style="width:150px">
</div>
<!-- <div class="fitem" style="padding:5px 20px">
<label>课 程:</label>
<input id="course_name" name="course_name" class="easyui-textbox" required="true" style="width:150px">
</div> -->
<div class="fitem" style="padding:5px 20px">
<label>课 程:</label>
<input id="s_id" name="s_id" class="easyui-textbox" required="true" style="width:150px">
</div>
<div class="fitem" style="padding:5px 20px">
<label>爱 好:</label>
<input id="hobby" name="hobby" class="easyui-textbox" required="true" style="width:150px">
</div>
<div id="win-buttons" style="padding:5px 20px">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" onclick="save()" style="width:90px">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#win').window('close')" style="width:90px">取消</a>
</div>
</form>
</div>
源码下载地址:点击这里