EasyUI----DataGrid行明细增删改操作

最新推荐文章于 2022-05-11 23:21:07 发布
最新推荐文章于 2022-05-11 23:21:07 发布
阅读量3.7w 收藏 22
点赞数 5
分类专栏： 归档 文章标签： function datagrid class json div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huchiwei/article/details/7787947
版权
本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章：

官方DEMO---- DataGrid ---- Master Detail




先上两张效果图：

未展开：

展开行明细：


由于个人知识浅薄，经验不足，所以很多的JS、Java代码写得都不是很合理，如果有什么问题，欢迎指点。谢谢。

-----------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

1、必须引入下面文件：
          easyui.css
    icon.css
    jquery.easyui.min.js
    datagrid-detailview.js
   jquery.js
注意以上文件版本，最好使用最新版。

2、JSP页面
页面中只需定义如下table即可：
<table id="listDetail"></table>

3、JS代码

初始化DataGrid,其中没特殊说明参数请参考上面提供的API。
 
$(function(){
	$("#listDetail").datagrid({
		heigth:700,   
		idField:'id',
		url:'<oz:contextPath/>/oa/receiptNoteDetailAction.do?action=page',
		queryParams:{'viewType':'RK','RKD_ID':_rkdId},
		singleSelect:false,
		fitColumns:true,
		nowrap:true,
		columns:[[
			{field:'id',checkbox:true},
			{field:'name',title:'用品名称',width:100,editor:'text',sortable:true},
			{field:'produceType',title:'用品型号',width:100,editor:'text',sortable:true},
			{field:'prickle',title:'计量单位',width:100,editor:'text',sortable:true},
			{field:'count',title:'入库数量',width:100,editor:'text',sortable:true},
			{field:'price',title:'参考单价',width:100,editor:'text',sortable:true},
			{field:'subtotal',title:'入库金额',width:100,editor:'text',sortable:true}
		]],	
		toolbar:[{
			text:'添加',
            		iconCls:'icon-add',
           		handler:addItem
		},{
			text:'删除',
            		iconCls:'icon-remove',
            		handler:deleteItem
		},{
			text:'刷新',
           		iconCls:'icon-reload',
            		handler:refresh
		}],
		view: detailview,
		detailFormatter:function(index,row){
			return '<div id="detailForm-'+index+'" style="line-height:500px;"></div>';
		},
		onExpandRow: function(index,row){
			var id= $(this).datagrid('getRows')[index].id;
			$('#detailForm-'+index).panel({
				doSize:true,
				border:false,
				cache:false,
				href:'<oz:contextPath/>/oa/suppliesmgm/DE_ReceiptNoteDetail.jsp?rkdId='+_rkdId+'&id='+id+'&index='+index,
				onLoad:function(){
					$('#listDetail').datagrid('fixDetailRowHeight',index);
					$('#listDetail').datagrid('selectRow',index);
				}
			});
			$('#listDetail').datagrid('fixDetailRowHeight',index);
		},
		onDblClickRow:function(index,row){
			$('#listDetail').datagrid('expandRow', index);
			$('#listDetail').datagrid('fitColumns',index);
			$('#listDetail').datagrid('selectRow', index);
		}
	});
});
特殊参数说明：
1、view： 定义DataGrid的view为detailview,需要引入datagrid-detailview.js
2、detailFormatter ：定义了detailview的话，必须定义detailFormatter属性，用以初始化并返回一个DIV容器。
3、onExpandRow：展开后行触发事件，动态把Form放进DIV中。因为是动态加载Form,所以必须把DIV定义不同ID以识别不同的Form,如上面返回的DIV中
【 id="detailForm-'+index+'"】，否则在此例子中展开加载明细时会出现数据错位，注：是此例子。

