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的'name'属性更改为'creditCodesPermissions7'之类的值。你不应该使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为名称的文字部分因为这些名称将用于构造某些网格元素的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参数。只有1个}}。 <{1}}参数将被忽略。

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

获取jqgrid中的所有已编辑行

1 个答案: