常用的CSS框架

之前在写自己的个人网站的时候，由于自己Web前端不是特别好，于是就去找相关的CSS框架来搭建页面了。

找到以下这么一篇文章(列出了很多常用的CSS框架)：

http://w3schools.wang/report/top-UI-open-source-framework-summary.html

Bootstrap
Semantic-ui
Foundation
Materialize
Material-ui
Phantomjs
Pure
Flat-ui
Jquery-ui
React-bootstrap
Uikit
Metro-ui-css
Iview
Layui
Mui
Frozenui
AlloyUI
W3.CSS

本篇主要是记录我用过的CSS框架，并把之前写过的笔记进行整合一下。当然是不能面面俱到的...

jquery-easyUI

其实这个已经是比较早的了，只是之前学过了一点，做过笔记才拿到这里来。毕竟可能以后还是会用到的?

什么是easyUI

我们可以看官方对easyUI的介绍：

这里写图片描述

easyUI就是一个在Jquery的基础上封装了一些组件....我们在编写页面的时候，就可以直接使用这些组件...非常方便...easyUI多用于在后台的页面上...

在学习easyUI之前，我已经学过了bootstrap这么一个前端的框架了...因此学习easyUI并不困难....大多情况下，我们只要查询文档就可以找到对应的答案了。

easyUI快速入门

首先我们得去下载easyUI的资料...

然后在我们把对应的文件导入进去项目中，如下图：

这里写图片描述

在html文件的body标签内，写上如下的代码：



    <!-- 
        第一：写一个普通div标签
        第二：提倡为div标签取一个id属性，将来用jquery好定位
        第三：为普通div标签添加easyui组件的样式
              所有的easyui组件的样式均按如下格式设置：
              easyui-组件名
        第四：如果要用easyui组件自身的属性时，必须在普通标签上书写data-options属性名,
              内容为，key:value,key:value,如果value是string类型加引号，外面双引号，
              则里面单引号      
        注意：要在普通标签中书写data-options属性的前提是：在普通标签上加class="easyui-组件名" 
              属性值大小写均可     
    -->
    
    
    <div 
        id="xx" 
        class="easyui-panel" 
        style="width:500px;height:300px;padding:15px"
        title="我的面板"
        data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
    
        这是我的第一个EasyUI程序
        
    </div>

效果：

这里写图片描述

关于样式的属性我们都会在data-options这个属性上设置的。

除了指定 class="easyui-panel"这样的方式来使用easyUI的组件，我们还可以使用javascript的方式来动态生成...代码如下所示：


<div id="p2" style="padding:10px;">
    <p>panel content.</p>
</div>

<script type="text/javascript">
    $('#p2').panel({
        width: 500,
        height: 150,
        title: 'My Panel',
        border: true,
        collapsible: true
    });
</script>

在使用easyUI的组件的时候，默认的是英文格式的。如果我们想要变成是中文格式，可以到以下的目录找到对应的JS，在项目中导入进去就行了！

这里写图片描述

语法

这里写图片描述

layout布局

layout能够帮助我们布局..



        <!-- 布局 -->
        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
            
            <!-- 区域面板--北边 -->
            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
            
            <!-- 区域面板--南边 -->
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
            
            <!-- 区域面板--东边 -->
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
            
            <!-- 区域面板--西边 -->
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 区域面板--中间 -->
            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
            
        </div>
    
    
        <script type="text/javascript">
            //easyui调用方法的语法如下：$('selector').组件名('method',parameter); 
            
            //浏览器加载jsp页面时触发
            $(function(){
                //将北边折叠
                $('#layoutID').layout('collapse','north');
                //休息3秒
                window.setTimeout(function(){
                    //将南边折叠
                    $("#layoutID").layout("collapse","south");
                    //将北边展开
                    $('#layoutID').layout('expand','north');
                    window.setTimeout(function(){
                        //将南边展开
                        $("#layoutID").layout("expand","south");
                    },3000);
                    
                },3000);
            });
            
            
        </script>

这里写图片描述

嵌套

