第63天(就业班) easyui
2017-04-15 20:17
211 查看
培训要求 1) 使用jQuery-EasyUI组件,构建自已的Web页面(下) 2) 使用Jsp/Js/Ajax/Json/Jquery/Easyui + Servlet + JDBC + Lucene/Mysql/Oracle完成数据库分页 3) 欣赏几款优秀的jQuery组件,构建自已的Web页面 一)学会查阅文档,使用jQuery-EasyUI,构建自已的Web页面 (1)网址:www.jeasyui.com,下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册 (2)什么是jQuery-EasyUI 参见<<什么是EasyUI.JPG>> 是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的 WEB前端JavaScript现成的组件库 注意:今天的EasyUI组件库的版本较高,需要高版本浏览器支持, 中低版本浏览器会有不能正常执行的情况 (3)JavaScript,AJAX,JSON,jQuery,EasyUI分别能解决什么问题 JS:基于浏览器对web页面中的节点进行操作,比较麻烦 jQuery:基于浏览器简化对web页面中的节点进行操作,做到了write less do more AJAX:基于浏览器与服务端进行局部刷新的异步通讯编程模式 JSON:简化自定义对象的创建与AJAX数据交换轻量级文本 EasyUI:快速基于现成的组件创建自已的web页面 组件:是指已经由第三方开源组织写好的,直接可以使用的功能界面,例如:form,layout,tree... 注意:我们学的都是零散的组件,项目中需要将其装配起来,方可构建完整的web页面, EasyUI只是众多前端WEB组件之一 (4)jQuery-EasyUI快速入门----可折叠功能的面板 第一步:创建一个js-day05这么一个web工程 第二步:在WebRoot目录下创建00-base.html 第三步:在WebRoot目录下创建js和themes目录,导入官方文件 参见<< jquery-easyui-1.3.6文件夹>> 第四步:在00-base.html 文件的<head>标签中引入如下文件 <!-- 引入外部CSS文件 --> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <!-- 引入外部JS文件 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> 第五步:在00-base.html 文件的<body>标签中创建如下<div>标签 <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="我的面板" iconCls="icon-save" collapsible="true"> 内容<br/> 内容<br/> 内容<br/> 内容<br/> </div> (5)EasyUI组件 (06)form表单 》validatebox验证框 姓名:必填/1-6个字符/必填中文 邮箱:必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn <div style="margin:100px"></div> 用户名: <input id="vv"/> <script type="text/javascript"> $("#vv").validatebox({ required:true, validType:["length[1,4]","zhongwen"] }); </script> <script type="text/javascript"> //自定义验证规则 $.extend($.fn.validatebox.defaults.rules, { zhongwen : { validator: function(value){//value表示在文本框中输入的内容 if(/^[\u3220-\uFA29]+$/.test(value)){ return true; } }, message: "用户名必须填中文" } }); </script> 思考:检查邮箱的扩展名只能是{'com','cn'} 》combobox下拉列表框 设置下拉列表框默认值 你所在的城市: <select id="cc" class="easyui-combobox" name="city" style="width:150px;"> <option>aitem1</option> <option>bitem1</option> <option>bitem2</option> <option>citem1</option> <option>citem2</option> <option>citem3</option> <option>ditem1</option> <option>ditem2</option> <option>ditem3</option> <option>ditem4</option> </select> <script type="text/javascript"> $(function(){ $("#cc").combobox("setValue","长沙"); }); </script> 你所在的城市: <input id="cc" name="city" value="广州"/> <script type="text/javascript"> $("#cc").combobox({ url:"combobox_data.json", valueField:"id", textField:"text" }); //textField表示在下拉框中看得见的内容,<option>长沙</option> //valueField表示在下拉框中看不见的内容,用于向后台传递数据<option value="cs">长沙</option> </script> combobox_data.json: [ { "id":"gz", "text":"广州" }, { "id":"zs", "text":"中山" }, { "id":"fs", "text":"佛山" }, { "id":"sz", "text":"深圳", "selected":true }, { "id":"yj", "text":"阳江" } ] 》datebox日期选择框 显示yyyy-mm-dd格式, 添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script> 选中日期并显示选中的日期 入职时间:<input id="dd" type="text"></input> <script type="text/javascript"> $("#dd").datebox({ required:true }); </script> <script type="text/javascript"> $("#dd").datebox({ onSelect:function(date){ alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()); } }); </script> 》numberspinner数字微调框 设置数字微调框中的值 获取数字微调框中的值 商品数量:<input type="text" size="2px" value="1"/><span></span> <hr/> <input id="ss" required="required" style="width:80px;"> <script type="text/javascript"> $("#ss").numberspinner({ value:1, min:1, max:100, editable:true }); </script> <script type="text/javascript"> $("#ss").numberspinner({ onSpinUp:function(){ //获取numberspinner的当前值 var value = $("#ss").numberspinner("getValue"); //将numberspinner的当前值设置到商品数量文本框中 $("input:first").val(value).css("color","red"); //如果value值为100 if( value == 100 ){ $("span:first").html("商品已满,不能再购买了").css("color","blue"); $("input:first").attr("disabled","disabled"); } }, onSpinDown:function(){ //获取numberspinner的当前值 var value = $("#ss").numberspinner("getValue"); //将numberspinner的当前值设置到商品数量文本框中 $("input:first").val(value).css("color","red"); //如果value值小于100 if( value < 100 ){ $("span:first").html(""); $("input:first").removeAttr("disabled"); } } }); </script> 》slider滑动条框 拖动滑块,将值同步显示到span标签中 身高:<span>150</span><span id="tip"></span> <div style="margin:50px"> <input id="ss" class="easyui-slider" value="0" style="width:600px;height:500px" data-options="max:180,min:150,mode:'v',showTip:true,rule:[150,'|',160,'|',170,'|',180]"/> </div> <script type="text/javascript"> $("#ss").slider({ onChange:function(newValue){ $("span:first").text(newValue); if(newValue == 180){ $("#tip").text("你真高呀"); }else if(newValue >= 170){ $("#tip").text("你不错呀"); }else if(newValue >= 160){ $("#tip").text("你可以呀"); } } }); </script> (07)progressbar进度条 》每隔1秒让进度条按随机数填充,直至充满进度条刻度 进度条: <div id="p" style="width:400px;"></div> <script type="text/javascript"> $("#p").progressbar({ width:"auto", height:44, value:0 }); </script> <input type="button" value="开始" style="font-size:111px"/> <script type="text/javascript"> var timeID = null; //随机产生1-9之间的整数,包含1和9 function getNum(){ return Math.floor(Math.random()*9)+1; } $(":button").click(function(){ timeID = window.setInterval(function(){ //获取随机数,例如:9 var num = getNum(); //获取进度条当前值,例如:99 var value = $("#p").progressbar("getValue"); //如果随机数加当前值小于100的话 if(value + num < 100){ //填充进度条当前值 $("#p").progressbar("setValue",value+num); }else{ //将进度条当前值设置为100 $("#p").progressbar("setValue",100); //停止定时器 window.clearInterval(timeID); //将"开始"按钮生效 $(":button").removeAttr("disabled"); } },200); //将"开始"按钮失效 $(this).attr("disabled","disabled"); }); </script> (08)window窗口 》单击按钮,打开或关闭一个窗口 <input id="open1" type="button" value="打开窗口1"/> <input id="open2" type="button" value="打开窗口2"/> <hr/> <div id="win1"></div> <div id="win2"></div> <script type="text/javascript"> $("#open1").click(function(){ $("#win1").window({ title:"我的窗口1", width:200, height:300, top:100, left:400, collapsible:false, minimizable:false, maximizable:false, closable:true, draggable:false, resizable:false, shadow:false, modal:false, href:"08_datebox.html" }); }); $("#open2").click(function(){ $("#win2").window({ title:"我的窗口2", width:200, height:300, top:100, left:800, collapsible:false, minimizable:false, maximizable:false, closable:true, draggable:false, resizable:false, shadow:false, modal:false }); }); </script> (09)dialog对话框 》单击按钮,打开或关闭一个对话框 <input id="open1" type="button" value="打开对话框1"/> <hr/> <div id="dd1"></div> <script type="text/javascript"> $("#open1").click(function(){ $("#dd1").dialog({ width:300, height:400, left:400, top:100, title:"对话框1", toolbar:[ { text:'编辑', iconCls:'icon-edit', handler:function(){alert('edit')} }, { text:'帮助', iconCls:'icon-help', handler:function(){alert('help')} } ], buttons:[ { text:'确定', handler:function(){alert('ok')} }, { text:'关闭', handler:function(){ //关闭本对话框 $("#dd1").dialog("close"); } } ], href:"07_combobox_2.html" }); }); </script> (10)messager消息窗口 》单击按钮,弹出警告框 》单击按钮,弹出确认框 》单击按钮,弹出显示框 》单击按钮,弹出输入框 <input type="button" value="警告框"/> <input type="button" value="确认框"/> <input type="button" value="输入框"/> <input type="button" value="显示框"/> <hr/> <div style="margin:200px"></div> <script type="text/javascript"> $(":button").click(function(){ var tip = $(this).val(); tip = $.trim(tip); if("警告框" == tip){ $.messager.alert("我的警告框","不能睡觉了","warning"); }else if("确认框" == tip){ $.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){ alert(flag); }); }else if("输入框" == tip){ $.messager.prompt("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){ alert(value); }); }else if("显示框" == tip){ $.messager.show({ title:"我的显示框", msg:"不要太区分Android和JavaEE了", showType:"fade", width:200, height:200, timeout:1000 }); } }); </script> (11)tree树 》选中树中某个子节点,弹出选中的内容 》用树替代linkButton按钮 <ul id="ttt" class="easyui-tree" style="width:222px"> <li> <span>第一章</span> </li> <li> <span>第二章</span> <ul> <li> <span>第一节</span> </li> <li> <span>第二节</span> <ul> <li>第一条</li> <li>第二条</li> <li>第三条</li> </ul> </li> </ul> </li> </ul> <ul id="ttt"></ul> <script type="text/javascript"> $("#ttt").tree({ url:"tree_data.json", lines:true }); </script> <script type="text/javascript"> $("#ttt").tree({ onClick:function(node){ alert(node.text); } }); </script> tree_data.json: [ { "id":1, "text":"第一章" }, { "id":2, "text":"第二章", "state":"closed", "children":[ { "id":21, "text":"第一节" }, { "id":22, "text":"第二节" }, { "id":23, "text":"第三节", "state":"closed", "children":[ { "id":231, "text":"第一条" }, { "id":232, "text":"第二条" } ] } ] } ] (12)datagrid数据表格 》参见E:\开发类库\jquery-easyui-1.3.6\demo\datagrid(9-数据网格)\products.json 》 DateGrid会异步以POST方式向服务器传入二个参数:page和rows二个参数,服务端需要哪个,就接收哪个参数 * page:需要显示的页号 * rows:需要获取多少条记录 开发过程: DB: use js; drop table if exists users; create table users( id int(5) primary key auto_increment, name varchar(4) not null, sal int(5) not null ); insert into users(name,sal) values('小赵君',1000); insert into users(name,sal) values('中赵君',1500); insert into users(name,sal) values('大赵君',2000); insert into users(name,sal) values('赵小君',2500); insert into users(name,sal) values('赵中君',3000); insert into users(name,sal) values('赵大君',3500); insert into users(name,sal) values('赵君小',4000); insert into users(name,sal) values('赵君中',4500); insert into users(name,sal) values('赵君大',5000); insert into users(name,sal) values('赵君',5500); select id,name,sal from users; Entity: public class User { private Integer id; private String name; private Integer sal; public User(){} public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getSal() { return sal; } public void setSal(Integer sal) { this.sal = sal; } } public class PageBean { private Integer currPageNO; private Integer perPageNO; private Integer allRecordNO; private Integer allPageNO; private List<User> userList = new ArrayList<User>(); public PageBean(){} public Integer getCurrPageNO() { return currPageNO; } public void setCurrPageNO(Integer currPageNO) { this.currPageNO = currPageNO; } public Integer getPerPageNO() { return perPageNO; } public void setPerPageNO(Integer perPageNO) { this.perPageNO = perPageNO; } public Integer getAllRecordNO() { return allRecordNO; } public void setAllRecordNO(Integer allRecordNO) { this.allRecordNO = allRecordNO; } public Integer getAllPageNO() { return allPageNO; } public void setAllPageNO(Integer allPageNO) { this.allPageNO = allPageNO; } public List<User> getUserList() { return userList; } public void setUserList(List<User> userList) { this.userList = userList; } } Util: public class JdbcUtil { private static ComboPooledDataSource dataSource = new ComboPooledDataSource(); public static ComboPooledDataSource getDataSource() { return dataSource; } } src/c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <default-config> <property name="driverClass">com.mysql.jdbc.Driver</property> <property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/js</property> <property name="user">root</property> <property name="password">root</property> <property name="acquireIncrement">2</property> <property name="initialPoolSize">5</property> <property name="minPoolSize">1</property> <property name="maxPoolSize">5</property> </default-config> </c3p0-config> Dao: public class UserDao { //select count(id) from users where 1=1 and name like '%赵%'; public Integer getAllRecordNO(String sql) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource()); Long temp = (Long) runner.query(sql,new ScalarHandler()); return temp.intValue(); } //select id,name,sal from users where 1=1 and name like '%赵%' limit ?,?; public List<User> findAllRecord(String sql,Integer start,Integer size) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource()); return runner.query(sql,new BeanListHandler<User>(User.class),new Object[]{start,size}); } } Service: public class UserService { private UserDao userDao = new UserDao(); //show("赵",2); public PageBean show(String keywords,Integer currPageNO) throws Exception{ PageBean pageBean = new PageBean(); String sqlA = "select count(id) from users where 1=1"; String sqlB = "select id,name,sal from users where 1=1"; if(keywords != null && keywords.trim().length() > 0){ sqlA += " and name like '%" + keywords + "%'"; sqlB += " and name like '%" + keywords + "%'"; } pageBean.setCurrPageNO(currPageNO); Integer allRecordNO = userDao.getAllRecordNO(sqlA); pageBean.setAllRecordNO(allRecordNO); Integer allPageNO = null; if(pageBean.getAllRecordNO() % pageBean.getPageSize() == 0){ allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize(); }else{ allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize() + 1; } pageBean.setAllPageNO(allPageNO); Integer size = pageBean.getPageSize(); Integer start = (pageBean.getCurrPageNO()-1) * size; sqlB += " limit ?,?"; List<User> userList = userDao.findAllRecord(sqlB,start,size); pageBean.setUserList(userList); return pageBean; } } Action: public class UserServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { try{ request.setCharacterEncoding("UTF-8"); String keywords = request.getParameter("keywords"); if(keywords==null || keywords.trim().length()==0){ keywords = ""; } System.out.println("keywords=" + keywords);//赵 String temp = request.getParameter("page"); if(temp == null || temp.trim().length()==0){ temp = "1"; } Integer currPageNO = Integer.parseInt(temp); System.out.println("currPageNO=" + currPageNO);//2 UserService userService = new UserService(); PageBean pageBean = userService.show(keywords,currPageNO); Map<String,Object> map = new LinkedHashMap<String,Object>(); map.put("total",pageBean.getAllRecordNO()); map.put("rows",pageBean.getUserList()); JSONArray jsonArray = JSONArray.fromObject(map); String jsonJAVA = jsonArray.toString(); jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(jsonJAVA); pw.flush(); pw.close(); }catch(Exception e){ e.printStackTrace(); } } } WebRoot/userList.jsp <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 引入外部CSS文件 --> <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.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}/locale/easyui-lang-zh_CN.js"></script> </head> <body> 姓名: <input type="text" size="10px" id="name"/> <input type="button" value="查询" onclick="find()"/> <table id="dg"></table> <script type="text/javascript"> function find(){ $("#dg").datagrid("load",{ "keywords" : $.trim( $("#name").val() ) }); } </script> <script type="text/javascript"> $("#dg").datagrid({ width:400, url:"${pageContext.request.contextPath}/UserServlet", fitColumns:true, columns:[[ {field:'id',title:'编号',width:100}, {field:'name',title:'姓名',width:100}, {field:'sal',title:'薪水',width:100} ]], singleSelect:true, pagination:true, pageNumber:1, pageSize:2, pageList:[2] }); </script> </body> </html> 二)欣赏几款优秀的jQuery组件,构建自已的Web页面 牛图库素材网----->http://niutuku.com/
相关文章推荐
- 第62天(就业班) 省份_城市_区域三联动、什么是easyUI、layout布局、accordion分类、LinkButton、tab选项卡、pagination分页栏
- 第61天(就业班) Lucene索引库优化、内置分词器、IK分词器、关键字高亮、单字段和多字段搜索、easyui入门
- EasyUI中在表单提交之前进行验证
- Num47 boss---01 环境搭建,jQuery-easyui,jQuery-ztree,pd
- EasyUI----界面搭建
- Easyui datagrid datagrid-view1纵向滚动条去除解决方法
- easyui 中重复加载两次url
- easyui常见属性
- easyui 选择框(ComboBox)选中时触发事件
- EasyUI与Bootstrap完美结合
- easyui-textbox与easyui-combobox的onChange事件
- PHP从零单排(十五)牛刀小试--就业信息周报系统 分类: PHP 2014-05-02 20:28 155人阅读 评论(0) 收藏
- easyUI相关资料整理
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(二)Log4j讲解与整合
- easyui-linkbutton 链接类型的按钮
- easyUI中文乱码
- 关于easyui中默认给FORM赋值的错误
- EasyUI 验证
- 扩展 EasyUI DataGrid tooltip
- easyui treegrid demo