Как добавить editbutton в jqgrid?

Question

Я использую basicsgrid пример здесь: http://tpeczek.codeplex.com/releases/view/61796

Попытка добавить editbutton для каждой строки, так что я могу открыть страницу редактирования, но не работает? что мне не хватает?

Я добавил это в конце определения сетки:

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

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' 
} 

STH, как это сейчас здесь только вы можете указать, редактировать и удалять параметры

как это

{ 
    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 ложными в formatoptions.