easyUI学习笔记-----datagrid

最新推荐文章于 2020-01-30 20:29:33 发布
最新推荐文章于 2020-01-30 20:29:33 发布
阅读量670 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： easyUI笔记 文章标签： easyui datagrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RyansChen/article/details/53398246
这篇博客记录了作者在项目中使用easyUI框架的datagrid组件时的经验，主要聚焦于jsp页面上的实现和应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中用到easyUI，记录下自己写的代码。

jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>库管设置</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/client/set_warehouse.js"></script>
</head>
<body>
	<table id="warehouseManage" style="height: 566px;width:100%"></table>
	<div id="addWarehouse" class="easyui-dialog" style="display:none;">
		<form method="post" id="addWarehouse_fm" >
				<table cellspacing="8px;">
					<tr>
						<td>排序：</td>
						<td>
							<input type="text" id="sortCode_fm" name="sortCode_fm" 
							value="100"class="easyui-validatebox"/> 
							<span style="color: red">*</span>
						</td>
					</tr>
					<tr>
						<td>库名称：</td>
						<td>
							<input type="text" id="warehouseName_fm" name="warehouseName_fm" 
							value="" class="easyui-validatebox"/> 
							<span style="color: red">*</span>
						</td>
					</tr>
					<tr>
						<td>备注：</td>
						<td>
							<textarea rows="8" cols="16"  id="remark_fm" 
							name="remark_fm" class="easyui-validatebox"></textarea>
						</td>
					</tr>
				</table>
			</form>
	</div>
	<div id="updateWarehouse" style="display:none;">
			<form method="post" id="updateWarehouse_fm" >
			<table cellspacing="8px;">
				<tr>
					<td>库id：</td>
					<td>
						<input type="text" id="warehouseId_update_fm" name="warehouseId_update_fm" 
						class="easyui-validatebox" disabled/> 
						<span style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>排序：</td>
					<td>
						<input type="text" id="sortCode_update_fm" name="sortCode_update_fm" 
						class="easyui-validatebox" /> 
						<span style="color: red">*</span>
					</td>
				</tr>
				<tr>
					<td>库名称：</td>
					<td>
						<input type="text" id="warehouseName_update_fm" name="warehouseName_update_fm" 
						class="easyui-validatebox"/> 
						<span style="color: red">*</span>
					</td>
				</tr>
				<tr>
					<td>备注：</td>
					<td>
						<textarea rows="8" cols="16"  id="remark_update_fm" name="remark_update_fm" 
						class="easyui-validatebox"/></textarea>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

JS页面 

//******库管设置JS*******


