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 事件被触发并显示“**”消息。但是当我点击删除按钮时，萤火虫说“未定义测试”。

欢迎提出任何建议。

Answer 1

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

再说一句。您当前添加按钮的实现非常缓慢。如果您尝试使用数百或数千行的代码，您会发现差异很明显。问题在于页面上的setRowData modify 元素。问题是页面上的每一次更改都会重新计算页面上每个现有元素的位置。至少需要完成reflow。所以使用custom formatter、cellattr 和rowattr 会更有效。您还应该始终使用 jqGrid 的 gridview: true 选项。在这种方式下，完整的 jqGrid 主体将首先准备为文本，然后作为 one 操作放置在页面上（在相应元素的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 包含在您使用的选项列表中。