2014-12-03 255 views
-1

我在內聯編輯中遇到問題,我有一個帶分頁器的jqGrid。如果用戶更改三個單元格的值,則假設。編輯第三個單元格後,用戶單擊jqGrid尋呼機的下一頁按鈕。現在,當用戶返回到第一頁時,只保留前兩個單元格的更改值並丟失第三個單元格的值。請建議如何保留所有單元格的值..?jqGrid中的內聯編輯不起作用

示例代碼:

var mydata = [{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
},{ 
    name: "Toronto", 
    country: "Canada", 
    continent: "North America" 
}, { 
    name: "New York City", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Silicon Valley", 
    country: "USA", 
    continent: "North America" 
}, { 
    name: "Paris", 
    country: "France", 
    continent: "Europe" 
}] 

$("#grid").jqGrid({ 
    data: mydata, 
    datatype: "local", 
    colNames: ["Name", "Country", "Continent"], 
    colModel: [{ 
     name: 'name', 
     index: 'name', 
     editable: true, 
    }, { 
     name: 'country', 
     index: 'country', 
     editable: true, 
    }, { 
     name: 'continent', 
     index: 'continent', 
     editable: true, 
    }], 
    rowNum: 10, 
    pager: '#pager', 
    'cellEdit': true, 
    'cellsubmit' : 'clientArray', 
    editurl: 'clientArray' 
}); 
+0

請添加一些代碼,以便人們可以幫助您正確。 – sidneydobber 2014-12-03 12:07:44

+0

請點擊此鏈接查看代碼。只需添加更多的數據即可激活分頁功能:jsfiddle.net/aditib/CzWK/ – 2014-12-03 12:31:28

回答

0

是錯誤的使用cellEdit: true,如果你想使用在線編輯。另一方面,要使用內聯編輯,您必須開始內聯編輯,例如,您可以在onSelectRow回撥內(參見the documentation)開始editRow。所以你發佈的代碼只是忽略了editurl: 'clientArray',它的工作方式就像純粹的單元格編輯

您遇到的主要問題是未保存的數據正在分頁。爲了解決這個問題,你需要在onPaging回調中明確調用saveCell方法。 saveCell所需的參數iRowiCol您可以獲得標準jqGrid options(使用getGridParam方法)的屬性。相應的代碼可以如下所示:

onPaging: function() { 
    var $self = $(this), p = $self.jqGrid("getGridParam"); 
    $self.jqGrid("saveCell", p.iRow, p.iCol); 
} 

代碼中的下一個潛在問題:數據未滿。輸入數據應該包含id屬性來標識每一項輸入數據。輸入數據數組包含例如多個Toronto項目。這可能只是測試輸入中的一個問題。該數據可以在網格中顯示排序的表格,因此很難區分這些項目。嚴格建議分配id屬性。您可以稍後使用$("#grid").jqGrid("getGridParam", "data")獲取修改後的數據,並將項目與基於id的原始數據進行比較,以查看哪個項目發生了變化。

我建議你爲每個項目添加獨特的id屬性。它可能是例如1,2,3或10,20,30或類似的東西。相應的修改代碼如下。我也給jqGrid添加了一些選項。您可以運行代碼並驗證分頁期間未保存數據的問題是否已解決。

var mydata = [{ 
 
    id: 10, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 20, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 30, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 40, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 50, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 60, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 70, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 80, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 90, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 100, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 110, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 120, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 130, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 140, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 150, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 160, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 170, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 180, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 190, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 200, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 210, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 220, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 230, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 240, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 250, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 260, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 270, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 280, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 290, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 300, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 310, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 320, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 330, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 340, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 350, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 360, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
},{ 
 
    id: 370, 
 
    name: "Toronto", 
 
    country: "Canada", 
 
    continent: "North America" 
 
}, { 
 
    id: 380, 
 
    name: "New York City", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 390, 
 
    name: "Silicon Valley", 
 
    country: "USA", 
 
    continent: "North America" 
 
}, { 
 
    id: 400, 
 
    name: "Paris", 
 
    country: "France", 
 
    continent: "Europe" 
 
}]; 
 

 
$("#grid").jqGrid({ 
 
    data: mydata, 
 
    datatype: "local", 
 
    colNames: ["Name", "Country", "Continent"], 
 
    colModel: [ 
 
     { name: 'name' }, 
 
     { name: 'country' }, 
 
     { name: 'continent' } 
 
    ], 
 
    cmTemplate: { editable: true }, 
 
    rowNum: 10, 
 
    pager: '#pager', 
 
    cellEdit: true, 
 
    cellsubmit: 'clientArray', 
 
    rownumbers: true, 
 
    gridview: true, 
 
    autoencode: true, 
 
    height: 'auto', 
 
    onPaging: function() { 
 
     var $self = $(this), p = $self.jqGrid("getGridParam"); 
 
     $self.jqGrid("saveCell", p.iRow, p.iCol); 
 
    } 
 
});
html, body { font-size: 75%; } 
 
.ui-jqgrid-hdiv { overflow-y: hidden; }
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/> 
 
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script> 
 
<script type="text/javascript"> 
 
    $.jgrid.no_legacy_api = true; 
 
    $.jgrid.useJSON = true; 
 
</script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script> 
 
<table id="grid"><tr><td></td></tr></table> 
 
<div id="pager"></div>