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（版本< = 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 }