当然了，我们的页面不可能只有5个模块，可能还有很多子模块。我们是可以嵌套的。如以下的代码：


    <div id="layoutID" class="easyui-layout" data-options="fit:true">
    
        <!-- 北 -->
        <div data-options="region:'north'" style="height:100px"></div>
         
        <!-- 中 --> 
        <div data-options="region:'center'">
        
            <div class="easyui-layout" data-options="fit:true">
            
                <!-- 西 -->  
                <div data-options="region:'west'" style="width:200px"></div>
            
                <!-- 中 -->
                <div data-options="region:'center'">
                
                    <div class="easyui-layout" data-options="fit:true">
                
                        <!-- 北 -->
                        <div data-options="region:'north'" style="height:100px"></div>
                        
                        <!-- 中 -->
                        <div data-options="region:'center'"></div>
                
                    </div>
                
                </div>
            
            </div>
        
        </div>
    
    </div>

accordion分类


    <!-- 容器 -->
    <div 
        id="accordionID" 
        class="easyui-accordion" 
        data-options="fit:false,border:true,animate:true,multiple:false,selected:-1" 
        style="width:300px;height:400px;">   
        
        <!-- 面板 -->
        <div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
            北京  
        </div>   
        <div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
            上海    
        </div>   
        <div title="标题3">   
            广州    
        </div> 
        <div title="标题4" data-options="collapsible:true">   
            深圳    
        </div> 
         
    </div> 
    
    
    <script type="text/javascript">
        //当浏览器加载web页面时触发
        $(function(){
            //增加一个面板
            //$('selector').plugin('method', parameter); 
            $("#accordionID").accordion("add",{
                "title" : "标题5",
                "iconCls" : "icon-add",
                "content" : "武汉",
                "selected" : false
            });
            //休息3秒
            window.setTimeout(function(){
                //移除标题1面板
                $("#accordionID").accordion("remove",0);
                //取消面板2选中
                $("#accordionID").accordion("unselect",0);
                //面板3选中
                $("#accordionID").accordion("select",1);
            },3000);
        });
    </script>

这里写图片描述

有格式的按钮linkbutton

    <a 
        id="btn_add" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-add'">增加部门</a><p> 
    <a 
        id="btn_find" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-search'">查询部门</a><p> 
    <a 
        id="btn_update" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-edit'">修改部门</a><p> 
    <a 
        id="btn_delete" 
        href="#" 
        class="easyui-linkbutton" 
        data-options="iconCls:'icon-remove'">删除部门</a><p>
    
    
    
    
    
    <script type="text/javascript">
        //定位4个按钮
        $("a").click(function(){
            //获取你所单击的按钮的标题
            var title = $(this).text();
            //去空格
            title = $.trim(title);
            //显示
            alert(title);
        });
    </script>

这里写图片描述

选项卡tabs


    
    <!-- 容器 -->
    <div 
        id="tabsID" 
        class="easyui-tabs" 
        style="width:500px;height:250px;"
        data-options="plain:false,fit:false,border:true,tools:[
            {
                iconCls:'icon-add',
                handler:function(){
                    alert('添加')
                }
            },
            {
                iconCls:'icon-save',
                handler:function(){
                    alert('保存')
                }
            }
        ],selected:-1">   
        
        <!-- 选项卡 -->
        <div title="标题1" style="padding:20px">   
            tab1<br/>
        </div>   
        <div title="标题2" data-options="closable:true" style="overflow:auto;padding:20px;">   
            tab2    
        </div>   
        <div title="标题3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
            tab3    
        </div>   
    </div>

这里写图片描述

分页pagination

    <!-- 静态方式创建pagination 
    <div 
        id="paginationID" 
        class="easyui-pagination" 
        data-options="total:2000,pageSize:10" 
        style="background:#efefef;border:1px solid #ccc;"></div> 
    -->
    
    <div 
        id="paginationID" 
        style="background:#efefef;border:1px solid #ccc;width:800px">
    </div> 
    
    <script type="text/javascript">
        //total表示总记录数
        //pageSize表示每页显示多少条记录
        //pageNumber表示当前页号
        //pageList表示可供选择的每页显示多少条记录，pageSize变量的值必须属性pageList集合中的值之一
        $("#paginationID").pagination({
            "total" : 100,
            "pageSize" : 10,
            "pageNumber" : 1,
            "pageList" : [10,20],
            "layout" : ['list','sep','first','prev','manual','next','last','links']
        });
    </script>
    
    <script type="text/javascript">
        $("#paginationID").pagination({
            "onSelectPage" : function(pageNumber,b){
                alert("pageNumber=" + pageNumber);
                alert("pageSize=" + b);
            }
        });
    </script>

这里写图片描述

