Holen Sie sich alle bearbeiteten Zeilen in jqgrid
Wie man all die Zeilen, die bearbeitet werden ?
Habe ich folgende jqgird, wo Sie den Benutzer Bearbeiten können Sie die Kontrollkästchen aller Datensätze.
Wenn die Schaltfläche Speichern geklickt wird, muss ich wissen, welche Datensätze bearbeitet, ich bin ein neues zu jquery und jqgrid.
Kann mir jemand helfen ?
Hier ist das jqgrid und html mit :
var customerCodesView = {};
customerCodesView.customerCodesView = function() {
$jq("#customerCodesTable").jqGrid(
{
colNames : ['Cust #','Customer Name', '1', '2','3', '4', '5', '6','7', '8','9', '10', '11', '12', '13', '-1'],
colModel : [{name : 'customerNumber',index : 'baseCustomerNumber',width : 55, align :'center'},
{name : 'customerName',index : 'storeName',width : 100, sorttype :'text', align :'center'},
{name : 'creditCodesPermissions.1',index : 'codeOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.2',index : 'codeTwo',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.3',index : 'codeThree',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.4',index : 'codeFour',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.5',index : 'codeFive',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.6',index : 'codeSix',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.7',index : 'codeSeven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.8',index : 'codeEight',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.9',index : 'codeNine',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.10',index : 'codeTen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.11',index : 'codeEleven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.12',index : 'codeTwelve',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.13',index : 'codeThirteen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
{name : 'creditCodesPermissions.-1',index : 'codeMinusOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}
],
pager : '#customerCodesTablePager',
rowNum : 1000,
loadOnce:true,
sortorder : "desc",
viewrecords : true,
gridview : true,
autowidth : true,
multiselect : true,
jsonReader : {
repeatitems : false,
root : function(obj) {
return obj;
},
page : function(obj) {
return 1;
},
total : function(obj) {
return 1;
},
records : function(obj) {
return obj.length;
}
},
sortable : true,
caption : "Credit Codes"
});
$jq("form#customerCodesForm").submit(
function() {
var newUrl = resourceURL+"&action=searchCreditCodes&"+ $jq(this).serialize();
$jq("#customerCodesTable").jqGrid("setGridParam", {"url" : newUrl,datatype : "json"}).trigger("reloadGrid");
return false;
});
$jq(".submit").button( {
icons : {
primary : 'ui-icon-circle-zoomin'
}
});
$jq("#customerCodesTableSave").click(function() {
var id = $jq("#customerCodesTable").jqGrid('getGridParam','selarrow');
alert("save");
if (id) {
var rowdata = $jq("#customerCodesTable").jqGrid('getRowData', id);
var postData = JSON.stringify(rowdata);
alert("postdata"+postData);
}
saveGrid();
});
function saveGrid() {
alert("saveGrid");
var saveCollection = [];
//Collect all rows in editmode, the rows to be saved.
$.each($jq("#customerCodesTable").getDataIDs(), function (index, id) {
var row = grid.getInd(id, true);
if (row !== false) {
if ($(row).attr('editable') === '1') {
saveCollection.push(id);
}
}
});
alert(""+saveCollection.toString() + "length" + saveCollection.length );
}
};HTML :
<div id="customerCodes_Form">
<form class="customerCodesForm" id="customerCodesForm" method="post">
<fieldset class="ui-widget ui-widget-content ui-corner-all">
<legend class="ui-widget ui-widget-header ui-corner-all">Permissions by Customer</legend>
<div>
<span>
<label for="customerNumber">Customer Number</label>
<input id="customerNumber" name="customerNumber" class=""/>
</span>
<button class="submit" type="submit">Search</button>
</div>
</fieldset>
</form>
<div id="customerCodesGrid">
<table id="customerCodesTable"><tbody><tr><td></td></tr></tbody></table>
<div id="customerCodesTablePager"></div>
<div style="float:right;">
<button id="customerCodesTableSave">Save</button>
<button id="customerCodesTableCancel">Cancel</button>
</div>
</div>
</div>Aktualisiert : @Justin Danke für deinen input, ich bin neu in JQuery, aber es ist immer gut, um die Dinge richtig 🙂 Die Daten in das jqGrid nicht gefüllt ist, in der ersten Zeit, wird es leer sein. Es ist eine such-Eingabe-Feld zu Eingabe der Kundennummer, nach der die Benutzer-drücken Sie "Go" Taste mache ich einen ajax-Aufruf zu füllen, json-Daten im jqgrid, die Daten sieht wie folgt aus [{"customerNumber":"64093","customerName":"#9735 WATSONTOWN BILO ","creditCodesPermissions.1":"True","creditCodesPermissions.2":"True","creditCodesPermissions.3":"False","creditCodesPermissions.4":"True","creditCodesPermissions.5":"True","creditCodesPermissions.6":"True","creditCodesPermissions.7":"True","creditCodesPermissions.8":"True","creditCodesPermissions.9":"False","creditCodesPermissions.10":"False","creditCodesPermissions.11":"True","creditCodesPermissions.12":"True","creditCodesPermissions.13":"True","creditCodesPermissions.-1":"True"}] ich bin nicht sicher, wie Sie Sie verwenden jsonmap für diese Art von Ausgang, ich werde versuchen, es herauszufinden. Ich werde versuchen, "celledit" - option, die Sie erwähnt. Vielen Dank für Ihre Zeit und Hilfe.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist nicht klar aus dem code, die Sie geschrieben, wie Sie das raster ausfüllen enthalten. Sie definieren nicht alle
datatype, so dass der Standardwertdatatype: 'xml'verwendet werden, und das jqGrid werden versuchen, laden von XML-Daten per ajax aus derurldie Sie auch nicht definiert und der Standard -url: ""verwendet werden. Also das jqGrid wird versuchen, die Last von Ihrem server die XML-Daten. Ich bin nicht sicher, dass es wollen, dass Sie wollte. Weil SiejsonReaderSie planen wahrscheinlich verwendendatatype: 'json'. Wenn Sie die test-Eingabedaten, die in Ihrer Frage, es wäre klar, viele Dinge.Dem nächsten problem. Verwenden Sie spezielle Zeichen in die 'name' - Eigenschaft des
colModel('creditCodesPermissions.7'oder sogar'creditCodesPermissions.-1') ist nicht gestattet. Hängt davon ab, wie Sie planen, füllen Sie die Daten, die Sie verwenden könnenjsonpmapoderxmlmapdass die Punkte, aber dies sollten Sie nur tun, wenn es wirklich erforderlich ist, und Sie können nicht ändern, das format der XML - /JSON-Daten. In irgendeiner Weise müssen Sie die änderungen die der 'name' - Eigenschaft descolModelWerten wie'creditCodesPermissions7'. Sie sollten verwenden Sie keine meta-Zeichen (wie z.B. !"#$%&'()*+,./:;<=>?@[]^`{|}~) als literalen Teil einen Namen, denn die Namen werden verwendet, zum erstellen von ids von einigen grid-Elemente.Zusätzlich würde ich Ihnen empfehlen,Spalte Vorlagen. Sollten Sie nur ein Objekt definieren wie
dann wird die definition der Spalten innerhalb der
colModelkönnte sein, wieWürde es vereinfachen, Ihre jqGrid.
Noch eine kleine Bemerkung: es gibt keine
loadOnce:trueparameter. Nurloadonce:true. DieloadOnce:trueparameter wird einfach ignoriert.Antwort auf Ihre wichtigste Frage, die man zuerst verstehen, wie die raster-Daten gefüllt werden. In keiner Weise ich würde Ihnen empfehlen, wenn Sie aus drei standard-Editier-Modus: inline Bearbeiten einer Zelle Bearbeiten des Formulars Bearbeiten. In Ihrem Fall ist die inline-Bearbeitung oder Zelle Bearbeiten wäre wahrscheinlich besser. Im Falle der Nutzung des Zelle Bearbeiten die
"dirty-cell"Klasse Hinzugefügt werden, um die cell-element (<td>element) und in der"edited"Klasse Hinzugefügt werden, um die grid-Reihe (<tr>element). So können Sie die Tatsache zu erkennen, welche Zellen aus, welche Zeilen werden durch den Benutzer geändert.