增、删、改方法：（ 以下方法因为跟公司平台有关，所以仅供参考。另，这些方法都是写在初始化DataGrid页面而不是写在Form页面。） 
//添加
function addItem(){
	$('#listDetail').datagrid('appendRow',{isNewRecord:true});
	var index = $('#listDetail').datagrid('getRows').length - 1;
	$('#listDetail').datagrid('expandRow', index);
	$('#listDetail').datagrid('fitColumns',index);
	$('#listDetail').datagrid('selectRow', index);
	
}
//删除
function deleteItem(){
	 var rows = $('#listDetail').datagrid('getSelections');
	 if (null == rows || rows.length == 0) {
		OZ.Msg.info('请选择用品');
		return;
	 }
	var ids=[];
 	for(var i=0;i<rows.length;i++){
		ids.push(rows[i].id);
	}
 	OZ.Msg.confirm(
		'删除入库用品明细将直接影响库存信息，确定删除吗？',
		function(){
			$.getJSON(
				contextPath + "/oa/receiptNoteDetailAction.do?action=deleteDetail&timeStamp=" + new Date().getTime(),
				{ids:ids.join(";")},
				function(json){
					if(json.result == true){
						OZ.Msg.info('删除成功');
						$('#listDetail').datagrid('reload');
						parent.refresh();//刷新上级页面
					}else{
						OZ.Msg.info('抱歉，删除失败');
					}
				}
			);
		}
	); 
}
//保存
function saveItem(index){
	var suppliesCount=$('#detailForm-'+index).find("#suppliesCount").val(),
		 count=$('#detailForm-'+index).find("#count").val();
	
	if(count == '' && count.length<1){
		OZ.Msg.info("出库数量不能为空");
		return false;
	}
		
	if(parseInt(count) > parseInt(suppliesCount)){
		OZ.Msg.info("出库数量不能大于实际库存数量");
		return false;
	}
	
	var strUrl = contextPath+'/oa/issueNoteDetailAction.do?action=saveByAjax&timeStamp=' + (new Date().getTime());
	$.ajax({
		type: "POST",
		dataType: "json",
		url:strUrl ,
		data: $('#ozForm').serialize(),
		success: function(json, _status){
			$('#listDetail').datagrid('collapseRow',index);
			$('#listDetail').datagrid('reload');
			parent.refresh();//刷新上级页面
		},
		error: function(xhr, errorMsg, errorThrown){
			OZ.Msg.error("保存操作出现未处理异常！");
		}
	}); 
}
//取消
function cancelItem(index){
	var row = $('#listDetail').datagrid('getRows')[index];
	if (row.isNewRecord){
		$('#listDetail').datagrid('deleteRow',index);
	} else {
		$('#listDetail').datagrid('collapseRow',index);
	}
}

4、Form表单（ 同样仅供参考，样式是公司平台的。官方例子的Form页面很简单，可参考它。） 
<html:form action="oa/issueNoteDetailAction.do" styleId="ozForm" styleClass="oz-form">
	<div class="oz-form-fields">
		<table cellpadding="0" cellspacing="0" class="dv-table" style="width:600px;background:#fafafa;padding:5px;margin-top:5px;">
			<tr>
				<td colspan="4">
					<div>
						<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="saveItem(<%= request.getParameter("index") %>)" id="btnSave">保存</a>
						<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" οnclick="cancelItem(<%= request.getParameter("index") %>)">取消</a>
					</div>
					<hr/>
				</td>
			</tr>
			<tr> 
				<td class="oz-form-label" style="width:80px">库存用品：</td>
				<td class="oz-property" colspan="3">
					<html:text property="supplies.name" styleId="suppliesName" styleClass="oz-form-zdField" readonly="true" style="width:150px"/>
					<button type="button" class="oz-form-button" onClick="onBtnSelectSupplies_Clicked(<%= request.getParameter("index") %>);">选择..</button>
				</td>				
			</tr>
			<tr> 
				<td class="oz-form-label" style="width:80px">用品型号：</td>
				<td class="oz-property">
					<html:text property="supplies.productType" styleId="suppliesProductType" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
				</td>
				<td class="oz-form-label" style="width:80px">参考单价：</td>
				<td class="oz-property">
					<html:text property="supplies.price" styleId="suppliesPrice" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
				</td>
			</tr>
			<tr> 
				<td class="oz-form-label" style="width:80px">计量单位：</td>
				<td class="oz-property">
					<html:text property="supplies.prickle" styleId="suppliesPrickle" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
				</td>
				<td class="oz-form-label" style="width:100px">实际库存数量：</td>
				<td class="oz-property">
					<html:text property="supplies.realCount" styleId="suppliesRealCount" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>
				</td>
			</tr>
			<tr> 						
				<td class="oz-form-label" style="width:80px">出库数量：</td>
				<td class="oz-property" colspan="3">
					<html:text property="count" styleId="count" styleClass="oz-form-btField" style="width:150px"/>
				</td>
			</tr>
			<tr> 
				<td class="oz-form-label" style="width:80px">备注：</td>
				<td class="oz-property" colspan="3">
					<html:textarea property="beizhu" styleId="beizhu" styleClass="oz-form-field" style="width:500px" cols="15"/>
				</td>
			</tr>
		</table>
	</div>
			<html:hidden property="id" styleId="id"/>
			<html:hidden property="supplies.id" styleId="suppliesId"/>
			<html:hidden property="issueNote.id" styleId="issueNoteId"/>
