0

我需要从服务器加载 JSON，并且我想让用户能够单击并编辑该值。

但是当他们编辑时，它不应该调用服务器。我的意思是我不会立即更新。所以我不想要editurl。所以我尝试了“ClientArray”，但它仍然显示 Url 未设置警报框。但是当用户单击“添加评论项”按钮时，我需要所有已编辑的值，此按钮将触发AddSelectedItemsToSummary()以将这些值保存在服务器中

MVC HTML 脚本

<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，但我认为这对用户来说不会很舒服，因为从用户的角度来看，他将开始编辑一个单元格单击另一个单元格。好像我很不舒服。可能你想实现内联编辑？

您的代码中的一个明显错误是使用showSummaryGridinside of RemoveFromSummary。该函数RemoveFromSummary 创建jqGrid 而不仅仅是填充它。所以一个人应该只调用一次。要刷新网格的主体，您应该调用$("#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 回答