EasyUI学习笔记

最新推荐文章于 2020-06-22 09:56:39 发布

dexi.Chi 攻城狮

最新推荐文章于 2020-06-22 09:56:39 发布

阅读量447

点赞数 4

分类专栏： Easy UI 文章标签： js javascript html css java

本文链接：https://blog.csdn.net/weixin_43949154/article/details/104321865

版权

Easy UI 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

EasyUI

1.JqueryEasyUI是什么？
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。但功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

2.下载地址：http://www.jeasyui.com/index.php

3.JqueryEasyUI目录结构介绍
demo：案例
locale：国际化
plugins：各种插件的实现
src：JqueryEasyUI源码
jquery.min.js文件：jquery文件
jquery.easyui.min.js文件： EasyUI主文件

4.正确的引入JqueryEasyUI
学会正确的找到对应的文件，在页面顶端引入使用EasyUI使用的各种文件

<!--引入Jquery主文件-->
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<!--easyui的各种主题文件-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<!--easyui的各种图标-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">

在这里插入图片描述

jquery easyUI 基础

拖动
1.将div中增加一个class样式: class=“easyui-draggable”

<div style="width:300px;height:200px;background:pink" class="easyui-draggable"></div>

2.用js实现

<script type="">
   //$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
   $(function(){
         $("#mydd").draggable();
   });
</script>

<div style="" id="mydd"></div>

分页
1.通过标签创建：

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div>

2.通过js 代码创建：

页面元素：
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
js 代码:
$('#pp').pagination({ 
	total:2000, 
	pageSize:10 
});

进度条
使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加’easyui-progressbar’类ID到div标签

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div>

在这里插入图片描述
提示框
通过标签创建提示框，给元素添加一个"easyui-tooltip"的类名，无需任何Javascript代码。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

在这里插入图片描述

原理: jqueryEasyUI.js 这个js文件,他会去页面上寻找判断每一个元素.看元素中的class属性是否
是以easyui开头.那么这个js文件中的程序会将这个元素将其渲染为对应的组件.

结论1:几乎每一种插件都有2种方式来实现.一种是通过纯html标签来实现 class=“easyui-**”,另一种通过html标签+js代码来实现.
如果内容变化不大,不需要经常改变: html来实现
如果内容经常变化,js+html来实现

结论2: 今天学习的html标签多了data-options=“k1:v1,k2:v2” ,让easyUI来识别.
通过识别data-options中的各种属性和属性值为当前组件增加各种属性.
class data-options
$("#mydd").方法名({});
方法名是有规律的:
$("#mydd").tree({k1:v1,k2:v2});
$("#mydd").menu({});
$("#mydd").draggable({});

方法中传递的是一个对象. 对象中的属性是以键值对的形式存在,多个属性之间用逗号(,)分割.

结论3: 如何加事件
$("#mydd").draggable({
事件名1:function(){},
事件名2:function(){},
});

结论4:方法

在页面开头加入以下语句,可能会出现样式改变.不能正确的显示组件的外观

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

easyUI菜单和按钮插件介绍

菜单 menu
1: 通过标签创建菜单，给div标签添加一个名为’easyui-menu’的类ID。每个菜单项都通过div标签创建。我们可以添加’iconCls’属性来给菜单项定义一个图标显示到菜单项的左侧。添加’menu-sep’类ID菜单项将会生成一个菜单分割线。

2:在菜单被创建的时候它是隐藏和不可见的。调用’show’方法显示菜单。

3:使用Javascript创建菜单项并监听’onClick’事件。
在这里插入图片描述
按钮 linkbutton
通过标签创建：

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">easyui</a>

在这里插入图片描述

菜单按钮 menubutton

//依赖关系
 <a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
      data-options="menu:'#mm',iconCls:'icon-edit',plain:true,duration:100">Edit</a>   
<div id="mm" style="width:150px;">   
   <div data-options="iconCls:'icon-undo'">Undo</div>   
   <div data-options="iconCls:'icon-redo'">Redo</div>   
   <div class="menu-sep"></div>   
   <div>Cut</div>   
   <div>Copy</div>   
   <div>Paste</div>   
   <div class="menu-sep"></div>   
   <div data-options="iconCls:'icon-remove'">Delete</div>   
   <div>Select All</div>   