提示框validatebox


<div style="margin:200px"></div>
    
    姓名：<input id="nameID"/><p/>
    
    <script type="text/javascript">
        $("#nameID").validatebox({
            required : true,
            validType : ['length[1,6]','zhongwen']
        });
    </script>
    <script type="text/javascript">
        //自定义规则:zhongwen
        $.extend($.fn.validatebox.defaults.rules, {    
            //zhongwen规则名
            zhongwen: {  
                //validator验证体  
                //value表示用户在文本框中输入的内容
                validator: function(value){   
                    //如果符合中文规则 
                    if(/^[\u3220-\uFA29]*$/.test(value)){
                        return true;    
                    }
                }, 
                //如果不符合中文规则，以下就是提示信息   
                message: '姓名必须为中文'   
            }    
        });  
    </script>
    
    邮箱：<input id="emailID"/><p/>

    <script type="text/javascript">
        $("#emailID").validatebox({
            required : true,
            validType : ['length[1,30]','email']
        });
    </script>

    密码：<input id="passwordID"/><p/>

    <script type="text/javascript">
        $("#passwordID").validatebox({
            required : true,
            validType : ['length[6,6]','english']
        });
    </script>
    <script type="text/javascript">
        $.extend($.fn.validatebox.defaults.rules, {    
            english: {  
                validator: function(value){   
                    if(/^[a-zA-Z]*$/.test(value)){
                        return true;    
                    }
                }, 
                message: '密码必须为英文'   
            }    
        });  
    </script>

这里写图片描述

ComboBox下拉列表框


<!-- 
    城市：
    <select id="cityID" class="easyui-combobox" name="city" style="width:200px;">   
        <option>aitem1</option>   
        <option>bitem2</option>   
        <option>bitem3</option>   
        <option>citem4</option>   
        <option>citem5</option>   
        <option>citem4</option>   
        <option>ditem5</option>   
        <option>ditem4</option>   
        <option>ditem5</option>   
        <option>ditem4</option>   
        <option>ditem5</option>   
        <option>eitem4</option>   
        <option>eitem5</option>   
    </select>  
    --> 
    
    
    
    城市：
    <input id="cityID" name="city"/>  
    
    <script type="text/javascript">
        //url表示请求的路径
        //valueField表示传到服务器的值，看不见的
        //textField表示页面中显示的值，看得见
        $("#cityID").combobox({
            url : "../json/city.json",
            valueField :"id",    
            textField : "name"   
        });
    </script>
    <script type="text/javascript">
        $(function(){
            //为下拉组合框设置值
            $("#cityID").combobox("setValue","长沙");
        });
    </script>

我们的json需要的格式也可以在文档中找到，我们只要对照着来写就行了。
这里写图片描述



[
  {    
    "id":1,    
    "name":"北京"   
  },
  {    
    "id":2,    
    "name":"上海"   
  },
  {    
    "id":3,    
    "name":"广州"   
  },
  {    
    "id":4,    
    "name":"深圳"
  },
  {    
    "id":5,    
    "name":"武汉"   
  }
]

DateBox日期输入框


    
    入职时间：
    <input id="dd" type="text"/>
    <script type="text/javascript">
        $("#dd").datebox({
            required : true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect : function(mydate){
                var year = mydate.getFullYear(); 
                var month = mydate.getMonth() + 1;
                var date = mydate.getDate();
                alert(year+ "年" + month + "月" + date + "日");
            }
        });
    </script>

这里写图片描述

NumberSpinner数字微调


    商品数量:
    <input id="ss" style="width:80px;"> 
    <script type="text/javascript">
        $("#ss").numberspinner({
            min : 1,
            max : 100,
            value : 1
        });
    </script>
    <p/>
    你一共购买了<span id="num">1</span>个商品
        
        
    <script type="text/javascript">
        $("#ss").numberspinner({
            onSpinUp : function(){
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            },
            onSpinDown : function(){
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            }
        });
    </script>
    
    
    <script type="text/javascript">
        $("#ss").keyup(function(xxx){
            //将浏览器产生的事件对象设置到myevent变量中
            var myevent = xxx;
            //获取按键的unicode编码
            var code = myevent.keyCode;
            //如果按钮是回车
            if(code == 13){
                //获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可
                var value = $(this).val();
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");   
            }
        });
    </script>

这里写图片描述

