jqGrid：如何在启用表单编辑的每一行中添加编辑和删除按钮？

Question

我有一个如下图所示的网格：

目前，我在页脚中添加，编辑，删除按钮。我需要在每一行中都有“编辑”和“删除”按钮。当我点击每行中的编辑按钮时，它会显示编辑表单，当点击提交时，它会将数据保存到数据库。

我的代码如下所示：

    $(document).ready(function () {
        //jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
        $("#list_records").jqGrid({
            url: 'ajaxELearningFetchTableData.php?table=GET_TRAINING_TYPE',
            //url: 'server.php',
            editurl: 'ajaxELearningSaveTrainingType.php',
            datatype: "json",
            colNames: ["TRAINING TYPE ID", "TRAINING TYPE NAME", "REMARKS"],
            colModel: [
                {
                    label: 'TRAINING TYPE ID',
                    name: 'TRAINING_TYPE_ID',
                    index: 'TRAINING_TYPE_ID',
                    editable: true,
                    sortable: true,
                    sorttype: "text",
                    editoptions: {readonly: "readonly"},
                    width: 40
                },
                {
                    label: 'TRAINING TYPE NAME',
                    name: 'TRAINING_TYPE_NAME',
                    index: 'TRAINING_TYPE_NAME',
                    width: 120,
                    editable: true, // must set editable to true if you want to make the field editable
                    editoptions: {size: 50, maxlength: 80},
                    editrules: {required: true, maxlength: 80},
                    sortable: true,
                    sorttype: "text",
                    // set options related to the layout of the Edit and Add Forms
                    formoptions: {
                        colpos: 1, // the position of the column
                        rowpos: 2, // the position of the row
                        label: "Training Type Name:", // the label to show for each input control  
                        elmsuffix: "(*)"

                    }
                },
                {
                    label: 'REMARKS',
                    name: 'REMARKS',
                    width: 140,
                    editable: true,
                    edittype: 'textarea',
                    editoptions: {rows: 3, cols: 45},
                    formoptions: {
                        colpos: 1,
                        rowpos: 3
                    }
                }
            ],
            loadonce: true,
            viewrecords: true,
            altRows: true,
//            width: auto,
//            height: auto,
            width: 1000,
            height: 300,
            rowNum: 10,
            rowList: [10, 20, 30],
            caption: "Training Type Information",
            sortname: 'TRAINING_TYPE_ID',
            sortorder: "asc",
            emptyrecords: "No Records to Display.",

            //footerrow: true,
            pager: "#perpage"
        });

        $('#list_records').navGrid('#perpage',
                // the buttons to appear on the toolbar of the grid
                        {edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false},
                // options for the Edit Dialog
                        {
                            height: 'auto',
                            width: 620,
                            editCaption: "Edit Training Type",
                            url: 'ajaxSaveTrainingType.php',
                            recreateForm: true,
                            closeAfterEdit: true,
                            afterComplete: function (response) {
                                alert(response.responseText);
                            },

//                            afterShowForm: function(form) {
//                                form.closest('div.ui-jqdialog').center();
//                            },
                            afterSubmit: function () {
                                $(this).jqGrid("setGridParam", {datatype: 'json'});
                                return [true];
                                //location.reload(true);
                            }
                        },
                // options for the Add Dialog
                        {
                            height: 'auto',
                            width: 620,
                            addCaption: "Add Training Type",
                            url: 'ajaxSaveTrainingType.php',
                            closeAfterAdd: true,
                            recreateForm: true,
                            afterComplete: function (response) {
                                alert(response.responseText);
                            },
//                            afterShowForm: function(form) {
//                                form.closest('div.ui-jqdialog').center();
//                            },
//                           
                            afterSubmit: function () {
                                $(this).jqGrid("setGridParam", {datatype: 'json'});
                                return [true];
                                //location.reload(true);
                            }
                        },
                // options for the Delete Dailog
                        {
                            height: 'auto',
                            width: 620,
                            addCaption: "Delete Training Type",
                            url: 'ajaxSaveTrainingType.php',
                            closeAfterAdd: true,
                            recreateForm: true,
                            //rp_ge, postdata
                            onclickSubmit: function () {

                                var sel_id = $('#list_records').jqGrid('getGridParam', 'selrow');
                                var trainingTypeId = $('#list_records').jqGrid('getCell', sel_id, 'TRAINING_TYPE_ID');
                                return {tTypeId: trainingTypeId};


                            },
                            afterComplete: function (response) {
                                alert(response.responseText);
                            },
//                            afterShowForm: function(form) {
//                                form.closest('div.ui-jqdialog').center();
//                            },
                            afterSubmit: function () {
                                $(this).jqGrid("setGridParam", {datatype: 'json'});
                                return [true];
                                //location.reload(true);
                            }
                        });
            });

欢迎任何帮助。

感谢。

Answer 1

您可以添加使用formatter: "actions"属性formatoptions: { editformbutton: true }的列。如果您使用free jqGrid（它是我开发的jqGrid的分支），那么您可以使用template: "actions"：

{ name: "act", template: "actions", formatoptions: { editformbutton: true } }

请参阅the demo作为示例。

如果使用旧的jqGrid（版本＆lt; = 4.7），您可以添加具有以下属性的列，例如：

{ name: "act", formatter: "actions", formatoptions: { editformbutton: true },
    width: 54, align: "center", fixed: true, hidedlg: true, resizable: false,
    sortable: false, search: false, editable: false, viewable: false }