Easyui----The DataGrid row details additions and deletions change operation

This article realizes is the Easyui-datagrid row detailed deletion modification operation. Specific references come from the following articles:
Official demo----DataGrid----Master Detail
Implement CRUD operations in Easyui using the row detail area of the DataGrid----Author: Stworthy
Buildcrud application with edit form in expanded row details
Jquery-easyui 1.2.4 API Chinese Document (complete) directory ----Author:A merry runny nose
First, two effect chart:
Not expanded:
Expand Line Details:

Because the personal knowledge is shallow, the experience is insufficient, therefore many JS, the Java code writes is not very reasonable, if has any question, welcome to advise. Thank you.
-----------------------------------------------------------------------Split Line----------------------------------------------- ------------------------------------
1. The following documents must be introduced: Easyui.css Icon.css Jquery.easyui.min.js Datagrid-detailview.jsJquery.js Note the above file version, preferably with the latest version.
2, the JSP page page simply define the following table: <table id= "Listdetail" ></table>
3, JS code
Initialize the DataGrid, where there are no special description parameters refer to the API provided above.

$ (function () {$ (' #listDetail '). DataGrid ({heigth:700, IDfield: ' id ', url: ' <oz:contextpath/>/oa/receiptnoted Etailaction.do?action=page ', queryparams:{' viewtype ': ' RK ', ' rkd_id ': _rkdid}, Singleselect:false, FitColumns:true, n Owrap:true, columns:[[{field: ' ID ', checkbox:true}, {field: ' Name ', title: ' Supplies name ', Width:100,editor: ' Text ', sortable:tr UE}, {field: ' Producetype ', title: ' Supplies model ', Width:100,editor: ' Text ', sortable:true}, {field: ' Prickle ', title: ' Unit of Measure ', Width:100,editor: ' Text ', sortable:true}, {field: ' Count ', title: ' Warehousing Quantity ', Width:100,editor: ' Text ', sortable:true}, { Field: ' Price ', title: ' Reference Rate ', Width:100,editor: ' Text ', sortable:true}, {field: ' Subtotal ', title: ' Storage amount ', width:100, Editor: ' Text ', sortable:true}]], toolbar:[{text: ' Add ', Iconcls: ' Icon-add ', Handler:addi
           		TEM},{text: ' Delete ', iconcls: ' Icon-remove ', Handler:deleteitem},{text: ' Refresh ', Iconcls: ' Icon-reload ', handler:Refresh}], View:detailview, Detailformatter:function (index,row) {return ' <div id= ' detailform-' +index+ ' "Styl" E= "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/s Uppliesmgm/de_receiptnotedetail.jsp?rkdid= ' +_rkdid+ ' &id= ' +id+ ' &index= ' +index, OnLoad:function () {$ (' #lis
					Tdetail '). 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);
}
	}); });

Special parameter Description: 1, view: Definition of the DataGrid view for DetailView, need to introduce Datagrid-detailview.js 2, detailformatter: defined DetailView words, You must define the Detailformatter property to initialize and return a div container. 3, Onexpandrow: Start and then trigger events, dynamic put the form into the div. Because it is dynamically loaded form, you must define the div with different IDs to identify the different form, such as "id=" detailform-' +index+ ' in the Div returned above, otherwise the data dislocation will occur when the load detail is expanded in this example.
Add, Delete, change methods: (To The next method is for reference only because it is related to the company platform. Alternatively, these methods are written in the initialization DataGrid page instead of on the form page. ）

Add
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);
	

//delete function DeleteItem () {var rows = $ (' #listDetail '). DataGrid (' Getselections '); if (null = Rows | | rows.length = 0) {OZ.
		Msg.info (' Please select supplies ');
	 Return
 	} var ids=[];
	for (Var i=0;i<rows.length;i++) {Ids.push (rows[i].id); OZ. Msg.confirm (' Delete warehousing supplies details will directly affect inventory information, determine delete.  ', function () {$.getjson (ContextPath + "/oa/receiptnotedetailaction.do?action=deletedetail&timestamp=" + new Date (). GetTime (), {ids:ids.join (";")}, function (JSON) {if (Json.result = = True) {OZ.
						Msg.info (' delete success ');
						$ (' #listDetail '). DataGrid (' reload '); Parent.refresh ()//Refresh the parent page}else{OZ.
					Msg.info (' Sorry, delete failed ');
		}
				}
			); 
}
	); }

//Save function SaveItem (index) {var suppliescount=$ (' #detailForm-' +index). Find ("#
	
	Suppliescount "). Val (), count=$ (' #detailForm-' +index). Find (" #count "). Val (); if (count = = ' && count.length<1) {OZ.
		Msg.info ("Out of the library quantity can not be empty");
	return false; } if (parseint (count) > parseint (suppliescount)) {OZ.
		Msg.info ("The number of out of the library can not be larger than the actual inventory quantity");
	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, _s
			Tatus) {$ (' #listDetail '). DataGrid (' Collapserow ', index);
			$ (' #listDetail '). DataGrid (' reload '); Parent.refresh ()//Refresh parent page}, Error:function (XHR, errormsg, Errorthrown) {OZ. Msg.error (the save operation appears with an unhandled exception.)
		"); 
}
	}); }

Cancels
function Cancelitem (index) {
	var row = $ (' #listDetail '). DataGrid (' GetRows ') [index];
	if (Row.isnewrecord) {
		$ (' #listDetail '). DataGrid (' DeleteRow ', index);
	} else {
		$ (' #listDetail '). DataGrid (' Collapserow ', index);
	}

4, Form form (also for reference only, style is the company platform.) The official example of the form page is simple enough to refer to it. ）

 

Because there are id,rkdid,index parameters in the initialization, the significance is that when loading the form, you can use JSON to reload the data based on the ID, which avoids errors when you save the foreign key.
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= ' + NE
					W 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); }
		})
}
 

At the same time, reload the data when the notice according to different Div find different form of each field, otherwise will load data dislocation. $ (' #detailForm-' +_index). Find (' #suppliesRealCount '). Val (Json.suppliesrealcount);

 

4, the background code to paste a piece of data to reload the method out, can refer to the reference:
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 ()); }