</html:form>
因为在初始化的时候有传id,rkdid，index参数过来，意义在于加载此Form的时候，可以利用Json根据id重新加载数据，这样可以避免保存外键时候出错。 
var id=<%= request.getParameter("id") %>;
var _ckdId=<%= request.getParameter("ckdId") %>;
var _index = <%= request.getParameter("index") %>;

$(function(){
	$('#detailForm-'+_index).find('#issueNoteId').val(_ckdId);
	loadomain();
	validate();
});

function loadomain(){
	if(typeof id == "undefined")
		id=-1;
	$.getJSON(
			contextPath + '/oa/issueNoteDetailAction.do?action=getIssueNoteDetail&id=' + id + '&timeStamp=' + new Date().getTime(),
			function(json){
				if(!json.isNew){
					$('#detailForm-'+_index).find('#id').val(json.id);
					$('#detailForm-'+_index).find('#beizhu').val(json.beizhu);
					$('#detailForm-'+_index).find('#count').val(json.count);
					
					$('#detailForm-'+_index).find('#suppliesId').val(json.suppliesId);					
					$('#detailForm-'+_index).find('#suppliesPrickle').val(json.suppilesPrickle);
					$('#detailForm-'+_index).find('#suppliesProductType').val(json.suppliesProductType);
					$('#detailForm-'+_index).find('#suppliesPrice').val(json.suppliesPrice);
					$('#detailForm-'+_index).find('#suppliesName').val(json.suppliesName);
					$('#detailForm-'+_index).find('#suppliesRealCount').val(json.suppliesRealCount);
					
				}else{
					$('#detailForm-'+_index).find('#id').val(id);
				}
		})
}
同时，重新加载数据时候注意按照不同DIV找到不同Form的各个字段，否则会加载数据错位。
$('#detailForm-'+_index).find('#suppliesRealCount').val(json.suppliesRealCount);