</div>

在这里插入图片描述

easyUI window 窗口介绍

1.window 窗口
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 html 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"   
        data-options="iconCls:'icon-save',modal:true">   
    Window Content    
</div>

在这里插入图片描述

2.dialog 对话框
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
	data-options="title:'我的对话框',modal:true,buttons:[{text:'保存',handler:function(){}},{text:'关闭',handler:function(){}}]">
  Dialog Content.    
</div>

3.messager 消息窗口
消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
在这里插入图片描述

easyUI中layout 布局介绍

1.panel 面板

<div id="p" class="easyui-panel" title="Panel"     
 style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>   
</div>

在这里插入图片描述
2.tabs 选项卡

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

在这里插入图片描述
3.accordion 分类

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        <p>Accordion is a part of easyui framework for jQuery.     
        It lets you define your accordion component on web page more easily.</p>   
    </div>   
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
        content2    
    </div>   
    <div title="Title3">   
        content3    
    </div>   
</div>

在这里插入图片描述
4.layout 布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split: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:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

在这里插入图片描述

easyUI datagrid和tree介绍

1.Tree 树
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
在这里插入图片描述
MyEclipse对Json格式的文件没有完全支持.
1.建立了一个json文件.MyE将这个空的json发布到了项目下,后期修改了json文件之后,
MyE没有正确的去管理这个文件.
FireBub—>网络—>json–>响应
重新加载发布项目
2.出现乱码将json文件另存为utf-8格式

2.DateGrid 数据表格
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分.
1.html

<table class="easyui-datagrid">   
	    <thead>   
	        <tr>   
	            <th data-options="field:'code',width:220">编码</th>   
	            <th data-options="field:'name'">名称</th>   
	            <th data-options="field:'price'">价格</th>   
	        </tr>   
	    </thead>   
	    <tbody>   
	        <tr>   
	            <td>001</td><td>name1</td><td>2323</td>   
	        </tr>   
	        <tr>   
	            <td>002</td><td>name2</td><td>4612</td>   
	        </tr>   
	    </tbody>   
	</table>

2.js+html
js 代码

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});

网页元素:

<table id="dg"></table>

