0

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

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

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

editurl: '/首页/编辑'

网格：

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

4

2 回答 2

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

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

于 2012-07-31T02:55:11.073 回答
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

于 2012-07-31T03:05:42.570 回答