easyUI的课程表练习

初入公司，经过简单培训，现要求我们自己动手实现课程表的查询，以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>

源码下载地址：点击这里