Jqgrid table column Options edittype to text, checkbox, select, textarea, function, hyperlink, add custom Buttons __jqgrid

Jqgrid Data Source:

① when static data is available, it can be defined directly in the page, for example:

var grid_data = 
			[ 
				{id: "1", Name: "John", Note: "Long text 1", Stock: "Yes", Ship: "First Grade", Sdate: "2007-12-03"},
				{id: "2", Name: "Dick", Note: "Long text 2", Stock: "No", Ship: "Second Grade", Sdate: "2007-12-03"},
				{id: "3", Name: "Wang er", note: "Long text 3", the Stock: "No", Ship: "Grade Five", Sdate: "2007-12-03"},
				{id: "4", Name: "Small Five", note: "Long text 4", the Stock: "Yes", Ship: "Four Grade", Sdate: "2007-12-03"},
				{ID: "5", Name: "66", note: "Long text 5", Stock: "Yes", Ship: "Third Grade", Sdate: "2007-12-03"},
				{ID: "6", Name: "Nine son", note: "Long text 6", Stock: "No", Ship: "Six Grade", Sdate: "2007-12-03"},
				{id: "7", Name: "Pomegranate", note: "Long text 7", Stock: "Yes", Ship: "First Grade", Sdate: "2007-12-03"},
				{id: "8", Name: "One by One", note: "Long text 8", Stock: "No", Ship: "Third Grade", Sdate: " 2007-12-03 "}
			];

② when it comes to Dynamic data, use Ajax to get data from the background, such as:

var grid_data = [];

/************** obtain trader data from background ********************/$.ajax ({async:false, cache:false, url: "GOODS_FINDP Agegoodsbytrader.do ", data:datastr,//required parameter type passed to the background: ' Get ', success:function (result) {var re
					Sult = eval (' (' + result + ') ');
						if (result.root!= undefined && result.root.length > 0) {var resultcontent = Result.root;
						var grid_child; for (var i = 0; i < resultcontent.length i++) {grid_child = {id:resultcontent[i].goodsid, Goodsorde
									R:resultcontent[i].goodsorder, Goodspackage:resultcontent[i].goodspackage, Goodsname:resultcontent[i].goodsname, Goodstype:resultcontent[i].goodstype, Goodsmaterial:resultcontent[i].goodsmaterial, GoodsNumber:resultContent[i] . Goodsnumber, Goodsweight:resultcontent[i].goodsweight, Goodswarranty:resultcontent[i].goodswarranty, GoodsOrigi N:resultcontent[i].goodsorigin, Originname:resultcontent[i].originname, GOODSSTATUS:RESULTCONTENT[I].GOODSSTATUs, Goodscontractreadtime:resultcontent[i].goodscontractreadtime, Dzpurchasecontractnum:resultcontent[i].dzpur
							Chasecontractnum, grouppurchasecontractnum:resultcontent[i].grouppurchasecontractnum};    
						Grid_data[i] = Grid_child;
			}}, Error:function (e) {alert ("Get trader material information failed");} });

To set the column name:

