如何将editbutton添加到jqgrid？

Posted 2023-05-09

【中文标题】如何将editbutton添加到jqgrid？

【英文标题】：how to add editbutton to jqgrid?

【发布时间】：2012-07-28 18:12:03

【问题描述】：

我正在使用这里的 basicsgrid 示例：http://tpeczek.codeplex.com/releases/view/61796

尝试为每一行添加一个编辑按钮，以便我可以打开我的编辑页面但不起作用？我错过了什么？

我在网格定义的末尾添加了这个：

editurl: '/Home/编辑'

网格：

<script type="text/javascript">
$(document).ready(function () 
    $('#jqgProducts').jqGrid(
        //url from wich data should be requested
        url: '@Url.Action("Products")',
        //type of data
        datatype: 'json',
        //url access method type
        mtype: 'POST',
        //columns names
        colNames: ['Actions', 'ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
        //columns model
        colModel: [
             name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions' ,
                     name: 'ProductID', index: 'ProductID', align: 'left' ,
                     name: 'ProductName', index: 'ProductName', align: 'left' ,
                     name: 'SupplierID', index: 'SupplierID', align: 'left' ,
                     name: 'CategoryID', index: 'CategoryID', align: 'left' ,
                     name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' ,
                     name: 'UnitPrice', index: 'UnitPrice', align: 'left' ,
                     name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' 
                  ],
        //pager for grid
        pager: $('#jqgpProducts'),
        //number of rows per page
        rowNum: 10,
        //initial sorting column
        sortname: 'ProductID',
        //initial sorting direction
        sortorder: 'asc',
        //we want to display total records count
        viewrecords: true,
        //grid height
        height: '100%',
        editurl: '@Url.Action("Edit")'
    );
);

【问题讨论】：

你想为每一行添加自定义按钮，或者默认情况下也可以编辑按钮，你想使用吗？

@PiyushSardana 只是标准的编辑按钮简单而简单的thnks

然后检查我的答案..以及我在那里发布的链接

【参考方案1】：

我使用格式化程序功能来添加将您引导至其他页面的按钮。 这是我的做法

function PKId_formatter(cellvalue, options, rowObject) 
    return '<a href="yourEditUrl?id=' + cellvalue + '"><img src="pencil.png" border=0 /></a>';

然后将formatter: PKId_formatter 添加到您的列定义中

colModel : [
    ...
     name: '...', index: '...', formatter: PKId_formatter , ...,
    ...
]

请注意：PKId_formatter 是您用于格式化按钮列内容的函数名称，您可以使用任何您喜欢的名称

这里是对 wiki 文档的引用：Custom Formatter

【参考方案2】：

如果您想要默认的编辑和删除按钮，那么您可以使用操作格式化程序。

只需使用colName在您的网格中再添加一列

colNames:['Actions', ... ] 这样的东西和colModal

  name:'act', index:'act', width:55, align:'center', sortable: false,
  formatter: 'actions'

现在这里只有你可以指定编辑和删除选项

喜欢这个

  name: 'act', index: 'act', width: 75, align: 'center', sortable: false,
  formatter: 'actions',
  formatoptions: 
    keys: true, restoreAfterError: false, onError: callyourErrorFunction,
    afterSave://if you wanto reload ur grid here, reload it,
    onEdit: function (id) 
      if (typeof (lastSel) !== "undefined" && id !== lastSel) 
        var grid=$("#grid");
        cancelEditing(grid);
      
      lastSel = id;
    ,
    editOptions: 
      url: '@Url.Action("EditAction")',
      restoreAfterError: false
    ,
    delOptions: 
      url: '@Url.Action("DeleteAction")'
    
  

检查这个答案：jqgrid EditActionIconsColumn Events

如果你想要自定义按钮，那么你可以这样做

loadComplete: function () 
    var iCol = getColumnIndexByName(grid, 'act');
    $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
        .each(function() 
            $("<div>", 
                title: "Custom",
                mouseover: function() 
                    $(this).addClass('ui-state-hover');
                ,
                mouseout: function() 
                    $(this).removeClass('ui-state-hover');
                ,
                click: function(e) 
                    alert("'Custom' button is clicked in the rowis="+
                        $(e.target).closest("tr.jqgrow").attr("id") +" !");
                
            
          ).css("margin-right": "5px", float: "left", cursor: "pointer")
           .addClass("ui-pg-div ui-inline-custom")
           .append('<span class="ui-icon ui-icon-document"></span>')
           .prependTo($(this).children("div"));
    );

这将与动作格式化程序一起应用。如果您不需要那里的编辑和删除按钮，只需在格式选项中将editbutton和delbutton设置为false即可。

【讨论】：

我更新了网格定义，但它仍然不会重定向到编辑操作？

哥们，你需要指定编辑选项，等我给你一些代码

这对我有用……我认为另一个（BobSort）答案对你有用……所以将其标记为答案