Slider滑动条


    <div style="margin:100px">
        身高：<span id="tip"></span>
        <p/>
        <div id="ss" style="height:400px;width:600px"></div>
    </div>
    <script type="text/javascript">
        $("#ss").slider({
            mode : "v",
            min : 150,
            max : 190,
            rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
            showTip : true,
            value : 150
        });
    </script>
        
    <script type="text/javascript">
        $("#ss").slider({
            onChange : function(newValue){
                if(newValue == 160){
                    $("#tip").text("合格").css("color","blue");
                }else if(newValue == 170){
                    $("#tip").text("良好").css("color","green");
                }else if(newValue == 180){
                    $("#tip").text("优秀").css("color","pink");
                }else if(newValue == 190){
                    $("#tip").text("卓越").css("color","red");
                }   
            }
        });
    </script>

这里写图片描述

ProgressBar进度条


    
    <div id="p" style="width:400px;"></div> 
    <script type="text/javascript">
        $("#p").progressbar({
            width : 1300,
            height : 100,
            value : 0
        });
    </script>   
    
    <input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>
    
    
    
    
    
    <script type="text/javascript">
        //获取1到9之间的随机数，包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
    </script>
    <script type="text/javascript">
        var timeID = null;
        //函数
        function update(){
            //获取随机值,例如：3
            var num = getNum();
            //获取进度条当前值，例如：99
            var value = $("#p").progressbar("getValue");
            //判断
            if(value + num > 100){
                //强行设置进度条的当前值为100
                $("#p").progressbar("setValue",100);
                //停止定时器
                window.clearInterval(timeID);
                //按钮正效
                $("#startID").removeAttr("disabled");
            }else{
                //设置进度条的当前值为num+value的和
                $("#p").progressbar("setValue",(value+num));
            }
        }
        //定拉按钮，同时提供单击事件
        $("#startID").click(function(){
            //每隔300毫秒执行update方法
            timeID = window.setInterval("update()",300);
            //按钮失效
            $(this).attr("disabled","disabled");
        });
    </script>

这里写图片描述

Window窗口



    <input type="button" value="打开窗口1" id="open1"/>
    <input type="button" value="关闭窗口1" id="close1"/>
    
    <div style="margin:600px"></div>
        
    <div id="window1"></div>
        
    <script type="text/javascript">
        //定位打开窗口1按钮，同时添加单击事件
        $("#open1").click(function(){
            //打开窗口1
            $("#window1").window({
                title : "窗口1",
                width : 840,
                height : 150,
                left : 200,
                top : 100,
                minimizable : false,
                maximizable : false,
                collapsible : false,
                closable : false,
                draggable : false,
                resizable : true,
                href : "/js-day06/empList.jsp"
            });
        });
    </script>
    
    <script type="text/javascript">
        //定位关闭窗口1按钮，同时添加单击事件
        $("#close1").click(function(){
            //关闭窗口1
            $("#window1").window("close");
        });
    </script>

这里写图片描述

Dialog对话框窗口



    <input type="button" value="打开对话框" id="open"/>

    <div style="margin:600px"></div>

    <div id="dd"></div>
    <script type="text/javascript">
        $("#open").click(function(){
            $("#dd").dialog({
                title : "对话框",
                width : 300,
                height : 400,
                left : 200,
                top : 100,
                minimizable : false,
                maximizable : false,
                collapsible : false,
                closable : false,
                draggable : false,
                resizable : true,
                toolbar : [
                    {
                        text:'编辑',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },
                    {
                        text:'帮助',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}
                    }
                ],
                buttons : [
                    {
                        text:'提交',
                        handler:function(){alert("提交");}
                    },
                    {
                        text:'关闭',
                        handler:function(){
                            //关闭对话框
                            $("#dd").dialog("close");   
                        }
                    }
                ],
                href : "/js-day06/easyui/10_form.html"
            });
        }); 
    </script>

这里写图片描述