$(function(){
	
 		//-----------------ajax-----------
 		function warehouseManageListAjax(url,data,callback){
 			$.ajax({
 				type: 'post',
 				url: url,
 				dataType:"json", 
 			    /*contentType:"application/json",*/
 				data: data,
 				success: function(result){
 					callback(result);
 				}
 			});
 		};

 		function resetValue() {
 			$('#warehouseName_fm').val("");
 			$('#remark_fm').val("");
 		};
 		//------------查询-----------
 		function searchWarehouseListByWarehouseId(){
 			
 			//var a = $('#inputwarehouseId').val();
 			//$('#warehouseManage').datagrid({url:'../warehouse/getWarehouseById',queryParams:{warehouseId: 'a' }
 			//})
 			$('#warehouseManage').datagrid({  
 			    url:'../warehouse/getWarehouseListById',  
 			    queryParams:{  
 			    	warehouseId:'1'
 			    }  
 			}); 
 			//$('#warehouseManage').datagrid("options").url = '../warehouse/getWarehouseById';  
 			//$('#warehouseManage').datagrid('load',{
 				//warehouseId: $('#inputwarehouseId').val()
 			//})
 			//$('#inputCurrentStock_warehouseId').val('');
 		};	
 		
 		
 		
 		
 		
		//datagrid设置
		$('#warehouseManage').datagrid(//------datagrid设置 start------
					{
					title : '仓库列表', 		//表格标题
					iconCls : 'icon-list',  //表格图标
					nowrap : false, 		//是否只显示一行，即文本过多是否省略部分。
					striped : true,			//隔行变色特性 
					fitColumns : true, 		//防止水平滚动
					scrollbarSize : 0, 		//去掉右侧滚动条列
					//url : '../warehouse/listWarehouse',
					loader:firstloader,
					checkOnSelect : false,  //选中一行同时不会勾选复选框
					idField : 'warehouseId',         //指明哪一个字段是标识字段
					collapsible : false,	//是否可折叠的 
					singleSelect : true,	//只能单选
					frozenColumns : [ [
					{
						field : 'ck',
						checkbox : true
					}
							] ],
					pagination : true, //包含分页
					pageSize : 10,
					pageList : [10, 20, 30 ],//可以设置每页记录条数的列表 
					rownumbers : true,  //如果为true，则显示一个行号列.默认false
					singleSelect : true,//只能单选
					
					columns : [ [  //-----columns start-----
					{
						field : 'warehouseId',
						title : "仓库编号",
						width : 20,
						align : 'center'
					},
					{
						field : 'warehouseName',
						title : "仓库名称",
						width : 20,
						align : 'center'
					},
					{
						field : 'createUsername',
						title : "创建者",
						width : 20,
						align : 'center'
					},
					{
						field : 'createUserId',
						title : "创建者编号",
						width : 20,
						align : 'center',
						hidden : true
					},
					{
						field : 'hotelId',
						title : "宾馆编号",
						width : 20,
						align : 'center',
						hidden : true
					},
					{
						field : 'isPrimary',
						title : "是否主客",
						width : 20,
						align : 'center',
						hidden : true
					},
					{
						field : 'modifyTime',
						title : "修改时间",
						width : 30,
						align : 'center',
						formatter : function(value,row,index) {//将时间戳转换格式
							var times = getDate(value);
							return times;
						} 
					},
					{
						field : 'createTime',
						title : "创建时间",
						width : 30,
						align : 'center',
						formatter : function(value,row,index) {//将时间戳转换格式
							var times1 = getDate(value);
							return times1;
						} 
					},
					{
						field : 'modifyUserId',
						title : "修改者编号",
						width : 20,
						align : 'center',
						hidden : true
					},
					{
						field : 'sortCode',
						title : "排序",
						width : 20,
						align : 'center'
					},
					{
						field : 'version',
						title : "version",
						width : 20,
						align : 'center',
						hidden : true
					},
					{
						field : 'remark',
						title : "备注",
						width : 20,
						align : 'center'
					} 
							  ] ],//-----columns end-----

					toolbar : [  //-----toolbar start-----
							{
								text : '新增',
								iconCls : 'icon-add',
								handler : function() {
						 		//-----------warehouseManageListCallBack-------------
								var addWarehouseManageListCallBack = function (data){
									if(data!=-3333){
										if(data!=-111){
											resetValue();
											$.messager.alert('系统提示','保存成功！');
											addWarehouse_dialog.dialog("close");
											loadList();	
										}else if(data == -111){
											$('#warehouseName_fm').val("");
											$('#remark_fm').val("");
											$.messager.alert('系统提示','输入有误,保存失败！');
										}
									}else{
										$.messager.alert('系统提示','保存失败！');
										addWarehouse_dialog.dialog("close");
									}
								};
								//-----------addWarehouseManageListCallBack end-----------
								//显示添加界面
								var addWarehouse_dialog = $('#addWarehouse').dialog(
											{
												title : '添加仓库信息',
												width : 300,
												iconCls : 'icon-add',
												height : 300,
												closed : false,
												cache : false,
												modal : true, //定义是否将窗体显示为模式化窗口。
												buttons:[{
													text:'保存',
													handler:function(){
														var addWarehouse_url = '../warehouse/AddWarehouse';
														var addWarehouse_data = {};//传递参数
														addWarehouse_data.sortCode = $('#sortCode_fm').val();
														addWarehouse_data.warehouseName = $('#warehouseName_fm').val();
														addWarehouse_data.remark = $('#remark_fm').val();
														warehouseManageListAjax(addWarehouse_url,addWarehouse_data,
																addWarehouseManageListCallBack);
													}
												},{
													text:'关闭',
													handler:function(){
														resetValue();
														addWarehouse_dialog.dialog("close");
														}
												}]
											});
								}
							},
							'-',//在两个按钮中间加    ‘|’ 分割
							{
								text : "删除",
								iconCls : "icon-cut",
								handler : function() {
									//选中要修改删除的行
									var rows = $("#warehouseManage").datagrid('getSelections'); //返回所有选中的行
									
									if (rows.length == 1) {//选中几行的话触发事件
											//获得库id
											var warehouseId = rows[0].warehouseId;
											// 获得删除行索引    //返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值
											var tableindex = $("#warehouseManage").datagrid('getRowIndex',rows[0]); 
											
										$.messager.confirm("提示","您确定要删除该仓库信息吗？",
												function(res) {//提示是否删除
														if (res) {
															 $.post('../warehouse/DelWarehouse',{warehouseId : warehouseId},
																	function(data) {
																		if (data != -3333) {
																			//删除选中的行
																			$("#warehouseManage").datagrid("deleteRow",tableindex);
																			//刷新
																			$("#warehouseManage").datagrid("reload");
																			$.messager.alert("系统提示", "数据已成功删除！");
																		} else {
																			$.messager.alert('系统提示','删除失败!','error');
																		}
																	}); 
														}
												});
									}else{
										$.messager.alert("系统提示", "请选择要删除的数据！");
									}
								}
							},
							'-',
							{
								text : "修改",
								iconCls : "icon-edit",
								handler : function() {
								//-----------editWarehouseManageListCallBack start-----------
								var editWarehouseManageListCallBack = function (data){
									if(data!=-3333){
										if(data!=-111){
											$.messager.alert('系统提示','修改成功！');
											editWarehouse_dialog.dialog("close");
											loadList();	
										}else if(data == -111){
											$.messager.alert('系统提示','修改失败！');
										}
									}else{
										$.messager.alert('系统提示','修改失败！');
										editWarehouse_dialog.dialog("close");
									}
								};
								//-----------editWarehouseManageListCallBack end-----------
									
								var rows = $("#warehouseManage").datagrid('getSelections'); //返回所有选中的行
								if (rows.length == 1) {//选中1行的话触发事件
									//获得修改前的信息
									var warehouseId = rows[0].warehouseId;
									var warehouseName = rows[0].warehouseName;
									var sortCode = rows[0].sortCode;
									var remark = rows[0].remark;
									$('#warehouseId_update_fm').val(warehouseId);
									$('#warehouseName_update_fm').val(warehouseName);
									$('#sortCode_update_fm').val(sortCode);
									$('#remark_update_fm').val(remark);
									
									//选中要修改修改的行的索引   //返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值
									var tableindex = $("#warehouseManage").datagrid('getRowIndex',rows[0]); 
									//显示修改界面
									var editWarehouse_dialog = $('#updateWarehouse').dialog(
											{
												title : '修改仓库信息',
												width : 300,
												iconCls : 'icon-edit',
												height : 300,
												closed : false,
												cache : false,
												modal : true,
												buttons:[{
													text:'保存',
													handler:function(){
															var editWarehouse_url = '../warehouse/EditWarehouse';
															var editWarehouse_data = {};//传递参数
															editWarehouse_data.remark = $('#remark_update_fm').val();
															editWarehouse_data.sortCode = $('#sortCode_update_fm').val();
															editWarehouse_data.warehouseId = $('#warehouseId_update_fm').val();
															editWarehouse_data.warehouseName = $('#warehouseName_update_fm').val();
															warehouseManageListAjax(editWarehouse_url,editWarehouse_data,
																	editWarehouseManageListCallBack);
														    }
												},{
													text:'关闭',
													handler:function(){
														resetValue();
														updateWarehouse_dialog.dialog("close")
														}
												}]
											});
									}else{
										$.messager.alert("系统提示", "请选择要修改的数据！");
										return;
									}
								}
							},
							'-',
				            {
				            	text: '仓库编号:'
				            },
				            '-',
				            {
				            	text: '<input type="text" id="inputwarehouseId" placeholder="仓库编号"/>'
				            }, 
				            '-',
				            {
				            	text: '查询',
				            	iconCls: 'icon-search',
				            	handler: function(){
				            		if($('#inputwarehouseId').val() == ""){//输入为空，查询所有
				            			//$('#warehouseManage').datagrid("options").url = '../warehouse/listWarehouse';
				            			$('#warehouseManage').datagrid("options").loader=firstloader;
				            			$("#warehouseManage").datagrid("reload");
				            		
				            		}else{
				            			//$('#warehouseManage').datagrid("options").url = '../warehouse/getWarehouseListById';
				            			//$('#warehouseManage').datagrid('load',{warehouseId: $("#inputwarehouseId").val()});
				            			
				            			intwarehouseid=parseInt($('#inputwarehouseId').val());

				            			$('#warehouseManage').datagrid("options").loader=searchloader;
				            			$("#warehouseManage").datagrid("reload");  
				            
				            		}
				            		
				            		
				            	/*	var newData =[];
				            		var gridData = $("#warehouseManage").datagrid('getData');//获取当前grid的所有数据
				            		console.info(gridData);
				            		for(var i =0;i<gridData.total;i++){
				            			console.info(gridData[i].warehouseId);*/
				            		    /*if (gridData[i].warehouseId == $('#inputwarehouseId').val()) {
				            		        newData.push(gridData[i]);
				            		    }*/

				            		//}
				            		//$("#warehouseManage").datagrid('loadData',newData);
				            	}
				            } ], //-----toolbar end-----
							
							onLoadError : function(){
								$.messager.alert('温馨提示','数据加载失败!');
							}
			});//------datagrid设置 end------
						
			displayMsg();
			 //改变分页显示
		    function displayMsg(){
				 $('#warehouseManage').datagrid('getPager').pagination({  
		        		displayMsg : '当前显示<font color="red"> {from} - {to} </font>条记录   共 <font color="red">{total}</font> 条记录'  
		   		});  
			}
			 //刷新页
		    function loadList(){
		    	$("#warehouseManage").datagrid("reload");
			};
			
});//-----ready function end-----


