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

任何建议表示赞赏。

4

1 回答 1

2

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

再说一句。您当前添加按钮的实现非常缓慢。如果您尝试使用数百或数千行的代码，您会发现差异很明显。问题是setRowData 修改页面上的元素。问题是页面上的每一次更改都会重新计算页面上每个现有元素的位置。至少需要进行回流。所以使用自定义格式化程序、 cellattr 和rowattr会更有效。您还应该始终使用gridview: truejqGrid 选项。在方式上，完整的 jqGrid 主体将首先准备为文本，然后作为一个操作放置在页面上（将 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 回答