Messager消息窗口


    <input type="button" value="警告框"/><br/>
    <input type="button" value="确认框"/><br/>
    <input type="button" value="输入框"/><br/>
    <input type="button" value="显示框"/><br/>
    
    
    <div style="margin:100px"></div>
    <script type="text/javascript">
        //定位所有的button按钮，同时提供单击事件
        $(":button").click(function(){
            //获取value属性值
            var tip = $(this).val();
            //去空格
            tip = $.trim(tip);
            //如果警告框的话
            if("警告框" == tip){
                $.messager.alert("警告框","继续努力","warning",function(){
                    alert("关闭");
                });
            }else if("确认框" == tip){
                $.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){
                    alert(value);
                }); 
            }else if("输入框" == tip){
                $.messager.prompt("输入框","你期希的月薪是多少?",function(sal){
                    
                    if(sal == undefined){
                        alert("请输入月薪");
                    }else{
                        if(sal<6000){
                            alert("你的谦虚了");
                        }else if(sal < 7000){
                            alert("你加点油了");
                        }else{
                            alert("你很不错了");
                        }
                    }
                    
                });
            }else if("显示框" == tip){
                $.messager.show({
                    showType : "slide",
                    showSpeed : 500,
                    width : 300,
                    height : 300,
                    title : "显示框",
                    msg : "这是内容",
                    timeout : 5000
                });
            }
        }); 
    </script>

这里写图片描述

Tree树


    <ul id="treeID"></ul>
    <script type="text/javascript">
        $("#treeID").tree({
            url : "/js-day06/json/pro.json"
        });
    </script>

既然我们用到了JSON，那么我们可以在手册看它需要的格式是什么：

这里写图片描述


[
  {    
    "id":1,    
    "text":"广东",
    "state":"closed",
    "children":[
    {
       "id":11,
       "text":"广州"  ,
           "state":"closed",
           "children":[
          {
         "id":111,    
                 "text":"天河"
          },    
          {
         "id":112,    
                 "text":"越秀"
          } 
       ]
    },
    {
       "id":12,
       "text":"深圳"      
    }
    ]
  },    
  {    
    "id":2,    
    "text":"湖南"
  } 
]

这里写图片描述

基于easyUI开发的一个综合案例模版


<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>练习</title>
    
    <!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>
  
    <!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
    
  </head>
  <body>
    
        <!-- Layout布局 -->
        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
            
            <!-- 北 -->
            <div data-options="region:'north',border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;">
                <center><font style="font-size:66px">jQuery-EasyUI组件</font></center>            
            </div>   
            
            <!-- 南 -->
            <div data-options="region:'south'" style="height:100px;">
                <center><font style="font-size:33px">XX公司版权所有</font></center>           
            </div>   
            
            <!-- 东 -->
            <div data-options="region:'east',iconCls:'icon-reload'" style="width:100px;"></div>   
            
            <!-- 西 -->
            <div data-options="region:'west'" style="width:200px;">
                <!-- Accordion分类 -->
                <div 
                    id="accordionID" 
                    class="easyui-accordion" 
                    data-options="fit:true,border:false,selected:-1" 
                    style="width:300px;height:400px;">   
                    <div title="部门管理" data-options="iconCls:'icon-save'" style="padding:10px;">   
                        <!-- Linkbutton按钮 -->
                        <a 
                            id="btn_add" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-add'">增加部门</a><p> 
                        <a 
                            id="btn_find" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-search'">查询部门</a><p> 
                        <a 
                            id="btn_update" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-edit'">修改部门</a><p> 
                        <a 
                            id="btn_delete" 
                            href="#" 
                            class="easyui-linkbutton" 
                            data-options="iconCls:'icon-remove'">删除部门</a><p>  
                    </div>   
                    <div title="人事管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        <!-- tree树 -->              
                        <ul id="treeID" class="easyui-tree" data-options="lines:true">   
                           <li>
                                <span>增加人事</span>
                           </li>
                           <li>
                                <span>查询人事</span>
                                <ul>
                                    <li>
                                        <span>分页查询人事</span>
                                        <ul>
                                            <li>
                                                <span>模糊分页查询人事</span>
                                            </li>
                                            <li>
                                                <span>精确分页查询人事</span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span>查询所有人事</span>
                                    </li>
                                </ul>
                           </li>
                        </ul>
                    </div>   
                    <div title="客户管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        客户管理    
                    </div> 
                    <div title="权限管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                        权限管理    
                    </div>
                    <div title="报表管理" data-options="iconCls:'icon-print'" style="padding:10px;">   
                        报表管理    
                    </div> 
                    <div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;">   
                        帮助    
                    </div>  
                </div>
            </div>   

            <!-- 中 -->
            <div data-options="region:'center'" style="padding:5px;background:#eee;">
                <!-- Tabs选项卡 -->
                <div 
                    id="tabsID" 
                    class="easyui-tabs" 
                    style="width:500px;height:250px;"
                    data-options="plain:true,border:false,selected:-1,fit:true">   
                </div>
            </div>   
            
        </div>

        <script type="text/javascript">
            //定位4个按钮
            $("a").click(function(){
                //获取你所单击的按钮的标题
                var title = $(this).text();
                //去空格
                title = $.trim(title);
                //如果title变量是"增加部门"
                if("增加部门" == title){
                    //查看该选项卡是否已经打开
                    var flag = $("#tabsID").tabs("exists",title);
                    //如果未打开
                    if(!flag){
                        //打开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "content" : "文本",
                            "iconCls" : "icon-add"
                        });
                    }
                }else if("查询部门" == title){
                    var flag = $("#tabsID").tabs("exists",title);
                    if(!flag){
                        //打开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "content" : "文本",
                            "iconCls" : "icon-search"
                        });
                    }
                }
            });
        </script>
        <script type="text/javascript">
            $(function(){
                //收起所有的选项
                $("#treeID").tree("collapseAll");
            });
        </script>
        <script type="text/javascript">
            $("#treeID").tree({
                onClick : function(node){
                    //获取点击树节点的文本
                    var title = node.text;
                    //去空格
                    title = $.trim(title);
                    //产生tab选项卡
                    var flag = $("#tabsID").tabs("exists",title);
                    //如果没有打开的话
                    if(!flag){
                        //打开选项卡
                        $("#tabsID").tabs("add",{
                            "title" : title,
                            "closable" : true,
                            "href" : "${pageContext.request.contextPath}/empList.jsp",
                            "iconCls" : "icon-search"
                        });
                    }   
                }
            });
        </script>

  </body>
</html>

效果：

这里写图片描述

分页

相信我们的分页已经做得不少了，这次我们使用easyUI+Oracle+jdbc来做一个分页...【之前大都都用Mysql，这次用Oracle】

DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数

page：需要显示的页号
rows：需要获取多少条记录

编写emp实体


package zhongfucheng.entity;

import java.io.Serializable;
import java.util.Date;

/**
 * Created by ozc on 2017/7/17.
 */
public class Emp implements Serializable {

    private Integer empno;
    private String ename;
    private String job;
    private Integer mgr;
    private Date hiredate;
    private Integer sal;
    private Integer comm;
    private Integer deptno;

    public Emp() {
    }

    public Emp(Integer empno, String ename, String job, Integer mgr, Date hiredate, Integer sal, Integer comm, Integer deptno) {
        this.empno = empno;
        this.ename = ename;
        this.job = job;
        this.mgr = mgr;
        this.hiredate = hiredate;
        this.sal = sal;
        this.comm = comm;
        this.deptno = deptno;
    }

    public Integer getEmpno() {
        return empno;
    }

    public void setEmpno(Integer empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public Integer getMgr() {
        return mgr;
    }

    public void setMgr(Integer mgr) {
        this.mgr = mgr;
    }

    public Date getHiredate() {
        return hiredate;
    }

    public void setHiredate(Date hiredate) {
        this.hiredate = hiredate;
    }

    public Integer getSal() {
        return sal;
    }

    public void setSal(Integer sal) {
        this.sal = sal;
    }

    public Integer getComm() {
        return comm;
    }

    public void setComm(Integer comm) {
        this.comm = comm;
    }

    public Integer getDeptno() {
        return deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }
}

编写EmpDao

使用Oracle的语法来实现分页...!


public class EmpDao {
    public  int getPageRecord() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
        String sql = "SELECT COUNT(EMPNO) FROM EMP";
        String count = queryRunner.query(sql, new ScalarHandler()).toString();
        return Integer.parseInt(count);
    }
    public  List<Emp> getList(int start, int end) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

        String sql = "SELECT *FROM (SELECT rownum rownumid,emp.* FROM emp WHERE rownum <= ?) xx WHERE xx.rownumid> ?";

        List<Emp> list = (List<Emp>) queryRunner.query(sql, new Object[]{end, start}, new BeanListHandler(Emp.class));
        return list;
    }
}

编写EmpService

得到对应的分页数据，封装到分页对象中！


public class EmpService {


