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

フォーマッタ関数を使用して、別のページに移動するボタンを追加しました。これが私がやった方法です

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 に答える
1

デフォルトの編集および削除ボタンが必要な場合は、アクションフォーマッターを使用できます。

グリッドにもう1列追加するだけです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 イベント

カスタムボタンが必要な場合は、このようにsthを実行できます

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 にします。

于 2012-07-31T02:55:11.073 に答える