Easyui column editing of the DataGrid

Look at the picture and talk.

Requirements: Insert two tables, the above table is the contents of the first table, the following two tables are the contents of the second detail table, with the ID of the first table associated with

The second table has a column that requires the user to manually fill in the additions.

International practice, on the Code

<div id= "CC" class= "Easyui-layout" style= "width:100%; height:380px; " > <div data-options= "region: ' North ', Title: ' Product Details (double-click Add) '" style= "height:0px;" ></div> <div data-options= "region: ' West ', split:true" style= "width:580px;"                                            > <table> <tr>                                                <td> Certificate:</td> <td>                                            <input id= "Certificate" class= "Easyui-validatebox" data-options= "/></td>                                                <td> article no.:</td> <td> <input id= "Stoneid" class= "Easyui-validatebox" data-options= "/></td&gt                                            ;                    &LT;TD colspan= "2" >                            <a id= "btn" href= "#" class= "Easyui-linkbutton" onclick= "Onsearch ()" data-options= "Iconcls: '                                        Icon-search ' "> Inquiries </a> </td> </tr> </table> <table id= "Productli St "style=" height:300px "></table> </div> &lt ;d IV data-options= "region: ' Center '" style= "padding:5px; Background: #eee; "                                > <table id= "Test_grid" style= "height:300px" ></table> </div> </div> </div>

 $ (function () {$obj = $ ("#test_grid"); $ (' #test_grid '). DataGrid ({striped:true,//alternating stripe fitcolumns:false,//Prevent horizontal scrolling icon Cls: "Icon-save",//Icon IDfield: ' ProductId ',//Unique column URL: "/admin/purchase/getallitem/" + Purchaseor    Derid, Singleselect:true,//set to True will allow only one row to be selected loadmsg: ' Desperately loading, please later ... ', Rownumbers:true, Show number of rows nowrap:true,//intercept out of the data checkonselect:true,//click a row when the checkbox checked (SELECT)/unchecked (Take            pagenumber:1,//) to initialize the pagination page.                Showfooter:false,//defines whether the row bottom columns:column is displayed,//Column onbeforeedit:function (index, row) {                Row.editing = true;            $obj. DataGrid (' Refreshrow ', index);                }, Onafteredit:function (index, row) {row.editing = false;            $obj. DataGrid (' Refreshrow ', index); }, Oncanceledit:function (Index, ROW) {row.editing = false;            $obj. DataGrid (' Refreshrow ', index);        }        }); $ (' #productList '). DataGrid ({striped:true,//alternating stripe fitcolumns:false,//Prevent horizontal scrolling IC            ONCLS: "Icon-save",//Icon IDfield: ' ProductId ',//Unique column URL: "/admin/warehousemanage/getpro",            Singleselect:true,//set to True will allow only one row to be selected loadmsg: ' Loading desperately, please later ... ', rownumbers:true,///display the number of rows Pagination:true,//Bottom Part Page toolbar nowrap:true,//intercept data beyond the part checkonselect:true,//when clicking a line chec            Kbox checked (Select)/unchecked (deselect) pagenumber:1,//initialize the pagination page.            Pagesize:10,//Initialize the number of records per page.  PageList: [5, 10, 20, 30, 50, 100, 200, 500],//Initialize the list of records per page showfooter:false,//define whether to show the bottom of the row columns: Searchlistcolumn,//Column onloaderror:function () {layer.msg ("no query to record!            "); }, Ondblclickcell:function(RowIndex, field, value)                {var rows = $ ("#productList"). DataGrid ("Getselections"); var ProductId = rows[0].                ProductId; var Cersno = rows[0].                Cersno; var CersNo2 = rows[0].                CersNo2; var Size = rows[0].                Size; var Stoneid = rows[0].                Stoneid;                var att = $ ("#test_grid"). DataGrid (' GetRows '); for (var i = 0; i < att.length; i++) {if (Att[i]. ProductId = = ProductId) {layer.msg ("already exists!                        "); Return}} Controls.DataGrid.appendRow ("Test_grid", {"PurchaseOrderID": PurchaseOrderID, "ProductId": ProductId, "productprice": null, "size": Size, "Stoneid": Stoneid, "Cersno": Cersno, "CERSN                O2 ": CersNo2});            $ ("#productList"). DataGrid (' DeleteRow ', rowIndex);    }        }); });

    var column = [[{field: ' opt ', title: ' Operation ', width:150, align: ' center ', formatter:function (value, RO W, index) {if (row.editing) {var s = ' <a class= "Ope-save" onclick= "saverow (' + index +                  ', this) ' > Save </a> ';                  var c = ' <a class= ' Ope-cancel "onclick=" cancelrow (' + index + ', this) ' > Cancel </a> ';              return S + C;                  } else {var e = ' <a class= ' Ope-edit "onclick=" editrow (' + index + ', this) ' > Set price </a> '; var d = ' <a class= ' Ope-remove "style=" color:red; "onclick=" deleterow (' + index + ', this) ' > delete </a> '                  ;              return e + "&nbsp;&nbsp;" + D;              }}}, {field: "Productprice", Title: "Price", width:150, align: "center", editor: {              Type: ' Text ', options: {missingmessage: ', Editable:false     }     }}, {field: "ProductId", Title: "Ordinal", width:150, align: "center", hidden:true}, {field: "Stoneid", Title: "article number", width:150, align: "center", formatter:function (value, row, index) {if (row. Product! = null) {return row.              Product.stoneid; } else {return row.              Stoneid; }          }      },

I'm not going to put it back in the column.

var flag = false;        Delete Record function deleterow (index, obj) {$obj. DataGrid ("SelectRow", index);        Selectcurrow (obj);        var index = Getindexafterdel ();        var node = $obj. DataGrid (' getselected ');        $obj. DataGrid (' DeleteRow ', index); if (node. Product! = null) {Controls.DataGrid.appendRow ("ProductList", {"ProductId": node. ProductId, "Stoneid": node. Product.stoneid, "Size": node. Product.size, "Cersno": node. Product.cersno, "CersNo2": node.        Product.cersno2}); } else {Controls.DataGrid.appendRow ("ProductList", {"ProductId": node. ProductId, "Stoneid": node. Stoneid, "Size": node. Size, "Cersno": node. Cersno, "CersNo2": node.        CERSNO2});    } flag = true;        }//Select Line function Selectcurrow (obj) {var $a = $ (obj);        var $tr = $a. Parent (). Parent (). parent ();        var tmpid = $tr. Find ("Td:eq (0)"). text ();    $obj. DataGrid (' Selectrecord ', tmpid);        }//Get line number function Getindexafterdel () {var selected = $obj. DataGrid (' getselected ');        var index = $obj. DataGrid (' Getrowindex ', selected);    return index;        }//Edit line function Editrow (index, obj) {flag = false;        $obj. DataGrid ("SelectRow", index);        Selectcurrow (obj);        var tmpindex = Getindexafterdel ();    $obj. DataGrid (' BeginEdit ', tmpindex);        }//Save edit Line function Saverow (index, obj) {selectcurrow (obj);        var tmpindex = Getindexafterdel ();        $obj. DataGrid (' EndEdit ', tmpindex);    Flag = true;        }//Cancels function Cancelrow (index, obj) {selectcurrow (obj);        var tmpindex = Getindexafterdel ();    $obj. DataGrid (' CancelEdit ', tmpindex); }//Search function Onsearch () {$ ("#productList"). DataGrid (' Load ', {cersno: $ ("#Certificate"). Val ().    Trim (), Stoneid: $ ("#StoneID"). Val (). Trim ()});            } function Save () {if ($ ("#SuppliersId"). val () = = "1") {flag = false; layer.msG ("Please select a supplier!")            ");        Return        } else {flag = true;            } if (flag) {var att = $ ("#test_grid"). DataGrid (' GetRows ');            var a = false; for (var i = 0; i < att.length; i++) {if (att[i].editing! = null) {Delete Att[i].ed                iting; } if (Att[i]. Isstatus! = null) {delete Att[i].                Isstatus; } if (Att[i]. Product! = null) {Att[i]. ProductId = Att[i].                    Product.productid; Att[i]. Cersno = Att[i].                    Product.cersno; Att[i]. CersNo2 = Att[i].                    Product.cersno2; Att[i]. Size = Att[i].                    Product.size; Att[i]. Stoneid = Att[i].                    Product.stoneid; Delete Att[i].                Product; } if (Att[i]. Productnum! = null) {delete Att[i].                Productnum; } if (Att[i]. PurchaseOrder = = NULL) {Delete Att[i].                PurchaseOrder; } if (Att[i]. Purchaseorderitemid) {Delete Att[i].                Purchaseorderitemid;            }} var bodydata = Json.stringify (ATT); var postdata = {purchaseorderid: $ ("#PurchaseOrderId"). Val (). Trim (), Purchaseorderno: $ ("#P Urchaseorderno "). Val (). Trim (), Suppliersid: $ (" #SuppliersId "). Val (), Contractno: $ (" #Contrac TNo "). Val (). Trim (), Purchasedate: $ (" #PurchaseDate "). Val (). Trim (), Amount: $ (" #Amount "). Val ( ). Trim (), Paymethod: $ ("#PayMethod"). Val (). Trim (), Purchaseuser: $ ("#PurchaseUser"). Val (). tr                Im (), Remarks: $ ("#Remarks"). Val (). Trim (), Customsno: $ ("#CustomsNo"). Val (). Trim (),          Customsapproval: $ ("#CustomsApproval"). Val (). Trim (), Inoutdate: $ ("#InOutDate"). Val (). Trim (),      Tariff: $ ("#Tariff"). Val (). Trim (), Logisticstotal: $ ("#LogisticsTotal"). Val (). Trim (),            Isstatus: $ ("#IsStatus"). Val (), bodydata:bodydata};                $.ajax ({type: "POST", url: "/admin/purchase/addpurorder", Data:postdata, Success:function (Result) {if (result = = "-1") {layer.msg ("Operation failed!                    ", {icon:2}); } else if (result = = "0") {layer.msg ("Operation succeeded!                        ", {icon:6, time:1000});                    Window.location.href = "/admin/purchase/purchaseform?cid=33"; } else if (result = = "-2") {layer.msg ("Your purchase order has been added, but the details have not been successfully added because of the unexpected!")                    ", {icon:2});        }                }            }); } else {layer.msg ("Save the row you are editing first!")        "); }    }

Backstage code will not write, through the Ajax to the background, request out, according to the format of the inserted database can be sorted, if not, look at my previous essays, there is detailed code.

---------------------------------------------------------------------------------------------------------

Reprint please remember the author and source Oh-.-
Kingdudu
Original source: http://www.cnblogs.com/kingdudu/p/4864120.html

Easyui column editing of the DataGrid