0

サーバーからJSONをロードする必要があり、ユーザーが値をクリックして編集できるようにしたい。

しかし、彼らが編集するとき、それはサーバーを呼び出すべきではありません。つまり、すぐに更新するつもりはありません。だから私はediturlを望んでいません。だから私は'ClientArray'を試しましたが、それでもUrlがアラートボックスに設定されていないことを示しています。しかし、ユーザーが[コメント付きアイテムの追加]ボタンをクリックすると、編集されたすべての値が必要になります。このボタンを押すと、AddSelectedItemsToSummary（）が起動され、サーバーに保存されます。

MVCHTMLスクリプト

<div>
<table id="persons-summary-grid"></table>
<input type="hidden" id="hdn-deptsk" value="2"/>
<button id="AddSelectedItems" onclick="AddSelectedItemsToSummary();" />
</div>


$(document).ready(function(){
   showSummaryGrid(); //When the page loads it loads the persons for Dept
});

JSONデータ

    {"total":2,"page":1,"records":2,
     "rows":[{"PersonSK":1,"Type":"Contract","Attribute":"Organization
           Activity","Comment":"Good and helping og"},
          {"PersonSK":2,"Type":"Permanant","Attribute":"Team Management",
          "Comment":"Need to improve leadership skill"}
    ]}

jQGRIDコード

var localSummaryArray;

function showSummaryGrid(){

 var summaryGrid = $("#persons-summary-grid");

 // doing this because it is not firing second time using .trigger('reloadGrid')
 summaryGrid.jqGrid('GridUnload'); 
 var deptSk = $('#hdn-deptsk').val();
 summaryGrid.jqGrid({
 url: '/dept/GetPersonSummary',
 datatype: "json",
 mtype: "POST",
 postData: { deptSK: deptSk },
 colNames: [
            'SK', 'Type', 'Field Name', 'Comments'],
colModel: [
           { name: 'PersonSK', index: 'PersonSK', hidden: true },
           { name: 'Type', index: 'Type', width: 100 },

           { name: 'Attribute', index: 'Attribute', width: 150 },
           { name: 'Comment', index: 'Comment', editable: true, 
                    edittype: 'textarea',  width: 200 }
         ],

cellEdit: true,
cellsubmit: 'clientArray',
editurl: 'clientArray',
rowNum: 1000,
rowList: [],        
pgbuttons: false,     
pgtext: null,         
viewrecords: false,    
emptyrecords: "No records to view",
gridview: true,
caption: 'dept person Summary',
height: '250',

jsonReader: {
    repeatitems: false

},
loadComplete: function (data) {

        localSummaryArray= data;
        summaryGrid.setGridParam({ datatype: 'local' });
        summaryGrid.setGridParam({ data: localSummaryArray});
    }

});
)

ボタンクリック機能

function AddSelectedItemsToSummary() {

 //get all the items that has comments 
 //entered using cell edit and save only those.
 // I need to prepare the array of items and send it to MVC controller method
 // Also need to reload summary grid

}

誰かがこれを助けることができますか？そのURLが設定されていないというエラーが発生するのはなぜですか？

編集：

このコードは、loadCompleteの変更後に機能します。URLセットなしアラートが表示される前

4

1 に答える 1

1

あなたが説明しているセル編集の問題がわかりません。さらに、「ユーザーが+アイコンを続けてクリックしたときに編集された値が必要です」と書きました。「+」アイコンはどこにありますか？「trash.gif」アイコンのことですか？セル編集を使用したい場合、行のアイコンをクリックした場合にどのように想像しますか？「trash.gif」アイコンをクリックして編集を開始するセルはどれですか？「trash.gif」アイコンがeditCellメソッドであるセルとして他のセルの編集を開始できますが、ユーザーの観点からは1つのセルの編集を開始するため、ユーザーにとって快適ではないと思います。別のセルをクリックします。不快そうです。おそらくインライン編集を実装したいですか？

コードの明らかなエラーの1つは、showSummaryGridinsideの使用法ですRemoveFromSummary。関数はjqGridをRemoveFromSummary 作成し、それを埋めるだけではありません。したがって、一度だけ呼び出す必要があります。グリッドの本体を更新するには、$("#persons-summary-grid").trigger("refreshGrid");代わりに呼び出す必要があります。使用法の代わりに使用postData: { deptSK: deptSk }する必要があります

postData: { deptSK: function () { return $('#hdn-deptsk').val(); } }

この場合、refreshGridをトリガーするだけで十分であり、サーバーに現在の値を送信します'#hdn-deptsk'。詳細については、回答を参照してください。

更新：あなたが説明した問題を再現できませんでしたが、必要なことを実行するデモを準備しました（要件を正しく理解している場合）。あなたがおそらく必要とするコードの最も重要な部分は以下にあります

$("#AddSelectedItems").click(function () {
    var savedRow = summaryGrid.jqGrid("getGridParam", "savedRow"),
        $editedRows,
        modifications = [];
    if (savedRow && savedRow.length > 0) {
        // save currently editing row if any exist
        summaryGrid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
    }
    // now we find all rows where cells are edited
    summaryGrid.find("tr.jqgrow:has(td.dirty-cell)").each(function () {
        var id = this.id;
        modifications.push({
            PersonSK: id,
            Comment: $(summaryGrid[0].rows[id].cells[2]).text() // 2 - column name of the column "Comment"
        });
    });
    // here you can send modifications per ajax to the server and call
    // reloadGrid inside of success callback of the ajax call
    // we simulate it by usage alert
    alert(JSON.stringify(modifications));
    summaryGrid.jqGrid("setGridParam", {datatype: "json"}).trigger("reloadGrid");
});
于 2013-02-03T09:20:29.413 に答える