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

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.