var firstloader=function(param,success,error){
	
	$.ajax({
        url:"../warehouse/listWarehouse",
        type:"post",
        dataType:"json",
        success: function(data){
        	if(data=="-3333" || data=="")
        		{
        		success("[]");
        		return true;
        		}
        	//data="[]";
        	success(data);
        }
        ,error:function(err){
        	alert(err);
        }
	});

};
   
var intwarehouseid=0;
var searchloader=function(param,success,error){
	
	$.ajax({
        url:"../warehouse/getWarehouseListById",
        data:{warehouseId:intwarehouseid},
        type:"post",
        dataType:"json",
        success: function(data){
        	//alert(data);
        	var tmpjson=JSON.stringify(data);
        	//alert(tmpjson);
        	if(tmpjson=="[null]")
        		{
        		//清空数据
                $('#warehouseManage').datagrid('loadData', { total: 0, rows: [] });
                success("[]");
        		return true;
        		}
        	if(data=="-3333" || data=="")
    		{
        		//清空数据
                $('#warehouseManage').datagrid('loadData', { total: 0, rows: [] });
    		success("[]");
    		return true;
    		}
        	//如果不是用的list方法，这里给json前后加变成数组放入
        	success(data);
        	return true;
        }
        ,error:function(err){
        	alert(err);
        }
	});
};


