Получить все отредактированные строки в jqgrid - PullRequest
5 голосов
/ 04 августа 2011

Как получить все отредактированные строки?

У меня есть следующее 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, который вы упомянули.Спасибо за ваше время и помощь.

1 Ответ

4 голосов
/ 05 августа 2011

Из кода, который вы разместили, не ясно, как вы заполняете таблицу.Вы не определяете datatype, поэтому будет использоваться значение по умолчанию datatype: 'xml', и jqGrid будет пытаться загрузить XML-данные за ajax из url, который вы также не определили, и будет использоваться значение по умолчанию url: "".,Поэтому jqGrid попытается загрузить с вашего сервера данные XML.Я не уверен, что ты этого хочешь.Поскольку вы используете jsonReader, вы, вероятно, планируете использовать datatype: 'json'.Если вы включите тестовые входные данные в свой вопрос, это прояснит многие вещи.

Следующая проблема.Вы используете специальные символы в свойстве «name» colModel ('creditCodesPermissions.7' или даже 'creditCodesPermissions.-1'), что недопустимо.Зависит от того, как вы планируете заполнять данные, которые вы можете использовать jsonpmap или xmlmap, имея баллы, но вы должны делать это только в том случае, если это действительно необходимо и вы не можете изменить формат данных XML / JSON.В любом случае вам необходимо изменить свойство 'name' colModel на значения, подобные 'creditCodesPermissions7'.Вы не должны использовать метасимволы (такие как! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) В качестве литеральной части имени, потому что именабудет использоваться для создания идентификаторов некоторых элементов сетки.

Кроме того, я бы порекомендовал вам использовать шаблоны столбцов . Вам просто нужно определить объект, например

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 будет просто проигнорирован.

Чтобы ответить на ваш главный вопрос, нужно сначала понять, как заполняются данные сетки. В любом случае, я рекомендую вам использовать любой из трех стандартныхрежим редактирования: встроенное редактирование, редактирование ячейки, редактирование формы. В вашем случае, вероятно, лучше будет встроенное редактирование или редактирование ячейки . В случае использования редактирование ячейки the "dirty-cell" класс будет добавлен к элементу ячейки (<td> элемент) и *Класс 1040 * будет добавлен в строку сетки (элемент <tr>).Таким образом, вы можете использовать тот факт, чтобы определить, какие ячейки и строки изменены пользователем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...