logo标签列表

保存/提交后重新加载jqGrid

jqueryjqgrid
5
我有以下代码，用于双击进入行内编辑：
ondblClickRow: function (row_id) {
            if(row_id != null) {
                    $('#Products').jqGrid('restoreRow',last_selected_row);
                    $('#Products').jqGrid('saveRow',row_id);
                    $("#Products").jqGrid('editRow',row_id, true, null, 
                        function(){ $("#Products").trigger("reloadGrid", [{current: true}]); }, 
                        'xtras/Products.php', 
                        null,{},
                        {},{}
                    );
                    $("#Products_ilsave").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcopy").addClass('ui-state-disabled');
                    $("#Products_iladd").addClass('ui-state-disabled');
            } 
        }

和导航定义：

$("#Products").jqGrid("navGrid", "#Products_pager",
            {search: true, add: false, edit: false, del: true, refreshstate: "current"},
            {},
            {},
            {},
            {},
            {sopt:['eq','ne','cn','bw','bn','ge','le','lt','gt'], multipleSearch:true, showQuery: false}
        )
    .jqGrid("inlineNav", "#Products_pager",
        {add: true, edit: true},
    )
    .navButtonAdd('#Products_pager',{
        caption:"", 
        title:"Copy selected row",
        id:"Products_ilcopy", 
        buttonicon:"ui-icon-copy", 
        onClickButton: function(){
            var srcrowid = $grid.jqGrid('getGridParam', 'selrow');

            if (srcrowid > 0) {
                $('#Products_iladd').click();
                var rowData = $('#Products').jqGrid('getRowData', srcrowid);
                rowData.ID = '';
                rowData.Catalogue = '';
                rowData.UPCEAN = '';
                rowData.copyID = srcrowid;
                $grid.jqGrid('setRowData', 'new_row', rowData);
                var ondblClickRowHandler = $('#Products').jqGrid("getGridParam", "ondblClickRow");
                ondblClickRowHandler.call($("#Products")[0], 'new_row');
            } else {
                alert('Please select a row to copy');
                return false;
            }
        }, 
        position:"last"
    });

当我点击“复制”按钮时，您可以看到创建了一行新的数据，并调用了“ondblClickRow”以进行内联编辑。如果我在“navGrid”中点击“保存”按钮-它会保存但不会重新加载。如果我按Enter键-它会重新加载，但不会保存任何内容。
请问如何保存并重新加载网格？
--------------更新---------------------
添加、编辑、删除、复制 - 所有的URL都是相同的-'xtras/Products.php'
url:'xtras/Products.php',
editurl:'xtras/Products.php',
datatype: "json",
mtype:'GET',

$('#Products') - 是页面上唯一的网格

使用 - jqGrid 4.4.2

在所有jqGrid问题中，了解以下内容非常重要：您使用哪种“datatype”？您需要从本地或服务器重新加载数据吗？您使用哪个“editurl”？您是在本地还是在服务器上编辑和保存数据？如果“$('#Products')”是同一个网格还是另一个网格？您使用的是哪个版本的jqGrid以及哪个分支（旧版jqGrid、免费jqGrid、Guriddo jqGrid JS）？ - Oleg
@Oleg，抱歉，我已经更新了帖子。 - Elen
1个回答
3
您当前代码主要存在以下问题：您仅在直接调用editRow时指定了reloadGrid作为回调函数。而另一方面，您使用了inlineNav，它包含其他两个调用editRow的操作：一个是单击“编辑”按钮时，另一个是单击“添加”按钮时。在这种情况下，网格将不会重新加载。实现“复制选定行”按钮时还存在其他问题。因此，我决定重写您所使用的代码。最终代码可能如下所示：
var editOptions = {
        keys: true,
        aftersavefunc: function() {
            var $self = $(this);
            setTimeout(function () {
                $self.trigger("reloadGrid", [{current: true}]);
            }, 50);
        },
        url: "xtras/Products.php"
    },
    gridIdSelector = "#Products",
    pagerIdSelector = "#Products_pager",
    $grid = $(gridIdSelector);

$.extend($.jgrid.search, {
    sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"],
    multipleSearch: true
});

// create the grid
$grid.jqGrid({
    ...
    pager: pagerIdSelector,
    ondblClickRow: function (rowid) {
        var $self = $(this),
            savedRows = $self.jqGrid("getGridParam", "savedRow");

        if (savedRows.length > 0 && savedRows[0].id !== rowid) {
            // cancel editing of another row is editing
            // don't cancel on double click on the current editing
            $self.jqGrid("restoreRow", savedRows[0].id);
        }
        if (savedRows.length === 0) {
            $self.jqGrid("editRow", rowid, editOptions);
        }
    }
})
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
    caption: "",
    title: "Copy selected row",
    id: $grid[0].id + "_ilcopy", 
    buttonicon: "ui-icon-copy",
    onClickButton: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
            srcrowid = p.selrow, savedRows = p.savedRow;

        if (srcrowid !== null) {
            if (savedRows.length > 0) {
                // cancel editing
                $self.jqGrid("restoreRow", savedRows[0].id);
            }
            rowData = $self.jqGrid("getRowData", srcrowid);
            rowData.ID = "";
            rowData.Catalogue = "";
            rowData.UPCEAN = "";
            rowData.copyID = srcrowid;
            $self.jqGrid("addRow", {
                initdata: rowData,
                addRowParams: editOptions 
            });
        } else {
            alert("Please select a row to copy");
            return false;
        }
    }
});

// Enable/disable buttons on start/end of editing
$grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function () {
    var $self = $(this),
        savedRows = $self.jqGrid("getGridParam", "savedRow");
    if (savedRows.length > 0) {
        // some row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled");
    } else {
        // No row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled");
    }
});

您可以看到，我定义了一个对象editOptions，并在后面的所有情况中将其用作editRow的选项。此外，我使用jqGrid的savedRow参数，它保存有关当前正在编辑的行（涉及内联或单元格编辑）的信息。如果savedRow是空数组，则现在没有正在编辑的行。如果不为空，则数组项的id属性包含正在编辑行的rowid。我还在“复制选定行”按钮的onClick处理程序中直接调用addRow方法。
嗨，Oleg，我理解了你的解释和代码 - 我看到了在复制中直接调用addRow以及为什么使用editOptions对象。我不知道还有savedRow参数，所以这很有帮助。我稍后会尝试你的代码并让你知道结果。 - Elen
你的代码几乎按预期工作……但“保存”按钮始终处于禁用状态……因为它仅在savedRows.length > 0之后启用，而此时它被调用在save之后……顺便说一下，initdata:rowData后缺少逗号。 - Elen
@Elen：你没有提供能够重现代码的演示，所以我直接写了上面的代码，没有测试或修复打字错误。你能否将 $grid.triggerHandler( 替换为 $grid.bind( - 这是另一个打字错误，然后验证代码是否会在 jqGridInlineEditRow 上执行（在开始编辑时）？ - Oleg
是的，使用 bind 它可以正常工作...非常感谢！我是说你上面的代码中逗号缺失了..以防你想要编辑它... - Elen
@Elen：你说得对，最好修复代码中所有已知的问题。这样可以让其他人更容易阅读它。我已经做了。谢谢！ - Oleg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接