easyui-datagrid行数据增删改操作
qq_34131878的博客
11-01 4089
最近学习easyui的datagrid数据表格，对数据表格的增删改做一个笔记 视图如下 要求：可进行多行的编辑修改，当点击保存时一起保存，可进行批量删除，新增时当有选择的行时，在该行下边新增，当没有选择时，在首行新增，取消编辑时，所有没保存的数据回滚至修改前数据， jsp端代码： var arr=''; var jsonarr=''; var jsonstr=''; functio
EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版
最新发布
cccloveforever的博客
04-13 2803
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
EasyUI学习笔记
11-26
一、EasyUI的目录结构 1.demo：包含各种插件的案例(不是必须的) 2.locale：包含语言支持的JS文件(是必须的) 3.plugins：各种JS插件包(必须的) 4.src：JS的源码(不是必须的) 5.themes：各种主题的图片资源，样式文件(必须的) 6.jquery.easyui.min.js：easyui的主要js文件(必须的) 7.jquery.min.js：是jquery2.0版本(在上课过程中，会使用1.x版本，因为2.0对低版本浏览器兼容性不好)(jquery是必须的，本课程使用1.x)
EasyUI学习笔记(一)——EasyUI入门
u012369153的专栏
12-05 4658
初识EasyUIEasyUI
JQueryEasyUI学习笔记（一）
萌萌的It人 www.itmmd.com
04-29 3003
欢迎大家转载，转载请注明出处，谢谢！   昨天JSON写的不是很详细，今天补全下。    接触JQueryEasyUI已经有一段时间了，但是自己还只是出于一个小白学习期，所以想系统的学习下： 这个学习笔记是基于孙宇的系列JQueryEasyUI教学视频而来。但是上面用的是Java实现的代码，在这里我将使用.Net实现其代码，并记录下来，希望对自己及大家有所帮助。   前期准备
easyui 学习笔记
qiaqia26的专栏
06-02 343
easyui 用到的笔记，方便以后查找使用
EasyUI 学习笔记
今天的风儿甚是喧嚣
01-30 747
文章目录一、EasyUI 简介1. 概念2. 特点3. 使用目录介绍二、EasyUI 使用步骤1.步骤2.步骤3.三、面板使用(panel)1. 创建面板2. 面板属性3. 创建按钮4. 信息提示5. 示例 一、EasyUI 简介 1. 概念 EasyUI ：（简单用户界面）简单的界面设计框架，作用主要是用来设计网站的后台管理系统，帮助程序员快速的构建网站界面。 2. 特点 基于 jQuery 的...
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
11-25
一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的...
easyui学习笔记（九）源码
04-07
本笔记主要探讨的是 EasyUI 中与 `datagrid` 相关的部分，通过源码我们可以深入了解数据网格的实现细节。 `datagrid` 是 EasyUI 提供的一个核心组件，它用于展示表格数据，并提供了丰富的功能，如排序、分页、过滤...
easyui学习笔记（十三）源码
04-11
在这个"easyui学习笔记（十三）源码"中，我们可以期待深入理解EasyUI的一些关键概念和技术。 首先，EasyUI 的组件系统是其强大之处。组件包括表格（datagrid）、对话框（dialog）、菜单（menu）、下拉框（combobox...
easyUI学习笔记
狗剩的专栏
04-01 745
调用easyUI展示列表每次的调用过程都如下图所示： 第一：(.cs)先是调用后台cs页面的PageLoad方法，或search方法 第二：(.aspx)是页面展示，调用 $('#tList').datagrid() 方法，展示页面布局 第三：(.aspx)$('#tList').datagrid()通过如下参数向后台页面传参数， Datagrid url: "VehicleManage
easyui学习笔记
RollingInTheDeepc的博客
04-19 393
easyui学习笔记 目录 快速入门 依赖说明 布局方式 表单控件 数据校验 依赖说明 1.easyui依赖于jquery框架之上，在使用easyui需要导入jquery相关的文件。 2.引入文件说明 //样式文件必选 &lt;link rel="stylesheet" type="text/css" href="${Config.baseURL }vie...
EasyUI学习笔记记录
dianyanxia的博客
10-16 229
EasyUI 是一个基于JQuery的框架,集成了各种用户界面插件. 该框架提供了创建网友所需要的一切东西,轻松建立站点. 在使用easyUI之前要先声明UI控件. 1.直接在HTML声明控件. &lt;div class = "easyui-dialog" style="width: 400px; height:200px" data-options="title:'My D...
EasyUI学习笔记(五)——学习读源码--parser源码阅读分析1
u012369153的专栏
12-07 2441
Parser
EasyUI学习笔记 -- day01 基础
wingzhezhe的博客
11-20 1788
一：创建Web项目，导入easyUI的js 二：实现功能 1.实现可拖拽的div <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here div{ borde
深入理解JQueryEasyUI源码学习笔记
标题“JQueryEasyUI学习笔记（十二）源码”表明了本文档是关于JQueryEasyUI的教程或学习资料，尤其指明是第十二篇笔记，并附上了源码。JQueryEasyUI是一个基于JQuery的前端UI框架，它为Web开发提供了一系列现成的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值