如何将编辑按钮添加到jqgrid?

时间:2012-07-31 02:30:30

标签: jquery asp.net-mvc-3 jquery-plugins jqgrid jqgrid-asp.net

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

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

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

editurl:'/ Home / Edit'

网格:

<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")'
    });
});

2 个答案:

答案 0 :(得分:1)

如果你想要默认的编辑和删除按钮,那么你可以使用动作格式化器。

只需使用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"));
    });
}

这将与动作格式化程序一起应用。如果您不需要编辑和删除按钮,只需在formatoptions中将editbutton和delbutton设为false。

答案 1 :(得分: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