3.混合方式
标准的Datagrid实现一个CRUD的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>stuMan.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<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="easyui/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
  <script type="text/javascript">
  	var url;
		function newStu(){
			$('#dlg').dialog('open').dialog('setTitle','新用户');
			$('#fm').form('clear');
			url = 'stuAction?flag=addStu';
		}
		function editStu(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','编辑用户');
				$('#fm').form('load',row);
				url = 'stuAction?flag=uptStu&&id='+row.stuId;
			}
		}
		function saveStu(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					//alert(result);
					var result = eval('('+result+')');
					if (result.success){
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}
			});
		}
		function delStu(){
			//得到选中行的数据,row为一个对象
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','确定要删除此用户吗?',function(r){
					if (r){
						$.post('stuAction?flag=delStu',{id:row.stuId},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}
  </script>
  </head>
  
  <body>
    <table id="dg" class="easyui-datagrid" data-options="url:'stuAction?flag=getAllStu',pagination:true,toolbar:'#toolbar'" style="width:500px;height:350px;background:pink;">
    	<thead>
    		<tr>
    			<th data-options="field:'stuNum'">学号</th>
				<th data-options="field:'stuName'">姓名</th>
				<th data-options="field:'stuSex'">性别</th>
				<th data-options="field:'stuAge'">年龄</th>
				<th data-options="field:'stuQQ'">QQ</th>
    		</tr>
    	</thead>
    </table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="newStu()">新建</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editStu()">编辑</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="delStu()">删除</a>
	</div>
	<div id="dlg" style="width:400px;height:300px;background:green" class="easyui-dialog" data-options="buttons:btns,closed:true">
	  <form id="fm" method="post">
	  	<div class="tftitle">学生信息</div>
	  	<div class="fit">
	  		<label>学号</label><input name="stuNum" class="validatebox" data-options="required:true"/>
	  	</div>
		<div class="fit">
	  		<label>姓名</label><input name="stuName" class="validatebox" data-options="required:true"/>
	  	</div>
		<div class="fit">
	  		<label>性别</label><input name="stuSex" class="validatebox" data-options="required:true"/>
	  	</div>
		<div class="fit">
	  		<label>年龄</label><input name="stuAge" class="validatebox" data-options="required:true"/>
	  	</div>
		<div class="fit">
	  		<label>QQ</label><input name="stuQQ" class="validatebox" data-options="required:true"/>
	  	</div>
	  </form>
	</div>
	<div id="btns">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveStu()">保存</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a>
	</div>
</body>
</html>

4.案例开发:
利用Datagrid实现一个CRUD

1.DB的实现详见db.txt
2.Servlet的实现
通过每次提交增加" flag=‘各种操作名称’ " 的方式来减少servlet的数量
3. 2种jar包的加入
数据库jar包
java<–>json 互换需要的jar包
4.StuDB 的实现
getConn();
closeRes(rs,stmt,conn);
closeRes(stmt,conn);
getAllStu();
addStu();
delStu();
uptStu();
getNum();
5.servlet中实现对StuDB层的调用

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <title>DataGrid</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<!--引入Jquery主文件-->
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<!--引入JqueryEasyUI主文件-->
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<!--让easyUI支持中文-->
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
  	<script type="text/javascript">
  		var url;
      function addStu(){
	  	 $("#dlg").dialog({closed:false});
		 url="stu?flag=addStu";
	  }
	  function editStu(){
	  	 var row=$("#dg").datagrid("getSelected");
		 if(row){
		 $("#dlg").dialog({closed:false});
		  $("#fm").form("load",row);
		  url="stu?flag=uptStu&&id="+row.stuId;
		 }
		 
	  }
	  function delStu(){
	  	 var row=$("#dg").datagrid("getSelected");
		 if(row){
		 	$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		        $.post('stu?flag=delStu',{id:row.stuId},function(data){
					//alert(data);
					if(data.result)
					{
						$("#dg").datagrid("reload");
					}else{
						
					}
					
				},"json");    
		    }    
		}); 
		 }
	  }
	  function saveStu(){
	  	$('#fm').form('submit', {    
		    url:url,    
		    onSubmit: function(){  
			  //表单验证  
		    },    
		    success:function(data){    
		       var data=eval("("+data+")");
			   if(data.result){
			   	  $('#dlg').dialog({closed:true});
				  $("#dg").datagrid("reload");
			   }   
		    }    
		}); 
	  }
	</script>
  </head>
  <body>   
   
   <table id="dg" class="easyui-datagrid" style="width:700px;height:350px"   
        data-options="url:'stu?flag=getAllStu',fitColumns:true,singleSelect:true,pagination:true,toolbar:'#tb'">   
    <thead>   
        <tr>   
            <th data-options="field:'stuNum',width:100">学号</th>   
            <th data-options="field:'stuName',width:100">姓名</th> 
            <th data-options="field:'stuSex',width:100">性别</th>
			<th data-options="field:'stuAge',width:100">年龄</th>
			<th data-options="field:'stuQQ',width:100">QQ</th>   
        </tr>   
    </thead>   
   </table>  
   <div id="tb">
   	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addStu()"> 新建</a>
	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editStu()"> 编辑</a>
	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="delStu()"> 删除</a>
   </div>
   <div id="dlg" class="easyui-dialog" style="width:300px;height:200px;background:gray" data-options="buttons:'#btns',closed:true">
   	   <form id="fm" method="post">
   	   	   <center>学员信息</center>
   	   	   学号:<input type="text" name="stuNum"/><br/>
		   姓名:<input type="text" name="stuName"/><br/>
		   性别:<input type="text" name="stuSex"/><br/>
		   年龄:<input type="text" name="stuAge"/><br/>
		  QQ:<input type="text" name="stuQQ"/><br/>
   	   </form>
   </div>
   <div id="btns">
   	<a href="#" class="easyui-linkbutton" onclick="saveStu()">保存</a>
	 <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog({closed:true})">取消</a>
   </div>
</body>  
</html>

Stu.java

package com.servlets;

