如何获取编辑的所有行？
我有以下内容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中的数据第一次没有填充,它将是空的.有一个搜索输入框输入客户编号,用户点击"Go"按钮后我正在进行ajax调用以填充jqgrid中的json数据,数据看起来像这样[{"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"选项.感谢您的时间和帮助.
从您发布的代码中不清楚如何填充网格包含。您没有定义任何datatype，因此将使用默认值datatype: 'xml'，并且 jqGrid 将尝试从url您也未定义的每个ajax加载XML数据，并且url: ""将使用默认值。因此 jqGrid 将尝试从服务器加载 XML 数据。我不确定这是否是你想要的。因为您使用jsonReader您可能计划使用datatype: 'json'. 如果您将测试输入数据包含在您的问题中，那么很多事情都会清楚。
下一个问题。colModel您在('creditCodesPermissions.7'甚至)的 'name' 属性中使用特殊字符，'creditCodesPermissions.-1'这是不允许的。取决于您计划如何填充您可以使用的数据jsonpmap或xmlmap拥有的点，但仅当确实需要并且您无法更改 XML/JSON 数据的格式时才应该这样做。无论如何，您都需要将 的 'name' 属性更改为colModel诸如 之类的值'creditCodesPermissions7'。您不应使用元字符（例如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文字部分，因为名称将用于构造一些网格元素的 id。
此外，我建议您使用列模板。你应该定义一个像这样的对象
var myCheckBoxTemplate = {
width: 40, align: "center", editable: true, edittype: 'checkbox',
editoptions: { value: "True:False"}, formatter: "checkbox",
formatoptions: {disabled : false}
};
那么里面的列的定义colModel可能是这样的
{name: 'creditCodesPermissions1', index: 'codeOne', template: myCheckBoxTemplate}
它会简化你的 jqGrid。
还有一点要注意的是：没有loadOnce:true参数。仅有的loadonce:true。该loadOnce:true参数将被忽略。
要回答您的主要问题，首先需要了解网格数据是如何填充的。无论如何，我建议您使用三种标准编辑模式中的任何一种：内联编辑、单元格编辑、表单编辑。在您的情况下，内联编辑或单元格编辑可能会更好。在使用单元格编辑的情况下，类"dirty-cell"将添加到单元格元素（<td>元素），"edited"类将添加到网格行（<tr>元素）。因此，您可以使用该事实来检测用户更改了哪些单元格、哪些行。