获取jqgrid中所有已编辑的行

Question

如何获取所有被编辑的行？

我有关注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”选项。感谢您的时间和帮助。

Answer 1

从您发布的代码中不清楚您如何填充网格包含。您没有定义任何datatype，因此将使用默认值datatype: 'xml'，jqGrid 将尝试从您也未定义的url 加载每个ajax 的XML 数据，并且将使用默认url: "" .因此 jqGrid 将尝试从您的服务器加载 XML 数据。我不确定这是你想要的。因为您使用jsonReader，所以您可能计划使用datatype: 'json'。如果您将测试输入数据包含在您的问题中，它将清除很多事情。

下一个问题。您在colModel（'creditCodesPermissions.7' 甚至'creditCodesPermissions.-1'）的“名称”属性中使用了不允许的特殊字符。取决于您计划如何填充数据，您可以使用 jsonpmap 或 xmlmap 来获得积分，但只有在确实需要并且您无法更改 XML/JSON 数据的格式时才应该这样做。无论如何，您都需要将colModel 的“名称”属性更改为'creditCodesPermissions7' 之类的值。您不应使用元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~）作为名称的文字部分，因为名称将用于构造一些网格元素的id。

另外，我建议您使用column templates。你应该定义一个像

这样的对象

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 参数将被忽略。

要回答您的主要问题，首先需要了解网格数据的填充方式。无论如何，我建议您使用三种标准编辑模式中的任何一种：内联编辑、表单编辑的单元格编辑。在您的情况下，内联编辑或cell editing 可能会更好。在使用cell editing 的情况下，"dirty-cell" 类将添加到单元格元素（<td> 元素），"edited" 类将添加到网格行（<tr> 元素）。因此，您可以使用事实来检测用户更改了哪些单元格中的哪些行。