0

現在JQGridを使用しています。
まず、編集ボタンと削除ボタンを備えたリスト グリッドを作成します。
このグリッドには編集ボタンと削除ボタンがあるため、ユーザーがこれらのボタンをクリックすると、クリックした行 ID に従って次のページにリダイレクトする必要があります。

<script type="text/javascript">
jQuery(document).ready(function () {

    var test = function () {
        alert("****");
    };

    var grid = $("#list");

    grid.jqGrid({
        url: '/Supplier/Select_SupplierByX/',
        datatype: 'json',
        mtype: 'POST',
        postData: {
            SupplierName: function () { return $("#txtSupplierName").val(); },
            Address: function () { return $("#txtAddress").val(); },
            Phone: function () { return $("#txtPhone").val(); }
        },
        colNames: ['Actions', 'SupplierID', 'SupplierName', 'Address', 'Phone'],
        colModel: [
                      { name: 'act', index: 'act', width: 25, sortable: false },
                      { name: 'SupplierID', index: 'SupplierID', width: 40, align: 'left', editable: false, searchtype: "integer" },
                      { name: 'SupplierName', index: 'SupplierName', width: 40, align: 'left', editable: false },
                      { name: 'Address', index: 'Address', width: 40, align: 'left', editable: false },
                      { name: 'Phone', index: 'Phone', width: 40, align: 'left', editable: false }
                  ],
        loadtext: 'Loading Supplier Information...',
        pager: jQuery('#pager'),
        rowNum: 10,
        sortname: 'SupplierName',
        sortorder: "asc",
        rownumbers: true,
        sortable: true,
        viewrecords: true,
        autowidth: true,
        height: 300,
        caption: 'Supplier List',
        gridComplete: function () {
            test();
            var ids = grid.jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                //be = "<input style='width:60px;' type='button' value='Edit' onclick=\"gridRowButtonClick('" + cl + "', 'true');\" />";
                //se = "<input style='width:60px;' type='button' value='Delete' onclick=\"gridRowButtonClick('" + cl + "', 'false');\" />"; 
                be = "<input style='width:60px;' type='button' value='Edit' onclick=\"javascript:alert('Testing');\" />";
                se = "<input style='width:60px;' type='button' value='Delete' onclick=\"test();\" />";
                grid.jqGrid('setRowData', ids[i], { act: be + se });
            }
        }
        /*,gridRowButtonClick: function (id, isEdit) {
        alert("This is gridRowButtonClick.\n"+ id +" : "+ isEdit);
        }*/
    }).navGrid('#pager', { search: false, del: false, add: false, edit: false },
                        {}, // default settings for edit
                        {}, // default settings for add
                        {}, // delete instead that del:false we need this
                        {}, // search options
                        {} // view parameters
        );

    $('#butSearch').click(function () {
        grid.trigger("reloadGrid");
    });



});

上位の JavaScript によると、gridComplete イベントが発生し、" * *" メッセージが表示されます。しかし、削除ボタンをクリックすると、firebug は「テストが定義されていません」と言います。

どんな提案でも大歓迎です。

4

1 に答える 1

2

イベントハンドラーtest内で関数を定義しました。グローバルにするには、外部jQuery(document).ready(function () {/*here*/});に移動する必要があります。から呼び出される関数は、グローバル レベルで定義する必要があります。onclick

もう1つの発言。ボタンを追加する現在の実装は非常に遅いです。数百または数千の行でコードを試すと、それが明確に異なることがわかります。問題は、ページ上の要素をsetRowData 変更することです。問題は、ページ上のすべての変更が、ページ上の既存のすべての要素の位置の再計算に続くことです。少なくともリフローを行う必要があります。したがって、カスタム formatter、 cellattr 、およびrowattrを使用する方がはるかに効果的です。さらに、常にgridview: truejqGrid のオプションを使用する必要があります。完全な jqGrid 本体が最初にテキストとして準備され、次に1 つの操作としてページに配置される方法で (HTML フラグメントをinnetHTML対応する要素のプロパティ)。jqGrid のパフォーマンスを何倍にも向上させます。

たとえば、'act'列を次のように定義できます

{ name: 'act', index: 'act', width: 25, sortable: false,
    formatter: function (cellvalue, options, rowObject) {
        return "<input style='width:60px;' type='button' value='Edit' " +
            "onclick=\"javascript:alert('Testing');\" />" +
            "<input style='width:60px;' type='button' value='Delete' " +
            "onclick=\"test(" +  options.rowId + ");\" />";
    }}

gridview: true使用するオプションのリストに含めることを忘れないでください。

于 2012-05-18T09:32:47.100 に答える