如何在jqgrid中创建内联可编辑行?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在jqgrid中创建内联可编辑行?相关的知识,希望对你有一定的参考价值。

我的jqgrid有这个代码。我能够实现cellEdit。但我想在这里实现的是编辑整个row。因为cellEdit需要花费大量时间,所以需要单击要启用的单元格进行编辑。

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 }
                  ]
});

}

我也尝试了这两个cellsubmit: 'clientArray'rowEdit: true,但它不会启用该行。我在内联行中做错了吗?顺便说一下,我正在使用jqgrid 4.4.4

答案

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

以上是关于如何在jqgrid中创建内联可编辑行?的主要内容,如果未能解决你的问题,请参考以下文章

jqGrid内联编辑-添加键保存和取消

当可以进行内联编辑时,Ctrl + C无法在JqGrid上运行

如何更改jqgrid中唯一的一行背景

jqgrid内联编辑显示html标签

jqgrid 批量启动所有行为可编辑状态

在 jqGrid 中,您可以一次内联编辑多行然后进行一次提交吗?