eayUI中测试《一》获取数据和展示在列表中的数据展示，删除数据，修改数据，增加数据

最新推荐文章于 2024-05-27 12:07:42 发布
最新推荐文章于 2024-05-27 12:07:42 发布
阅读量980 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd521521/article/details/71336944
版权 





   
   

   
   
	
    
    
	
	
    
    
	
    
    
		
     
     
		
     
     
		
     
     
		
     
     
		
     
     
		
     
     
		
     
     
	
    
    

	
    
    
	
    
    
		
     
     
			
      
      
				
       
       
         classpath:smtp/*/*.properties 
       
				
       
       
         classpath:config/*.properties 
       
			
      
      
		
     
     
	
    
     
	
	
    
    
		
     
     
			
      
      
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
        
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
				
       
       
			
      
      
		
     
     
	
    
    
	
	
    
    

	
    
    
	
    
    

	
    
    
	
    
    

	
    
    
	
    
    
		
     
     
		
     
     
	
    
    

	
    
    
	
    
    
		
     
     
			
      
      
			
      
      
			
      
      
			
      
      
			
      
      
		
     
     
	
    
    
	
	
    
    

	
    
    
	
    
    
		
     
     
		
     
     
      
      
       
       Kh2011$En51
地址请求的时候有项目名但是通过，引用js时候就没有项目名

主要原因是：js的引用文件夹的名要和文件夹在一个目录下。

一般情况class是不能修改的，因为我们引用的时是esyUI封装好的数据

title是表格的名，例如：使用js的引用

collapsible：为true时，是允许有一个收缩栏

url：是我们请求的路径，

method：get或者post我们请求的方式

tr标签是行，th标签是列

标签table中的id=datagrid_id是确定一个id，通过这个id可以直接引用封装在js中的数据

datagrid（）这个不能修改这是个固定写fa

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">

<title>商品的表格</title>
<link rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath}/3rd/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath}/3rd/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.easyui.min.js"></script>
<!-- 引入一个中文的js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>
</head>
<body>
	<!-- <table id="datagrid_id" class="easyui-datagrid"  style='display: none; float: none;' align="center"></table> -->
	 <table id="datagrid_id" class="easyui-datagrid"  style='display: none; float: none;' align="center"></table>
	<div id="add" >
		<div style="padding:10px 60px 20px 60px"> 
	    <form id="formId" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>商品名:<input id="pidId" type='hidden' name='gid' value=""></td>
	    			<td><input id="gnameId"  type="text" name="gname" data-options="required:true" value=""/></td>
	    		  
	    		     
	    		</tr>
	    		<tr>
	    			<td>商品价格:</td>
	    			<td><input id="gpriceId" class="easyui-textbox" type="text" name="gprice" data-options="required:true" value=""></input></td>
	    		</tr>
	    		<tr>
	    			<td>商品的数量:</td>
	    			<td><input id="gcountId" class="easyui-textbox" type="text" name="gcount" data-options="required:true" value=""></input></td>
	    		</tr>
	    		<tr>
	    			<td>商品简介：</td>
	    			<td><input id="gcontentId" class="easyui-textbox" name="gcontent" data-options="multiline:true" style="height:60px" value=""></input></td>
	    		</tr>
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">确定</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">取消</a>
	    </div>
	</div>
  </div>	
</body>
</html>

===================================================================================== 
$(function() {
	// datagrid()是固定写法===============================获取数据分页展示数据===================================================
	$("#datagrid_id").datagrid({
		url:'taotao/goods/datagrid.action',
		method:'post',
		columns : [ [ {
			field : 'gid',
			title : '商品的Id',
			width : 100
		}, {
			field : 'gname',
			title : '商品名',
			width : 100
		}, {
			field : 'gprice',
			title : '价格',
			width : 100,
			align : 'center'
		}, {
			field : 'gcount',
			title : '总的数量',
			width : 100,
			align : 'center'
		}, {
			field : 'gcontent',
			title : '商品的简介',
			width : 100,
			align : 'center'
		}, {
			field : 'gdate',
			title : '时间',
			width : 100,
			align : 'center'
		}, {
			field : 'gphoto',
			title : '图片地址',
			width : 100,
			align : 'center'
		} ] ],
		title : '使用js引用的表',
		width : '800px',
		height : '350px',
		fitColumns : true,
		collapsible : true,
		singleSelect : true,//只能选择一个
	  /* style="width: 60%;margin:auto",*/
		pageNumber:1, //初始化页码
		pageSize:'5',//初始化页的数据
		pageList: [5,7,15,20],//每页含有的数据
		pagination : true,//分页添加的工具栏
		rownumbers :true, //展示行列号
		toolbar:[{ //添加工具栏
			text:'添加按钮',
			iconCls:'icon-add',
			handler:function(){
				$('#formId').form('clear');//先删除弹框里面的按钮
				$('#add').dialog('open')//点击添加按钮的时候进行添加数据.dialog('close')是关闭按钮
			}
		},'-',{
			text:'删除按钮',//+++++++++++++++++++++++++++++通过下选中的数据的id删除数据++++++++++++++++++++++++++++++++++++++++++++
			iconCls:'icon-clear',
			handler:function(){
				//获取对应的id，$('#id').datagrid('getSelected');//返回一个选中的行，没有选中返回的时null
				//在通过ajax进行数据的返回的
				var rowId = $('#datagrid_id').datagrid('getSelected');
				//console.log(rowId.gid);
				if(rowId!=null){
					//不为空选择了数据
					$.ajax({
						type:'post',
						url:'taotao/goods/delete.action',
						data:{gid:rowId.gid},//选中行的数据
						dataType:'json',
						success:function (data){
							if(data){
								alert("删除成功");
								$('#datagrid_id').datagrid('reload');//加载当前页面
								//$('#datagrid_id').datagrid('load');//重新加载页面
								
							}else{
								alert('删除失败');
							}
						}
					});
					
				}else{
					alert('请选择数据');
				}
           }
		},'-',{
			text:'编辑按钮',//++++++++++++++++++++++++++++++++++通过选行的id编辑数据+++++++++++++++++++++++++++++
			iconCls:'icon-edit',
			handler:function(){
				var rowId = $('#datagrid_id').datagrid('getSelected');
				if(rowId!=null){
					$.ajax({
						tyep:'post',
						url:'taotao/goods/selectbyid.action',
						data:{gid:rowId.gid},
						dataType:'json',
						success:function (data){
							alert(data.gprice);
							//esyUI有自己封装的数据textbox
							document.getElementById('pidId').value=data.gid; //input标签添加数据
							$("#gpriceId").textbox('setValue',data.gprice); //设定数据
							document.getElementById('gnameId').value=data.gname;
							$('#gcountId').textbox('setValue',data.gcount);
							$('#gcontentId').textbox('setValue',data.gcontent);
							/*document.getElementById('gpriceId').value="1234";*/
							$('#add').dialog({title:'修改商品'});
							$('#formId').form('load',rowId.pid);
							$('#add').dialog('open');
						}
					});
				}else{
					alert("请选择修改的数据");
				}
			}
		
		}],
		singleSelect:true //只能选择一个数据

	});
	

});
//添加函数
$(function (){
	$('#add').dialog({    
	    title: '添加按钮',    
	    width: 400,    
	    height: 300,    
	    closed: true,    //只有电点击的时候才会打开
	    cache: false,    
	   /* href: ,    */
	    modal: false   
	});    
});

