Question

我在内联模式下使用Gijgo网格，并使用渲染来显示/更新每行的编辑图标，如下所示。

            var EditRenderer = function (value, record, $cell, $displayEl, id) {
               var ThisLine = Object.values(record)
               if (value == true || ThisLine.includes("Totals")){
                  null
               }
               else
               {
                   var $editBtn = $('<p class="glyphicon glyphicon-pencil gj-cursor-pointer" data-key="' + id + '"></p>'),
                   $updateBtn = $('<p class="glyphicon glyphicon-save gj-cursor-pointer" data-key="' + id + '"></p>').hide();
                   $editBtn.on('click', function (e) {
                   grid.edit($(this).data('key'));
                   $editBtn.hide();
                   $updateBtn.show();
                });
                $updateBtn.on('click', function (e) {
                   grid.update($(this).data('key'));
                   $editBtn.show();
                   $updateBtn.hide();
                });
            }
            $displayEl.append($editBtn).append($updateBtn);

我正在动态生成列，但底部会添加到网格中，如下所示。

   GridColumns.push({ field: 'JobClossedForEdit', title: '', width: 35, align: 'center',  renderer: EditRenderer })
   GridColumns.push({ field: 'JobClossedForEdit', title: '', width: 35, align: 'center',  renderer: DeleteRenderer })

我的网格设置如下：

        grid = $('#grid').grid({
            dataSource: '/TimeSheets/IndexGetGrid?UserId=' + @Html.Raw(Json.Encode(ViewBag.UserId)) + "&sortOrder=" + @Html.Raw(Json.Encode(ViewBag.JobNumberSortParm))  + "&monthFilter=" + @Html.Raw(Json.Encode(ViewBag.monthFilter(2))) + "&yearFilter=" + @Html.Raw(Json.Encode(ViewBag.yearFilter(2))),
            uiLibrary: 'bootstrap',
            primaryKey: 'Id',
            iconsLibrary: 'glyphicons', //fontawesome
            inlineEditing: { mode: 'command', managementColumn: false },
            columns: GridColumns,
        });

单击保存底部时，下面会运行。

         grid.on('rowDataChanged', function (e, id, record) {
            var data = $.extend(true, {}, record);
            $.ajax({ url: '/TimeSheets/IndexSaveGrid', data: { record: data }, method: 'POST' })
                .fail(function () {
                    alert('Failed to save.');
                });
            grid.reload();
        });

所以问题是当grid.reload()被触发时，$displayEl.append($editBtn).append($updateBtn);会运行，向网格添加第二组编辑图标。

我已经尝试过我所知道的一切（知识非常有限!!），例如隐藏/删除/销毁.append之前涉及的所有元素，没有运气，我有点卡住了！

欢迎任何帮助/指示谢谢，理查德。

Answer 1

听起来很简单..最后我在grid.clear();之前添加了grid.reload();。不喜欢它作为解决方案，因为我不认为这是必要的，但它有效......

完整代码;

    grid.on('rowDataChanged', function (e, id, record) {
        var data = $.extend(true, {}, record);
        $.ajax({ url: '/TimeSheets/IndexSaveGrid', data: { record: data }, method: 'POST' })
            .fail(function () {
                alert('Failed to save.');
            });
        grid.clear(); <-----Addded------
        grid.reload();
    });

Gijgo diplicate在网格重新加载的被回报的象

1 个答案: