jQWidgets jqxGrid beginrowedit() 方法

beginrowedit()方法是jQWidgets中jqxGrid的处理行编辑的方法之一，用于在Grid中开始行编辑。它的语法如下：

beginrowedit(rowId);

其中，rowId参数指定要开启编辑的行的id。

方法描述

beginrowedit()方法用于启动Grid中单元格的编辑状态，当用户点击一个单元格时，一个编辑器将在单元格中打开，用户可以在编辑器中输入或更改单元格的内容。在编辑过程中，它将按照所选择的列类型和列编辑方式来选择适当的编辑器。

这个方法只能用于启动单元格编辑，如果要启动整行编辑，可以使用beginedit()方法。

示例

$("#grid").jqxGrid({
    source: dataAdapter,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 120 },
        { text: 'Last Name', datafield: 'lastname', width: 120 },
        { text: 'Title', datafield: 'title', width: 250 },
        { text: 'Birth Date', datafield: 'birthdate', width: 120, cellsformat: 'd', cellsalign: 'right' },
        { text: 'Hire Date', datafield: 'hiredate', width: 120, cellsformat: 'd', cellsalign: 'right' },
        { text: 'Age', datafield: 'age', width: 50, cellsalign: 'right' },
        {
            text: 'Edit', datafield: 'Edit', width: 100, columntype: 'button', cellsrenderer: function () {
                return 'Edit';
            }, buttonclick: function (row) {
                // open the popup window when the user clicks a button.
                editrow = row;
                var offset = $("#grid").offset();
                $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                // get the clicked row's data and initialize the input fields.
                var dataRecord = $("#grid").jqxGrid('getrowdata', editrow);
                $("#firstname").val(dataRecord.firstname);
                $("#lastname").val(dataRecord.lastname);
                $("#title").val(dataRecord.title);
                $("#birthdate").jqxDateTimeInput('setDate', dataRecord.birthdate);
                $("#hiredate").jqxDateTimeInput('setDate', dataRecord.hiredate);
                $("#age").val(dataRecord.age);
                // show the popup window.
                $("#popupWindow").jqxWindow('open');
                $("#firstname").jqxInput('focus');
            }
        }
    ],
    editable: true,
    selectionmode: 'single'
});
 
// initialize the popup window and buttons.
$("#popupWindow").jqxWindow({
    width: 360, resizable: false, isModal: true,
    autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
});
$("#Cancel").jqxButton({});

$("#Save").jqxButton({});

$("#Save").on('click', function () {
    // end edit and save changes.
    $("#grid").jqxGrid('endrowedit', editrow, true);
    $("#popupWindow").jqxWindow('hide');
});

$("#Cancel").on('click', function () {
    // cancel edit and close popup window.
    $("#grid").jqxGrid('endrowedit', editrow, false);
    $("#popupWindow").jqxWindow('hide');
});

// begin edit.
$("#grid").on('cellclick', function (event) {
    if (event.args.datafield == 'Edit') {
        var columnheader = $("#grid").jqxGrid('getcolumn', event.args.columnindex).text;
        if (columnheader == "Edit") {
            // get the clicked row's index.
            var rowindex = $("#grid").jqxGrid('getselectedrowindex');
            // set the popup window's title.
            $("#popupWindow").jqxWindow('setTitle', "Edit " + "Row " + rowindex);
            // begin row edit.
            $("#grid").jqxGrid('beginrowedit', rowindex);
        }
    }
});

在这个示例中，我们创建了一个具有可编辑单元格和可编辑行的jqxGrid。当单击编辑按钮时，会弹出一个窗口，其中包含可编辑字段。在对其进行更改后，单击保存按钮，所有修改将保存到Grid中。如果不想保存更改，可以单击取消按钮。

结论

beginrowedit()方法是jqxGrid的一个重要功能，它允许用户在Grid中编辑单元格的内容，包括从自定义控件到内置编辑器的所有类型的控件。借助此方法，您可以快速实现特定编辑器，从而使Grid变得更具交互性和灵活性。