how to make inline editable row in jqgrid?

时间:2017-12-18 08:38:22

标签: jquery jqgrid

I have this code for my jqgrid. I was able to achieve a <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> <div class="item">item 8</div> <div class="item">item 9</div> <div class="item">item 10</div> <div class="item">item 11</div> <div class="item">item 12</div>. But I want to achieve here is to edit the whole cellEdit. Because the row takes a lot of time, it needs to click the cell to be enable for editing.

cellEdit

}

I try also this two function fnGridCorrected(StartDate, EndDate) { var url1 = '../Request/_getCorrection?startDate=' + StartDate + '&endDate=' + EndDate; $("#CorrectedList").jqGrid({ url: url1, datatype: 'json', mtype: 'POST', colNames: ['rowId', 'Id', 'Date', 'Time In1', 'Time Out1', 'Time In2', 'Time Out2', 'Time In1', 'Time Out1', 'Time In2', 'Time Out2', 'Remarks', 'Status', 'Approved By', 'Date Request', 'Date Approved'], colModel: [ { name: 'rowId', index: 'rowId', hidden: true, width: 20 }, { name: 'CorrectedId', index: 'CorrectedId', hidden: true, editable: true, sortable: false, width: 20, align: 'center' }, { name: 'Date', index: 'Date', hidden: false, editable: true, sortable: false, width: 85, align: 'center' }, { name: 'In1', index: 'In1', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'Out1', index: 'Out1', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'In2', index: 'In2', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'Out2', index: 'Out2', editable: true, hidde: false, width: 80, align: 'center' }, { name: 'CorrectedIn1', index: 'CorrectedIn1', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'CorrectedOut1', index: 'CorrectedOut1', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'CorrectedIn2', index: 'CorrectedIn2', hidden: false, editable: true, sortable: false, width: 80, align: 'center' }, { name: 'CorrectedOut2', index: 'CorrectedOut2', editable: true, hidde: false, width: 80, align: 'center' }, { name: 'remarks', index: 'remarks', editable: true, hidde: false, width: 85, align: 'center' }, { name: 'Status', index: 'Status', editable: true, hidde: false, width: 85, align: 'center' }, { name: 'ApprovedBy', index: 'ApprovedBy', editable: true, hidde: false, width: 95, align: 'center' }, { name: 'ReqDate', index: 'ReqDate', editable: true, hidde: false, width: 85, align: 'center' }, { name: 'ApprovedDate', index: 'ApprovedDate', editable: true, hidde: false, width: 90, align: 'center' } ], pager: $('#CorrectedPager'), rowNum: 5, rowList: [5, 10, 20], sortname: 'Id', sortorder: 'asc', viewrecords: true, autowidth: true, shrinkToFit: false, imgpath: '/Content/themes/redmond/images/', height: '100%', cellEdit: true, cellsubmit: 'clientArray', //editurl: 'clientArray', onSelectRow: function (id) { var objRowData = jQuery("#CorrectedList").getRowData(id); }, loadComplete: function () { var ids = jQuery("#CorrectedList").getDataIDs(); var len = ids.length, newLine; if (len < 5) { AddNewRowToGrid(len, "#CorrectedList"); } } }); $("#CorrectedList").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders: [ { startColumnName: 'Date', numberOfColumns: 1, titleText: '' }, { startColumnName: 'In1', numberOfColumns: 4, titleText: 'Actual Time' }, { startColumnName: 'CorrectedIn1', numberOfColumns: 4, titleText: 'Correction', columnWidth: 500 } ] }); and cellsubmit: 'clientArray' but It won't enable the row. Did I do wrong in my Inline row?. BTW I am using rowEdit: true

1 个答案:

答案 0 :(得分:0)

我终于找到了我的问题的答案。在onSelectrow函数中,我只需添加代码jQuery('#myGrid').editRow(id, true);即可使整行可编辑。