public class Stu {
	private int stuId;
	private int stuNum;
	private String stuName;
	private String stuSex;
	private int stuAge;
	private String stuQQ;
	public Stu(int stuId, int stuNum, String stuName, String stuSex,
			int stuAge, String stuQQ) {
		super();
		this.stuId = stuId;
		this.stuNum = stuNum;
		this.stuName = stuName;
		this.stuSex = stuSex;
		this.stuAge = stuAge;
		this.stuQQ = stuQQ;
	}
	public int getStuId() {
		return stuId;
	}
	public void setStuId(int stuId) {
		this.stuId = stuId;
	}
	public int getStuNum() {
		return stuNum;
	}
	public void setStuNum(int stuNum) {
		this.stuNum = stuNum;
	}
	public String getStuName() {
		return stuName;
	}
	public void setStuName(String stuName) {
		this.stuName = stuName;
	}
	public String getStuSex() {
		return stuSex;
	}
	public void setStuSex(String stuSex) {
		this.stuSex = stuSex;
	}
	public int getStuAge() {
		return stuAge;
	}
	public void setStuAge(int stuAge) {
		this.stuAge = stuAge;
	}
	public String getStuQQ() {
		return stuQQ;
	}
	public void setStuQQ(String stuQQ) {
		this.stuQQ = stuQQ;
	}
	public Stu() {
	}
}

StuAction.java

package com.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class StuAction extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
		
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String flag=request.getParameter("flag");
		StuDB tt=new StuDB();
		
		if(flag.equals("getAllStu")){
			String pg=request.getParameter("page");
			String pgSize=request.getParameter("rows");
			if(null==pg||"".equals(pg)){
				pg="1";
			}
			if(null==pgSize||"".equals(pgSize)){
				pgSize="10";
			}
			List a=tt.getAllStu(Integer.parseInt(pg), Integer.parseInt(pgSize));
			int num=tt.getNum();
			Map m=new HashMap();
			m.put("total", num);
			m.put("rows", a);
			JSONArray js=JSONArray.fromObject(m);
			System.out.println(js);
			String j=js.toString();
			String jz=j.substring(1, j.length()-1);
			System.out.println(jz);
			out.println(jz);
		}
		if(flag.equals("addStu")){
			String id=request.getParameter("stuId");
			String num=request.getParameter("stuNum");
			String name=request.getParameter("stuName");
			String sex=request.getParameter("stuSex");
			String age=request.getParameter("stuAge");
			String qq=request.getParameter("stuQQ");
			Stu s=new Stu(1,Integer.parseInt(num),name,sex,Integer.parseInt(age),qq);
			boolean f=tt.addStu(s);
			Map m=new HashMap();
			if(f){
				m.put("result","true");
			}else{
				m.put("msg","save error");
			}
			JSONObject js=JSONObject.fromObject(m);
			System.out.println(js);
			out.println(js);
		}
		if(flag.equals("delStu")){
			String id=request.getParameter("id");
			boolean f=tt.delStu(Integer.parseInt(id));
			Map m=new HashMap();
			if(f){
				m.put("result","true");
			}else{
				m.put("msg","del Error");
			}
			JSONObject js=JSONObject.fromObject(m);
			System.out.println(js);
			out.println(js);
		}
		if(flag.equals("uptStu")){
			String id=request.getParameter("id");
			String num=request.getParameter("stuNum");
			String name=request.getParameter("stuName");
			String sex=request.getParameter("stuSex");
			String age=request.getParameter("stuAge");
			String qq=request.getParameter("stuQQ");
			Stu s=new Stu(Integer.parseInt(id),Integer.parseInt(num),name,sex,Integer.parseInt(age),qq);
			boolean f=tt.uptStu(Integer.parseInt(id), s);
			Map m=new HashMap();
			if(f){
				m.put("result","true");
			}else{
				m.put("result","false");
			}
			JSONObject js=JSONObject.fromObject(m);
			System.out.println(js);
			out.println(js);
		}
		out.flush();
		out.close();
	}
	
}

StuDB.java

package com.servlets;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

public class StuDB {
	public Connection getConn(){
		Connection conn=null;
		try {
			Class.forName("com.mysql.jdbc.Driver");
			conn=DriverManager.getConnection("jdbc:mysql://localhost/stu","root","root");	
		} catch (Exception e) {
			e.printStackTrace();
		}
		return conn;
	}
	
