jquery - 获取jqgrid中所有已编辑的行

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

我有以下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调用以在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的'name'属性('creditCodesPermissions.7'甚至'creditCodesPermissions.-1')中使用特殊字符，这是不允许的。根据您打算如何填充数据，可以使用带有点的jsonpmap或xmlmap，但是只有在确实需要且您不能更改XML/JSON数据格式的情况下，才应这样做。无论如何，您都需要将colModel的'name'属性的更改为'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>元素)。因此，您可以使用事实来检测用户从哪些行更改了哪些单元格。

关于jquery - 获取jqgrid中所有已编辑的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6947088/