/**** column Display name ******/
					colnames:[', ' Bind and upload ', ' id ', ' date ', ' Name ', ' checkbox ', ' dropdown ', ' Memo ', ' Hyperlink 1 ', ' Hyperlink 2 ', ' upload photo ',

Various forms of EditType:

①jqgrid table Gremer Think text:

{name: ' id ', index: ' id ', width:60, sorttype: ' int ', Editable:true, hidden:true},

The ②jqgrid table column is set to the time format, and the DatePicker time plug-in is used, for example:

/*****unformat can specify a custom format for formatter *****//******unformat:pickdate where   datepicker plug-ins are used to display the time ******/
						{name: ' sdate ', index: ' Sdate ', width:60, Editable:true, SortType: ' Date ', unformat:pickdate},

At this point, pickdate needs to define itself, for example:

function Pickdate (cellvalue, options, cell) {
					settimeout (function () {
						$ (cell). Find (' input[type=text] ')
								. DatePicker ({format: ' Yyyy-mm-dd ', autoclose:true}); 
					}, 0;}
				

The ③jqgrid table column is set to a CheckBox checkbox, for example:

/*******edittype: "checkbox", Editoptions:{value: "Yes: No"}  check box.   Unformat:aceswitch Custom settings check box style ***********/
						{name: ' Stock ', index: ' Stock ', width:60, Editable:true, EditType: "checkbox", Editoptions:{value: "Yes: No"}, Unformat: Aceswitch},

The checkbox check box style takes advantage of the style of the Ace template to customize its style, for example:

function Aceswitch (cellvalue, options, cell) {
					settimeout (function () {
						$ (cell). Find (' input[type=checkbox] ')
								. Wrap (' <label class= ' inline '/> ')
							. addclass (' Ace Ace-switch ace-switch-5 ')
							. After (' <span Class= "LbL" ("></span>");
					}, 0);
				}

The ④jqgrid table column is set to the Select Drop-down box, for example:

Method One, String form:

{name: ' Ship ', index: ' Ship ', width:60, Editable:true, EditType: ' Select ', Editoptions:{value: ' 1:1 grade; two: second grade; third: Grade Four 5:5 grade; 6:6 Grade "}},

Method two, Object form:

{name: ' Ship ', index: ' Ship ', width:60, Editable:true, EditType: ' Select ', editoptions:{value:{one: ' First Grade ', second: ' Second year ', third: ' Third grade ' }},

Method three, calling function return form:

{name: ' Ship ', index: ' Ship ', width:60, Editable:true, EditType: ' Select ', Editoptions:{value:getval ()},

Now you need to customize the Getval () function here to return the contents of the Drop-down box, for example:

/******** Get Trader name Drop-down list *************/
			function Getval () {
				var originnameval = "";
				var i = 0;
				$.ajax ({
					type: "Get",
					Async:false,
					data:datastr,
					URL: "trader_querypagetrader.do",	//Getting data from the background)
					success:function (Result) {
						var result = eval (' + result + ') ');
						var resultcontent = result.root;
						for (i; i < resultcontent.length; i++) {
					    	if (I!= resultcontent.length-1) {
					    		originnameval = resultcontent[i] . Tradername + ":" + Resultcontent[i].tradername + ";";
					    	} else{
					    		Originnameval + = Resultcontent[i].tradername + ":" + Resultcontent[i].tradername;}}
				) ;
				return originnameval;
			}

The ⑤jqgrid table column is set to textarea, for example:

{name: ' Note ', index: ' Note ', width:60, Sortable:false, Editable:true, EditType: "TextArea", Editoptions:{rows: "2", cols : "10"}},

⑥jqgrid table columns are set to hyperlinks:

Method One:

{name: ' Monitor ', Index: ' Monitor ', width:60, Sortable:false, Editable:false, Formatter:function (Cellvalue, Options, Rowobject) {return "<a href=\". /index.html\ "> Monitoring </a>";},

Method Two, when the table load completes, set a hyperlink for each column, for example:

{name: ' Detail ', index: ' Detail ', width:60, Sortable:false, Editable:false},

Gridcomplete:function () {//Loops add modify and delete link 
						var ids=jquery ("#grid-table") to each row in this event. Jqgrid (' Getdataids '); 					Gets a single ID for	
						(var i = 0; i<ids.length; i++) { 
							var id = ids[i];
							var RowData = $ ("#grid-table"). Jqgrid (' getRowData ', id);
							var goodsstatus = rowdata.goodsstatus;
							
							Details = ' <a href= '. /index.html?id= ' +id+ ' &goodsstatus=2 > View accessories </a> ';		Pass parameter
		                    jQuery ("#grid-table") to the Jump page. Jqgrid (' Setrowdata ', Ids[i], {detail:details});
							
						} 
					

Here, get the Jqgrid table row ID:

var ids=jquery ("#grid-table"). Jqgrid (' Getdataids ');

The ID obtained is an array.

Get Jqgrid table row data is:

var RowData = $ ("#grid-table"). Jqgrid (' getRowData ', id);

The row data that is fetched is an object.

At this point, if you want to remove a field from the row data, you should:

var goodsstatus = Rowdata.goodsstatus;

The second rule is to specify a hyperlink style, such as:

Details = ' <a href= '. /index.html?id= ' +id+ ' &goodsstatus=2 > View accessories </a> ';

This hyperlink style is then set for each row of this field, for example:

JQuery ("#grid-table"). Jqgrid (' Setrowdata ', Ids[i], {detail:details});

The ⑦jqgrid table column is set to a custom button, for example:

{name: ' myac222 ', Index: ', width:80, Fixed:true, Sortable:false, Resize:false,
							formatter:function (value, grid, Rows, state} {return
								"<a href=\" #\ "title=\" binding contract \ "style=\" margin-left:10px\ "onclick=\" bindattachment ("+ Rows.id + ") \ ><i class=\" Icon-cogs purple\ "style=\" font-size:15px\ "></i></a><a href=\" #\ " Style=\ "margin-left:12px\" title=\ "upload schedule \" onclick=\ "uploadattachment (" + rows.id + ") \" ><i class=\ " Icon-cloud-upload blue\ "style=\" font-size:15px\ "></i></a>"; 
							}
						,

As an example of a binding contract, when you click the Bind Contract custom button, the Bindattachment (ID) event is triggered to open the Custom Bound Contract Dialog dialog box, as follows:

<!--binding Contract Number dialog--> <div id= "Bindcontractdialog" title= "binding contract Number" style= "Display:none;" > <table class= "exhibit_table" > <tr> <td style= "width:80p X
									        	padding:10px "align=" right "> order number </td> <td class=" Input-icon input-icon-right "> <input type= "text" id= "orderId1" name= "OrderId"/> <i class= "Icon-edit green" style= "Ma rgin-top:5px; " ></i> </td> </tr> <tr> <td sty Le= "width:80px;
									        	padding:10px align= "Right" > Bulk Materials Network contract number </td> &LT;TD class= "Input-icon input-icon-right" > <span style= "margin-left:160px; width:25px; Overflow:hidden; " ><select id= "Dzcontractnum" name= "Dzcontractnum" style= "width:185px"; margin-left:-160px "onchange=" This.parentnode.nextsibling.value=this.value "> </select> </span><input id= "DzContractNum2 name=" Dzcontractnum "style=" width:160px; height:30px; Position:absolute; left:0px; " > </td> </tr> </table> </div>

Notice here that the bulk material network contract number is a Drop-down box, and this dropdown box not only supports the Drop-down, but also supports user input, the principle is, the Drop-down box and input input box overlap, and in the Drop-down box to add the OnChange event, the event trigger action is:

Onchange= "This.parentnode.nextsibling.value=this.value"

Therefore, there can be no spaces or newline characters between <select> and its parent <span>, or the browser will recognize the space or newline character as the <span> parent node, and the effect will not appear when the Drop-down box can be entered.

Then get the contents of the Drop-down box from the background, as follows:

/******** Bulk Material Network contract number **********/
			$.ajax ({
				async:false,
				cache:true,
	            type: "POST",  
	            URL: " Goodsdzcontract_querydzpurchasenum.do ",
	            success:function (result) {
					var result = eval (' + result + ') ');
					If (Result!= undefined && result.length > 0) {for
	                	(var i = 0; i < result.length; i++) {	
	                        var opt = " <option value= ' "+ result[i].purchasenum +" ' > "+ result[i].purchasenum +" </option> ";  
	                        $ ("#DzContractNum"). append (opt);}}
	            ,  
	            error:function () {  
	                alert ("Get bulk material network contract number failed")  
	            }  
	        });

Once the dialog style is defined, the Bindattachment (ID) event is defined, which opens the dialog for user input, as follows:

/********* Bound contract Number pop-up ************/function bindattachment (id) {var rowdata = $ ("#grid-table"). Jqgrid (' getRowData ', id)
				;
				var goodsorder = Rowdata.goodsorder;			$ ("#orderId1"). Val (Goodsorder);
				Order Number: document.getElementById ("OrderId"). Value = Goodsorder; $ ("#bindContractDialog"). Dialog ({autoopen:true, height:300, width:330, Resizable:false, MoD
							Al:true,//Here is control pop-up for modal buttons:{"OK": function () {var id = rowdata.id;
							var dzpurchasecontractnum = $ ("#DzContractNum2"). Val (); Submit data to the background $.ajax ({async:false, cache:true, type: "POST", data:{ID: ID, Dzpurchasecontractnum:dzpurchasecontractnum,}, url: "Goods_boundcontractnum.do",//Get JSO
									n Data success:function () {alert ("Bind contract number succeeded");
							    Window.location.href = "./tradergoodsinfo.html";  
	}, Error:function () {alert ("Bind contract number Failed")						    }  
							}); 
						$ (This). dialog ("Close"); 
					"Cancel": function () {$ (this). dialog (' Close ');}
			}
				}); }

The style is shown in the following illustration:

To add a custom button to the page bar:

① Add a "|" Separator, as follows:

JQuery (Grid_selector). Jqgrid (). Navseparatoradd (Pager_selector,				//navseparatoradd is adding a | button split.
						{sepclass: "Ui-separator", Sepcontent: "}
				)

② Add a custom button, when the button is clicked, pop-up the Binding Contract Dialog dialog box, as follows:

JQuery (Grid_selector). Jqgrid (). Navbuttonadd (pager_selector,{
					/**************
						Caption: Button name, can be empty, String type 
						Buttonicon: Icon for button, string type, must be UI theme icon 
						OnClickButton: Button event, function type, default NULL 
						Position:first or last, button position 
						title:string type, button hint message 
						cursor:string type, cursor type, default to pointer 
						id:string type, button ID
					*********************/
					//Binding Contract Number button	
					caption: "",
					title: "Binding Contract", 
					Buttonicon: ' Icon-cogs Purple ',
					onclickbutton:function ()
					{
						var id = $ ("#grid-table"). Jqgrid (' Getgridparam ', ' selrow ');
						if (id = = NULL) {
							alert ("Please select a record");
						} else {
							bindattachment (ID);	Call Bindattachment (ID) function to Eject Dialog dialog}}}
				)

The effect is shown in the following illustration:

At this point, jqgrid two ways to add custom buttons (add custom buttons for each row of a field in a Jqgrid table, add custom buttons to the page bar) are complete.