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

您在test事件处理程序中定义了jQuery(document).ready(function () {/*here*/});函数。你应该将它移到外面以使其全局化。从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包含在您使用的选项列表中。

jqgrid gridComplete setRowData onclick函数未定义

1 个答案: