经常使用的CSS框架
经常使用的CSS框架
以前在写本身的我的网站的时候，因为本身Web前端不是特别好，因而就去找相关的CSS框架来搭建页面了。javascript
找到如下这么一篇文章(列出了不少经常使用的CSS框架)：css
- 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框架，并把以前写过的笔记进行整合一下。固然是不能面面俱到的...html
jquery-easyUI
其实这个已是比较早的了，只是以前学过了一点，作过笔记才拿到这里来。毕竟可能之后仍是会用到的?前端
什么是easyUI
咱们能够看官方对easyUI的介绍：html5
easyUI就是一个在Jquery的基础上封装了一些组件....咱们在编写页面的时候，就能够直接使用这些组件...很是方便...easyUI多用于在后台的页面上...java
在学习easyUI以前，我已经学过了bootstrap这么一个前端的框架了...所以学习easyUI并不困难....大多状况下，咱们只要查询文档就能够找到对应的答案了。node
easyUI快速入门
首先咱们得去下载easyUI的资料...jquery
而后在咱们把对应的文件导入进去项目中，以下图：linux
在html文件的body标签内，写上以下的代码：web
<!-- 第一：写一个普通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等，用到相关的组件时不妨查查有没有该对应的。
中文教程：w3schools.wang/bootstrap/b…
下面我就截取以慕课网的案例的代码了：
最近在学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">×</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>© 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这个也就看文档来用了，没什么特别的地方的。
若是文章有错的地方欢迎指正，你们互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同窗，能够关注微信公众号:Java3y
相关文章
- 1. 经常使用的CSS框架
- 2. Android经常使用框架
- 3. android 经常使用框架
- 4. PHP经常使用框架
- 5. python经常使用框架
- 6. Python经常使用框架
- 7. android经常使用框架
- 8. 经常使用C#框架
- 9. java经常使用框架
- 10. 经常使用框架
- 更多相关文章...
- • 使用 CSS 显示 XML - XML 教程
- • SQLite 常用函数 - SQLite教程
- • 常用的分布式事务解决方案
- • Composer 安装与使用
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 经常使用的CSS框架
- 2. Android经常使用框架
- 3. android 经常使用框架
- 4. PHP经常使用框架
- 5. python经常使用框架
- 6. Python经常使用框架
- 7. android经常使用框架
- 8. 经常使用C#框架
- 9. java经常使用框架
- 10. 经常使用框架