4、后台代码就贴一段重新加载数据的方法出来，可参考参考： 
public ActionForward getIssueNoteDetail(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception{
		Long id=RequestUtils.getLongParameter(request, "id", -1);
		JSONObject json=new JSONObject();
		json.put("isNew",Boolean.valueOf(false));
		if(id != -1){
			IssueNoteDetail detail=this.getService().load(id);
			json.put("suppliesId",detail.getSupplies().getId());
			json.put("suppliesName",detail.getSupplies().getName());
			json.put("suppliesPrice",detail.getSupplies().getPrice());
			json.put("suppliesProductType",detail.getSupplies().getProductType());
			json.put("suppilesPrickle",detail.getSupplies().getPrickle());
			json.put("suppliesCount",detail.getSupplies().getCount());
			json.put("suppliesRealCount",detail.getSupplies().getRealCount());
			
			json.put("id",id);
			json.put("beizhu",detail.getBeizhu());			
			json.put("count",detail.getCount());
		}else{
			json.put("isNew",Boolean.valueOf(true));
		}
		return renderJson(response, json.toString());
	}







C维
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
jquery-easyui-1.7.0.zip官方文档
11-04
jquery-easyui-1.7.0 官方文档以及源码，演示demo，内容详细
datagrid之新增删除
m0_60375302的博客
09-16 168
一.新增 ①.添加新增按钮（userManage.jsp） <a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> ②.给新增按钮添加点击事件 $("#btn-add").click(function() { //清空之前表单的数据 $('#ff').form('clear'); $("#dd").dialog("open");
Easyui--datagrid 的使用 （弹出框的使用）
热门推荐
Fanbin168的专栏
11-16 1万+
1 Home控制器 using DbService; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Script.Serialization; namespace MvcAppEF.Contr
Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
Cowboy
11-27 1245
Easyui技术学习，更多知识请访问https://www.itkc8.com 前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据，同时对行内数据上移下移，所以对这几个功能做个总结。 1、首先大概说下这几个功能里用到的主要方法，行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索...
easyui datagrid 弹出窗口
zlin_221的博客
06-23 9726
我的主页面,代码如下： Javascript代码   //添加数据弹出窗口   $(function(){                  addDataWin = $('#addData-window').window({                             href:'${basePath}/page/marketPlat2/addData/
【easyui】之DataGrid数据增删改
yifei_345678的博客
05-11 1099
easyui最后一波！
springmvc-easyui-tree增删改
11-30
easyUI tree增删改操作以及easyUI window分类的
easyui-datagrid之间拖拽效果demo
03-18
easyui-datagrid之间拖拽效果demo
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例，绝对可用，网上很多实例都无法运行，这个我亲自测试可用使用才传上来的，供大家参考学习。
easyui-datagrid可编辑可过滤的DEMO
11-08
我自己将EASYUI官网里datagrid中的编辑表格和过滤表格两个demo合成的一个demo，供大家参考使用，下载解压后直接打开html即可，版本是easyui1.5
easy-ui使用记录——datagrid的增加和删除
zhuzi51的专栏
05-28 1397
楔子 datagrid 前台js操作增加行和删除选中行 增加行、删除行 增加行 function appRow(){ $('#dg').datagrid('appendRow',{ id: guid(), sourcedictype : $("#sourcedictypeshow").textbox("getValue")...
Jquery easyui开启行编辑模式增删改操作
菜鸟的成长记录
11-07 3558
本人也是gangg var datagrid; $(function() { editRow = undefined ; //保存当前正在编辑的行,控制同一时间只开启一行 $('#datagrid').datagrid({ rowStyler : function(rowIndex,rowData){   //行样式 console.info
Easyui DataGrid中增加行号显示
飞翔的学习笔记
09-05 1万+
Easyui DataGrid中增加行号显示，只要做如下设置就行了rownumbers:true,//设置显示行号
EasyUI DataGrid 实现单行/多行编辑功能
Dandelion_drq的专栏
02-22 1万+
要实现 EasyUI DataGrid 的可编辑很简单，在需要编辑的列添加 editor 【编辑器】就可以了。 单行编辑 // 初始化数据列表 function initDatagrid() { $('#dg').datagrid({ loadMsg: '数据加载中请稍后……', striped: true, url: '/api/Employ
easyui+如何弹出dialog中包含datagrid
qq_43685201的博客
11-13 3475
easyui+如何弹出dialog中包含datagrid
easyui dataGrid 动态添加列
书写人生
03-08 4709
&lt;script&gt;     var array =[]; var columns=[]; $.ajax({ url:_ctx+'/nodeManage/getMysqlFields', type:'POST', data:'id='+node['id'], success:function(data){//data后台的传过...
easyui datagrid实现行内编辑一列数据
时光匆匆独白 将颠沛磨成卡带
08-31 1万+
这篇文章主要想介绍一下easyui 的datagrid控件实现行内编辑的功能。 我着这里主要实现的大概功能就是：可以行内编辑人员类别的功能 一、实现的效果如下：             图1： 当我们点击【设置】的时候可以编辑人员类别,如图2 所示         图2： 从图2可以看出，我们可以人员类别下拉框中的选中我们希望设置的类别，然后保存到数据库 也可以点击取
easyui datagrid实现批量添加、删除、修改，列多对多动态配比
vaneHai的专栏
05-14 2813
最近用easyui做了个商城的简单商品管理，商品属性防淘宝店面后台属性添加功能，分析给大家一下部分Demo 效果： html代码： easyui datagrid实现批量操作商品 黑色     红色     蓝色
EasyUI之DataGrid增加&删除
weixin_58670730的博客
09-16 629
前言：本文章基于EasyUI之DataGrid 修改进行优化 1.增加 点击增加按钮时需要打开表单窗口 /*-----------增加----------*/ /* 打开表单窗口 因为增加与修改打开的窗口是同一窗口所有先清除表单的值 */ $("#btn-add").click(function() { wyy = 1; $("#ff").form('clear'); $("#dd").dialog("open"); }); js表单提交方法 增加与修改最后都会调用.
easyui-datagrid 放大镜模糊查询
最新发布
11-07
easyui-datagrid是一款基于jQuery的表格插件，它提供了丰富的功能和灵活的配置选项。放大镜模糊查询是easyui-datagrid的一种查询方式，它可以在datagrid的工具栏中添加一个放大镜图标，用户可以在输入框中输入关键字...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值