Как получить все отредактированные строки?
У меня есть следующее jqgird
, где пользователи могут редактировать флажки всех записей.Когда нажата кнопка «Сохранить», мне нужно знать, что все отредактированные записи, я новичок в jquery
и jqgrid
.
Кто-нибудь может мне помочь?
Вотjqgrid и html, использующие:
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>
Обновлено: @Justin Спасибо за ваш вклад, я новичок в JQuery, но всегда хорошо получить вещиправильно :) Данные в jqGrid не заполняются в первый раз, они будут пустыми.Есть поле ввода для поиска номера клиента, после того, как пользователь нажал кнопку «Перейти», я делаю ajax-вызов, чтобы заполнить данные json в jqgrid, данные выглядят так [{"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"}]
, я не уверен, как использоватьjsonmap для такого рода вывода, я постараюсь выяснить это.Я попробую вариант celledit, который вы упомянули.Спасибо за ваше время и помощь.