//添加或者修改按钮==========================================弹出框中的确定按钮========================确定
function submitForm(){
	var datas = $('#formId').serialize();
	var gname = $('#gnameId').prop('value');
	var gpirce = $('#gpriceId').prop('value');
	var gcount = $('#gcountId').prop('value');
	var id=$("#pidId").val();
	if(gname==''||gpirce==''||gcount==''){
		alert("input数据中不能为空");
		$('#add').dialog('close');
	}
	else if(id !=''){
		//修改数据+++++++++++++++++++++++++++++++++++++++++修改数据的跳转路径++++++++++++++++++++++++++++++++
		$.ajax({
			type:'post',
			url:'taotao/goods/udpatebyid.action',
			data:$("#formId").serialize(),
			dataType:'json',
			success:function (data){
				if(data){
					//修改成功
					alert("修改成功");
					$('#add').dialog('close');
					$('#datagrid_id').datagrid('reload');
				}else{
					//修改失败
					alert("修改失败");
					$('#add').dialog('close');
				}
			}
				
		});
	}else{
	//添加数据++++++++++++++++++++++++++++++++++++添加数据跳转的路径++++++++++++++++++++++++++++++++++++==
	$.ajax({
	    type:'post',
		url:'taotao/goods/insert.action',
		data:$("#formId").serialize(),//form框中的所有的数据
		dataType:"json",
		success: function (data){
			if(data){
				console.log("成功");
				$('#add').dialog('close'); //关闭弹框
				$('#datagrid_id').datagrid("reload");
			}else{
			console.log("失败");
			$('#add').dialog('close'); //关闭弹框
			}
		}
	});
	}
};
//添加按钮==========================================================================================取消
function clearForm(){
	$('#add').dialog('close'); //关闭弹框	
}





