http://www.trirand.com/blog/jqgrid/jqgrid.html
最初の列をアクションとして、最初の列に編集、保存、キャンセルとして3つのボタンがある5つの列を持つjqgridがあります。データリストをjqgridにバインドするとき、2つの問題があります...最初の列には3つのボタンがあるため、列のデータが間違って配置され、リストの列のデータが最初の列にバインドされます列名としてアクションを持つグリッドの列で、他のすべての列データが間違って配置されています
アクション列の編集ボタンをクリックすると、グリッド内のすべての行がアクション列を含むインライン編集機能をサポートしているため、保存をクリックするオプションがありません。
私のjQueryコード:
<script type="text/javascript">
$(function () {
var lastsel;
jQuery("#list").jqGrid({
url: '/Home/GetStudents/',
datatype: 'json',
mtype: 'POST',
colNames: ['Actions', 'StudentID', 'FirstName', 'LastName', 'Email'],
colModel: [
{ name: 'act', index: 'act', width: 75, sortable: false },
{ name: 'StudentID', sortable: false, key: true },
{ name: 'FirstName', key: true },
{ name: 'LastName', sortable: false, key: true },
{ name: 'Email', width: 200, sortable: false, key: true}],
cmTemplate: { align: 'center', editable: true },
pager: '#pager',
width: 750,
rowNum: 15,
rowList: [5, 10, 20, 50],
sortname: 'StudentID',
sortorder: "asc",
viewrecords: true,
caption: ' My First JQgrid',
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
}
},
editurl: '/Home/About/',
// data: { get_param: selectedDescription },
caption: "jQgrid Sample"
});
jQuery("#list").jqGrid('navGrid', "#prowed2", { edit: false, add: false, del: false });
});
</script>