c# - jqgrid gridComplete setRowData onclick函数未定义

Question

我现在正在使用 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 说“测试未定义”。

如有任何建议，我们将不胜感激。

Answer 1

您在 jQuery(document).ready(function () {/*here*/}); 事件处理程序中定义了 test 函数。您应该将其移到外部以使其成为全局的。从 onclick 调用的函数必须在全局级别上定义。

再补充一点。您当前添加按钮的实现非常慢。如果您尝试使用数百行或数千行的代码，您会发现情况有所不同。问题在于 setRowData 修改 页面上的元素。问题在于页面上的每次更改都会重新计算页面上每个现有元素的位置。至少reflow需要完成。所以使用 custom formatter 更有效、 cellattr 和 rowattr 。您还应该始终使用jqGrid的gridview: true选项。这样，完整的 jqGrid 正文将首先准备为文本，然后作为一个操作放置在页面上(在相应元素的 innetHTML 属性中设置 HTML 片段)。它多次提高了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 添加到您使用的选项列表中。