如何将editbutton添加到jqgrid？

Question

我使用的是basicsgrid例如从这里：http://tpeczek.codeplex.com/releases/view/61796

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

我加入这个在网格定义的结尾：

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

Answer 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是您正在使用格式化您的按钮栏，你的内容的函数名可以用你喜欢

这里任何名称是维基文件的引用：Custom Formatter

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

这将行动格式一起应用。如果您不需要编辑和删除按钮，只需在formatoptions中将editbutton和delbutton设置为false即可。