    private EmpDao empDao = new EmpDao();
    public Page getPageResult(int currentPage) throws Exception {

        Page page = new Page(currentPage, empDao.getPageRecord());
        List<Emp> empList = empDao.getList(page.getStartIndex(), page.getLinesize() * currentPage);
        page.setList(empList);
        return page;
    }

}

处理请求的Servlet

接收page参数，如果为空，就设置为1

把得到的分页数据封装成datagrid要的格式，返回给浏览器！

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        try {
            //调用service
            EmpService empService = new EmpService();

            //设置编号方式
            request.setCharacterEncoding("UTF-8");

        /*获取客户端传递进来的参数，easyUI使用的是page参数*/
            String pageStart = request.getParameter("page");

            if (pageStart == null || pageStart.length() == 0) {
                pageStart = "1";
            }
            int currentPage = Integer.parseInt(pageStart);
            Page pageResult = empService.getPageResult(currentPage);

            Map map = new HashMap();

            map.put("total", pageResult.getTotalRecord());
            map.put("rows", pageResult.getList());


            //使用第三方工具将map转成json文本
            JSONArray jsonArray = JSONArray.fromObject(map);
            String jsonJAVA = jsonArray.toString();

            //去掉二边的空格
            jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
            System.out.println("jsonJAVA=" + jsonJAVA);

            //以字符流的方式，将json字符串输出到客户端
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(jsonJAVA);
            pw.flush();
            pw.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

JSP页面显示


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>

    <title>dataGrid+分页</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>

  <table id="dg" style="width: 800px" ></table>
  <script>
    $('#dg').datagrid({
      url:'${pageContext.request.contextPath}/getPageServlet?time'+ new Date().getTime(),
      columns:[[

        /*这里的field要对应JavaBean的属性名称，否则获取不到数据*/
        {field:'empno',title:'编号',width:100},
        {field:'ename',title:'姓名',width:100},
        {field:'job',title:'工作',width:100},
        {field:'mgr',title:'上编',width:100},
        {field:'hiredate',title:'入时',width:100},
        {field:'sal',title:'月薪',width:100},
        {field:'comm',title:'佣金',width:100},
        {field:'deptno',title:'部编',width:100}
      ]],
      fitColumns : true,
      singleSelect : true,
      pagination : true,

        /*pageSize对应rows，pageNum对应page，datagrid会自动把这两个值传递进去*/
      pageNumber : 1,
      pageSize : 3,
      pageList : [3],
      fit:true
    });
  </script>

  </body>
</html>

效果：

这里写图片描述

BootStrap

BootStrap这个CSS框架是非常火的，现在已经更新到了BootStrap4了，我在个人网站中也有用到它。

它还有其他的组件的，比如：BootStrap-Validation等，用到相关的组件时不妨查查有没有该对应的。

中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html

下面我就截取以慕课网的案例的代码了：

最近在学bootStrap，在慕课网中有这么一个例子....感觉以后会用到这些代码。保存起来。


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器博物馆</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>

        body {
            padding-top: 50px;
            padding-bottom: 40px;
            color: #5a5a5a;
        }

        /* 轮播广告 */

        .carousel {
            height: 500px;
            margin-bottom: 60px;
        }

        .carousel .item {
            height: 500px;
            background-color: #000;
        }

        .carousel .item img {
            width: 100%;
        }

        .carousel-caption {
            z-index: 10;
        }

        .carousel-caption p {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }

        /* 简介 */

        .summary {
            padding-right: 15px;
            padding-left: 15px;
        }

        .summary .col-md-4 {
            margin-bottom: 20px;
            text-align: center;
        }

        /* 特性 */

        .feature-divider {
            margin: 40px 0;
        }

        .feature {
            padding: 30px 0;
        }

        .feature-heading {
            font-size: 50px;
            color: #2a6496;
        }

        .feature-heading .text-muted {
            font-size: 28px;
        }

        /* 响应式布局 */
        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }

            .feature-heading {
                font-size: 34px;
            }

            .feature-heading .text-muted {
                font-size: 22px;
            }
        }

        @media (min-width: 992px) {
            .feature-heading {
                margin-top: 120px;
            }
        }
    </style>

</head>

<body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
    <div class="container">
        <div class="navbar-header">

            <!--如果分辨率较小，那么这里就会出现-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#ad-carousel">综述</a></li>
                <li><a href="#summary-container">简述</a></li>

                <!--下拉框-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>
                        <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>
                        <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>
                        <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>
                        <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>
                    </ul>
                </li>
                <!--模态窗口-->
                <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
            </ul>
        </div>
    </div>