<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">

<title>商品的表格</title>
<link rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath}/3rd/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath}/3rd/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/3rd/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery.easyui.min.js"></script>
<!-- 引入一个中文的js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/locale/easyui-lang-zh_CN.js"></script>

</script>
</head>
<body>
     <!-- 定义样式使用的：style -->
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'north'" style="height:100px">
		<h1 style="color:red;float:left;font-size:45px;magin:0 100px 0 100px;">项目开始操作</h1>	
		<span style="float:right;font-size: 14px;margin-top:50px;margin-right:20px">当前用户</span>
		</div>
		<div data-options="region:'west',split:true" title="项目管理" style="width:150px;"></div>
		<div data-options="region:'center',title:'首页'">
		<!-- font-weight:是单纯的加粗，font-family设置字体,text-align:text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐,color控制颜色 -->
		<h1 style="text-align:center;margin-top:200px;font-family:'宋体';font-weight:bold;">hello world ！</h1>
		<h1 style="text-align: center; margin-top: 200px; font-family: '楷体'; font-weight: bold; font-size: 60px; color: red;">欢迎使用</h1>
		</div>
	</div>
</body>
</html>


wd521521
关注
使用jQuery动态创建一个表格（根据用户输入的内容添加一行数据，并且能逐行删除）
03-22 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquery实现添加、移除表格   table{  margin:auto auto; background-color:#9FC;}  td{   width:80px;}
easyUI框架下的select下拉框动态加载数据库中数据
free_girlsh的博客
03-30 1万+
jsp: js: 将下列代码放在页面初始化中执行，其中valueField用于保存数据库中，textField用于显示在前台 var url = ctx + "/sysAgentCompany/querySysAgentCompany.htm"; $.getJSON(url, function(json){ $('#companyId').combobox({ data : jso
SSM+EasayUI-DataGrid表格展现数据库数据。
10-27
SSM+EasayUI-DataGrid表格展现数据库数据。包含后台代码和数据库建表语句
Jquery+Eayui实现列表选择功能
weixin_30251829的博客
02-23 143
在做一个列表选择的功能，要实现一个Jquery列表选择器的效果，如图就是很常见的一种列表选择器 不过网上开源的可能要积分，资料没找到合适的，所以自己就简单写了一下，其实实现也不是很难。实现思路：左边双击之后获取元素，在右边附加上就好，右边选择列表双击之后就移除元素 实现效果： 因为系统功能是easyui做的，页面左边是一个table，也是easyui的datagrid，所以就可以调对应方法获取...
Java Web当中使用EasyUI|快速建立漂亮的后台网站（教程+源代码）
程序员猫爪
08-19 9795
项目源代码下载： 一、EasyUI的概述 1、什么是EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 2、下载EasyUI 官网：https://www.jeasyui.cn/index.php
EasyUI的基本运用
最新发布
05-27 776
1.将文档和依赖文件下载之后，打开你创建的Javaweb项目，先将依赖文件导入项目（直接将文件夹导入），如下图。可通过蓝奏云盘下载：https://yfyp.lanzoub.com/b00eery9vg。
MySql + JDBC +EasyUI DataGrid实现数据表格的展示和分页
07-22
在控制器中，根据前端发送的请求参数，使用JDBC工具类执行分页查询，获取数据后转化为JSON格式返回给前端。 **7. 数据传输对象（DTO）** 为了将数据库中的记录转化为前端友好的格式，通常会定义DTO对象，该对象的...
给我一个eayui datagrid从excel文件导入数据的例子
04-09
可以参考以下代码实现： ...<div id="grid"></div> // JS部分 // 导入Excel文件中的数据 function importExcelData() { $.ajax({ ... type: "POST", dataType: "json", ... // TODO: 增加一个新行 } }] }); });
easyui怎么将前台表单数据传递给后台？
sinat_27087071的博客
07-25 6290
jQuery 代码: $("#results").append( "" + $("form").serialize() + "" ); 项目代码://添加事件 　 $(function() { $("#addBtn").click(function() { $("#addClassesBtn").dialog({
解决EasyUIdataGrid列比较多，无数据，列展现不全
01-07
因此，在实际项目中应综合考虑数据量和性能需求。 3. **用户体验**：虽然隐藏空行可以避免视觉干扰，但仍然建议通过提示信息告知用户当前没有数据，提高用户体验。 #### 六、总结 通过对EasyUI dataGrid组件的深入...
EasyUI(前端框架)
热门推荐
wyy的博客
07-10 1万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
EasyUI(DataGrid修改&删除)
weixin_56996467的博客
04-12 712
目录 一、项目结构 二、前台代码 三、后台代码 四、运行效果: 一、项目结构 二、前台代码 editBook.jsp： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <form id="bookForm" method="post"> <input type="hidden
eayui子表套子表的设置
我的树洞
12-01 417
我来贴一段代码吧 $('#gridContract').datagrid({             title: '合同信息列表(所有合同)',             iconCls: 'icon-tb',             nowrap: true,                   //内容不换行             autoRowHeight: true,    
一个列表页面的测试用例的组织
aivey
10-26 5656
列表页面显示： 1.   确认页面的默认排序方式，字段+升降续； 2.   含link的列，验证其有效性，即，点击后的跳转是否正确； 3.   第一列的选择框，“全选”和“部分 选择”需有效；部分选中时，全选按钮应自动取消。   顶部搜索功能： 4.   逐个测试每个搜索条件的有效性； 5.   做2-3个组合条件的查询，验证结果；合计共有N+3个搜索条件的测试。 6.   有时间
springcloud项目中遇到的一些坑
weixin_30662109的博客
08-04 782
参考 https://blog.csdn.net/zhangjq520/article/details/89448901 https://www.cnblogs.com/dgcjiayou/articles/9591253.html 转载于:https://www.cnblogs.com/lishenghua/p/11298357.html
2016/10/23 14:04关于怎么动态刷新easyUI的toolbar,实现按钮权限
u012432389的博客
07-17 545
1、如果你的toolbar是这种新式的： $('#dg').datagrid({     toolbar: '#tb' }); &lt;div id="tb"&gt;     &lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a&gt;     &lt;a href=
JqueryEasyUI如何使用
一笑奈何
04-18 7864
JqueryEasyUI1.       准备2.       布局Layout3.       手风琴Accordion4.       菜单树Tree5.       数据表格DataGrid6.       内容页Tabs7.       表单     关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，下面我们就一步一步来创建.         1.准备 htt...
打造自己的eayui平台框架
qq_40263927的博客
06-03 311
easyui可以用不同的组件搭出不一样的框架出来。如下图，我是用easyui-accordion 做为框架左侧菜单的父容器。 前端jsp代码： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java...
Ajax获取后台数据遍历显示在前台html
潇心的博客
07-07 6996
$(document).ready(function() { $.ajax({ url : “newsservlet”,//请求地址 dataType : “json”,//数据格式 type : “post”,//请求方式 async : false,//是否异步请求 success : function(data) { //如何发送成功 var html = “”; for(var i=0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值