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

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more >

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 reSult = 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, GoodsordeR: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].dzpurChasecontractnum, 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, MoDAl: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 JSOn 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 buttoncaption: "",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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership orreliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern orcomplaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.


Top Articles
Latest Posts
Article information

Author: Geoffrey Lueilwitz

Last Updated: 11/10/2023

Views: 6645

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.