</div>


<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
        <li data-target="#ad-carousel" data-slide-to="3"></li>
        <li data-target="#ad-carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/chrome-big.jpg" alt="1 slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/firefox-big.jpg" alt="2 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/safari-big.jpg" alt="3 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/opera-big.jpg" alt="4 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="images/ie-big.jpg" alt="5 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<!-- 主要内容 -->
<div class="container summary">

    <!-- 简介 -->
    <div class="row" id="summary-container">
        <div class="col-md-4">
            <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>

    <!-- 特性 -->

    <hr class="feature-divider">
    <ul class="nav nav-tabs" role="tablist" id="feature-tab">
        <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
        <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
        <li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
        <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-chrome">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Google Chrome <span
                            class="text-muted">使用最广的浏览器</span></h2>

                    <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/chrome-logo.jpg"
                         alt="Chrome">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-firefox">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/firefox-logo.jpg"
                         alt="Firefox">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
                    </h2>

                    <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
                        使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-safari">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2>

                    <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
                        Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/safari-logo.jpg"
                         alt="Safari">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-opera">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/opera-logo.jpg"
                         alt="Opera">
                </div>
                <div class="col-md-7">

                    <h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span>
                    </h2>

                    <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
                        是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-ie">
            <div class="row feature">
                <div class="col-md-7">

                    <h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2>

                    <p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
                        Explorer(7，8，9，10版本)，
                        简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" src="images/ie-logo.jpg"
                         alt="IE">
                </div>
            </div>
        </div>
    </div>

    <!-- 关于 -->
    <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="modal-label">关于</h4>
                </div>
                <div class="modal-body">
                    <p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，
                        将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
                </div>
            </div>
        </div>
    </div>


    <!--角标-->
    <footer>
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>&copy; 2014 慕课网 </p>
    </footer>

</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>

    /*触发点击事件*/
    $(function () {
        $('#ad-carousel').carousel();
        $('#menu-nav .navbar-collapse a').click(function (e) {
            var href = $(this).attr('href');
            var tabId = $(this).attr('data-tab');
            if ('#' !== href) {
                e.preventDefault();
                $(document).scrollTop($(href).offset().top - 70);
                if (tabId) {
                    $('#feature-tab a[href=#' + tabId + ']').tab('show');
                }
            }
        });
    });
</script>
</body>
</html>

Bootstrap 模态框避免点击背景处关闭:

解决方法(摘抄自:http://blog.csdn.net/gloomy_114/article/details/51611734)：

在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。。
在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中，backdrop：’static’指的是点击背景空白处不被关闭； keyboard:false指的是触发键盘esc事件时不关闭。

Materialize

这个也是很好看的CSS框架，具体的用法跟BootStrap是差不多的，会了BootStrap这个也就看文档来用了，没什么特别的地方的。

官网：http://materializecss.com

如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同学，可以关注微信公众号:Java3y

更多的文章可往： 文章的目录导航

常用的CSS框架

常用的CSS框架

jquery-easyUI

什么是easyUI

easyUI快速入门

语法

layout布局

嵌套

accordion分类

有格式的按钮linkbutton

选项卡tabs

分页pagination

提示框validatebox

ComboBox下拉列表框

DateBox日期输入框

NumberSpinner数字微调

Slider滑动条

ProgressBar进度条

Window窗口

Dialog对话框窗口

Messager消息窗口

Tree树

基于easyUI开发的一个综合案例模版

分页

编写emp实体

编写EmpDao

编写EmpService

处理请求的Servlet

JSP页面显示

效果：

BootStrap

Materialize

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

常用的CSS框架

常用的CSS框架

jquery-easyUI

什么是easyUI

easyUI快速入门

语法

layout布局

嵌套

accordion分类

有格式的按钮linkbutton

选项卡tabs

分页pagination

提示框validatebox

ComboBox下拉列表框

DateBox日期输入框

NumberSpinner数字微调

Slider滑动条

ProgressBar进度条

Window窗口

Dialog对话框窗口

Messager消息窗口

Tree树

基于easyUI开发的一个综合案例模版

分页

编写emp实体

编写EmpDao

编写EmpService

处理请求的Servlet

JSP页面显示

效果：

BootStrap

Materialize

热门文章

最新文章

相关课程

相关电子书

相关实验场景