easyui 简单数据库查询 和 添加

最新推荐文章于 2024-09-15 16:35:16 发布
最新推荐文章于 2024-09-15 16:35:16 发布
阅读量2.9k 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/52036127
版权

1、在项目的基础上添加：点击打开链接

2、welcome.jsp：

 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Basic Panel - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./easyui/demo/demo.css">
	<script type="text/javascript" src="./easyui/jquery.min.js"></script>
	<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h2>Basic Layout</h2>
	<p>The layout contains north,south,west,east and center regions.</p>
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:700px;height:350px;">
		<div data-options="region:'north'" style="height:50px">
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="$('#p').panel('open')">Add</a>
		</div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<table class="easyui-datagrid"
					data-options="url:'queryEmployee.html',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
				<thead>
					<tr>
						<th data-options="field:'id'" width="80">Id</th>
						<th data-options="field:'age'" width="100">Age</th>
						<th data-options="field:'name'" width="100">Name</th>
						<th data-options="field:'salary'" width="80">Salary</th>
						<th data-options="field:'department'" width="200">Department</th>
						<th data-options="field:'position'" width="150">Position</th>
						<th data-options="field:'phone'" width="200">Phone</th>
						<th data-options="field:'e_mail'" width="200">E-Mail</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<div id="p" class="easyui-window" title="Add New Employee" data-options="iconCls:'icon-save'" closed="true" style="width:500px;height:500px;padding:5px;">
		<div style="padding:10px 60px 20px 60px">
		    <form id="ff" method="post">
		    	<table cellpadding="7">
		    		<tr>
		    			<td>Age:</td>
		    			<td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>Name:</td>
		    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>Salary:</td>
		    			<td><input class="easyui-textbox" type="text" name="salary" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>Department:</td>
		    			<td><input class="easyui-textbox" type="text" name="department" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>Position:</td>
		    			<td><input class="easyui-textbox" type="text" name="position" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>Phone:</td>
		    			<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></input></td>
		    		</tr>
		    		<tr>
		    			<td>E-Mail:</td>
		    			<td><input class="easyui-textbox" type="text" name="e_mail" data-options="required:true"></input></td>
		    		</tr>		    		
		    	</table>
		    </form>
		    <div style="text-align:center;padding:5px">
		    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
		    </div>
	    </div>
	</div>
	<script>
		function submitForm(){
			$('#ff').form('submit',{ 
				url : 'createEmployee.html', 
				onSubmit : function() { 
					return $(this).form('validate');//对数据进行格式化 
				}, 
				success : function(data) { 
					$.messager.show({ 
						title : 'Added success!', 
						msg : data 
					}); 
				} 
			});
		}
		function clearForm(){
			$('#ff').form('clear');
		}
	</script>
</body>
</html>

 

 

 

 

 