	public  void closeRes(ResultSet rs,Statement stmt,Connection conn){
		try {
			if(rs!=null){
				rs.close();
				rs=null;
			}
			if(stmt!=null){
				stmt.close();
				stmt=null;
			}
			if(conn!=null){
				conn.close();
				conn=null;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public  void closeRes(Statement stmt,Connection conn){
		try {
			if(stmt!=null){
				stmt.close();
				stmt=null;
			}
			if(conn!=null){
				conn.close();
				conn=null;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public List getAllStu(int pg,int pgSize){
		List a=new ArrayList();
		Connection conn=null;
		Statement stmt=null;
		ResultSet rs=null;
		try {
			conn=getConn();
			stmt=conn.createStatement();
			String sql="select * from stu limit " +(pg-1)*pgSize + "," +pgSize+";";
			System.out.println(sql);
			rs=stmt.executeQuery(sql);
			while(rs.next()){
				int stuId=rs.getInt(1);
				int stuNum=rs.getInt(2);
				String stuName=rs.getString(3);
				String stuSex=rs.getString(4);
				int stuAge=rs.getInt(5);
				String stuQQ=rs.getString(6);
				Stu ss=new Stu(stuId,stuNum,stuName,stuSex,stuAge,stuQQ);
				a.add(ss);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			closeRes(rs, stmt, conn);
		}
		return a;
	}
	
	public boolean delStu(int id){
		boolean flag=false;
		Connection conn=null;
		Statement stmt=null;
		ResultSet rs=null;
		try {
			conn=getConn();
			stmt=conn.createStatement();
			String sql="delete from stu where stuId="+id+"";
			System.out.println(sql);
			int num=stmt.executeUpdate(sql);
			if(num>0){
				flag=true;
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			closeRes( stmt, conn);
		}
		return flag;
	}
	public boolean uptStu(int id,Stu s){
		boolean flag=false;
		Connection conn=null;
		Statement stmt=null;
		ResultSet rs=null;
		try {
			conn=getConn();
			stmt=conn.createStatement();
			String sql="update stu  set stuNum="+s.getStuNum()+",stuName='"+s.getStuName()+"',stuSex='"+s.getStuSex()+"',stuAge="+s.getStuAge()+",stuQQ='"+s.getStuQQ()+"' where stuId="+id+"";
			System.out.println(sql);
			int num=stmt.executeUpdate(sql);
			if(num>0){
				flag=true;
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			closeRes( stmt, conn);
		}
		return flag;
	}
	
	public boolean addStu(Stu s){
		boolean flag=false;
		Connection conn=null;
		Statement stmt=null;
		ResultSet rs=null;
		try {
			conn=getConn();
			stmt=conn.createStatement();
			String sql="insert into stu values(null,"+s.getStuNum()+",'"+s.getStuName()+"','"+s.getStuSex()+"',"+s.getStuAge()+",'"+s.getStuQQ()+"');";
			System.out.println(sql);
			int num=stmt.executeUpdate(sql);
			if(num>0){
				flag=true;
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			closeRes( stmt, conn);
		}
		return flag;
	}
	
	public int getNum(){
		int num=0;
		List a=new ArrayList();
		Connection conn=null;
		Statement stmt=null;
		ResultSet rs=null;
		try {
			conn=getConn();
			stmt=conn.createStatement();
			String sql="select count(*) from stu";
			System.out.println(sql);
			rs=stmt.executeQuery(sql);
			while(rs.next()){
				num=rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			closeRes(rs, stmt, conn);
		}		
		return num;
	}

	
}

Test.java

package com.servlets;

import java.util.List;

public class Test {
	public static void main(String[] args) {
		StuDB s=new StuDB();
//		List a=s.getAllStu(2, 10);
//		for (int i = 0; i < a.size(); i++) {
//			Stu ss=(Stu)a.get(i);
//			System.out.print(ss.getStuNum()+" ");
//			System.out.println(ss.getStuName());
//		}
		
//		boolean f=s.addStu(new Stu(1,101,"smith","femail",18,"123456"));
//		System.out.println(f);
		
//		boolean f=s.delStu(13);
//		System.out.println(f);
		
		boolean f=s.uptStu(11,new Stu(1,101,"lily","mail",18,"123456"));
		System.out.println(f);
	}
	
}

dexi.Chi 攻城狮

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI学习笔记

EasyUI1.JqueryEasyUI是什么？jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。但功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开...
复制链接

扫一扫