BusyMonkey
关注
专栏目录
easyUI-datagrid + 假数据
杨月娥
09-21 2706
前言     在组长齐伟的带领下，我们的审批系统开发进入了HTML页面编写阶段，在这个阶段中最让我头疼的就是怎么在页面上的datagrid表格上显示一堆数据里，请了大牛亮亮过来帮忙，可是他也没解决，于是只有先放着，随着页面开发阶段，假数据也不得不提上日程啊。躲不掉，只能迎难而上了，最后解决了，忽然发现也没什么难的。回来总结一下。 过程       首先我们是需要制造一些数据出来，以便
easyui05
m0_61561140的博客
04-12 198
目录 一，项目结构分布 二，代码片段 三，界面展示 一，项目结构分布 二，代码片段 2.1dao层代码方法 @Override public void addBook(Book book) { Connection con = null; PreparedStatement ps = null; String sql = "insert into t_book value (id,bookname,price, booktype) " .
EasyUI(分页&模糊查询)
qq_63845026的博客
04-09 1541
目录 一、创建数据库 二、创建包结构 三、页面搭建 四、entity层开发 五、dao层开发 六、service层开发 七、servlet开发 前言： 这次的功能是基于上一次的项目做的，如果有不懂可以看上一节 ...
掌握jQuery EasyUI：前端开发框架
最新发布
weixin_33431149的博客
09-15 2235
本文还有配套的精品资源，点击获取 简介：jQuery EasyUI 是一个基于 jQuery 的前端框架，通过简单的 HTML 标签和 JavaScript API，实现了复杂的用户界面功能。该框架包括一系列组件，如布局、窗口、表格、表单等，旨在简化网页开发并提供丰富的交互组件。该压缩包包含了官方的 API 中文版，详细阐述了组件的使用方法和示例代码，以及属性、方法和事件的...
使用easyui连接数据库中数据，并实现动态分页查询
weixin_33916256的博客
11-30 237
package com.DAO; import java.util.ArrayList; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernat...
EasyUI 添加数据
lovoo的博客
10-22 1027
1、创建toolbar:toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ openAddUserDialog(); } }]2、添加dialog,里面有添加用户的表单<div id="addDialog" data-options="closed:true,modal:true,
EasyUI动态显示后台数据库中的数据
爱是与世界平行
10-26 5837
最近在完成一个项目，采用SSM框架搭建完成，前端使用EasyUI搭建页面； 其中涉及到一个查询显示功能；查询数据库中的数据，动态显示在页面之中，刚开始这部分十分有疑问，所以虚心向同学学习，现总结至博客当中，以待继续深入学习。 首先，需要根据EasyUI搭建一个前端页面； 代码实现： &lt;body&gt; &lt;div id="p" class="easyui-pa...
domino xpages easyui在本数据库引用方法
02-26
本篇文章将深入探讨如何在 Domino XPages 中正确引用 EasyUI 并在当前数据库中使用它。 首先，我们需要引入 EasyUI 的资源。这通常通过在 XPage 的 `<xp:this.resources>` 标签中添加相应的 `<xp:styleSheet>` 和 `...
EasyUI从数据库获取数据填充下拉框
阳光丶不锈
07-27 5003
EasyUI从数据库获取数据填充下拉框 这里引用一个简单的小DEMO来演示一下 JSP页面 在JSP页面中，添加一个input标签，给标签加上如下属性type:text id : name: class:这里一定要写easyui-combobox data-options=” eaitable(是否可以编辑),valueField:,textField:,url:(请求后台的地址),pro
easyUI
weixin_66116818的博客
05-07 348
一.easyUI的简介 easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。 EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 二.easyUI的不足之处 现在据了解到有三种UI框架，分别是easyUI、bootstra...
easyui+ssh(增删改模糊查询，导出数据)
05-24
- **增删改操作**：在EasyUI的表格组件中，可以通过添加编辑和删除按钮，结合后端的Struts2 Action实现对数据的增删改操作。 - **数据导出**：后端可以使用Apache POI库来生成Excel文件，然后通过HTTP响应返回给...
jQuery easyUI datagrid绑定数据库
u014671607的博客
04-04 1570
在这里给出简单的数据绑定代码，在前端页面的代码编写中，其实要注意的地方不是很多，利用jQuery easyUI 提供的API 就可以写出来了，主要是后台应用程序的写法，数据的绑定都是可以在这里完成的，所以对于处理一般应用程序的时候我是这样考虑的： 1、创建一个相关的.ashx文件是必须的， 2、成功连接数据库，获取数据里的数据表的内容（注意，这里要获得数据库的相应的表dataT
easyUI动态插入数据，插入完毕后渲染控件
lengxin337的专栏
02-06 717
var datagrid = $('#purchase_add_goods_datagrid');      //根据索引选中行，获取该行数据，然后生成html    datagrid.datagrid('selectRow', index);    var row = datagrid.datagrid('getSelected'); //添加行数据    var is_have = false...
jquery easyui mysql_easyui + jdbc 实现简单的数据库管理。
weixin_39968801的博客
01-27 140
分布式消息队列RocketMQ部署一.RocketMQ简介: RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 1.支持严格的消息顺序: 2.支持Topic与Queue两种模式: 3.亿级消息堆积能力: 4.比较友好 ...Java异常-一般异常和运行时异常的区别Java提供了两类主要的异常:runtime exception和checked exception.checked ...
（札记）EasyUI 增删改查基本实现
wzs298的专栏
12-29 4772
实现的功能：     1、添加数据     2、编辑数据     3、删除数据     4、搜索数据     5、分页功能     6、行双击事件     7、鼠标右键菜单     8、复选框，批量删除 效果图： 源码: <%-- Created by IntelliJ IDEA. User:
easyui实现ValidateBox自定义验证数据库中是否存在重复字段
current_person的博客
01-20 3978
1.jsp页面代码 var isRepetition = false; $.extend($.fn.validatebox.defaults.rules, { myminLength : { validator : function(value, param) { var b = $('#pg').propertygrid('getData'); //alert(
jQuery EasyUI使用教程之创建一个链接按钮
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
10-16 980
jQuery EasyUI最新版下载> 本教程主要为大家展示如何使用jQuery EasyUI创建一个链接按钮。通常情况下，使用“button/”元素来创建一个按钮；使用“a/”元素来创建链接按钮。所以事实上一个链接按钮是一个显示为按钮样式“a/”元素。 查看演示 为了创建一个链接按钮，你所需要做的就是添加一个名为'easyui-linkbutton'的类属性到“a/”元
使用easyUI创建一个CRUD的应用
血公子的专栏
12-23 1707
crud成为普遍的应用去搜集数据和正常的管理.CRUD允许我们生成页面列表和编辑数据库数据,这个教程将告诉你如何实现CRUD DataGrid 使用easyUI框架. 我们将要使用以下插件: datagrid: 显示用户列表数据.dialog: 创建或者编辑单个用户信息.form: 使用form提交数据.messager: 显示一些操作信息. 第一步: 准备好数据库 我们将使用
easyui(datagrid数据查询)
weixin_66202611的博客
05-07 929
简介： DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 《案例演示》 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 <table class="easyui-datagrid"> <thead> <tr&.
使用jQuery easyUI创建动态多条件查询
在Web开发中，jQuery EasyUI是一个基于jQuery的UI库，提供了丰富的组件和样式，使得创建交互式用户界面变得更加简单。在数据查询场景中，用户可能需要根据多个条件进行筛选，因此动态生成多条件查询功能变得尤为重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值