Question

var specificatonsData = [];

function initGridForTransactions(gridID, gridPagerID) {
    var grid_selector = gridID;
    var pager_selector = gridPagerID;

    $(window).on('resize.jqGrid', function () {
        $(grid_selector).jqGrid('setGridWidth', $("#page-wrapper").width());
    })

    var parent_column = $(grid_selector).closest('[class*="col-"]');
    $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
        if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
            setTimeout(function () {
                $(grid_selector).jqGrid('setGridWidth', parent_column.width());
            }, 0);
        }
    })

    $(grid_selector).jqGrid({
        data: specificatonsData,
        datatype: "local",
        colNames: ['Id','Specification', 'Abbreviation'],
        colModel: [
            { name: 'Id',  width: 80,key:true },
            { name: 'specification', index: 'Id', key: true, width: 300 },
            { name: 'abbreviation', width: 300 },
        ],
        cmTemplate: { editable: true },
        cellsubmit: 'clientArray',
        editurl: 'clientArray',
        viewrecords: true,
        rowNum: 4000,
        gridview: true,
        rowList: [4000],
        pager: pager_selector,
        altRows: true,
        loadonce: true,
        multiselect: false,
        multiboxonly: false,
        sortname: 'Specification',
        sortorder: "asc",
        cellEdit: false,
        iconSet: "fontAwesome",
        onSelectRow: function (rowId, status, e) {
            var dealerFeatures = $("#editor").text();
            var selectedFeature = rowId;
            selectedFeature = selectedFeature.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
            var pattern = new RegExp("(" + selectedFeature + ")", "gi");
            dealerFeatures = dealerFeatures.replace(pattern, "<mark>$1</mark>");
            //dealerFeatures = dealerFeatures.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1<mark>$2</mark>$4");
            dealerFeatures = dealerFeatures.replace(/(<mark>[<>]*)((<[>]+>)+)([<>]*<\/mark>)/, "$1<mark>$2</mark>$4");

            dealerFeatures = dealerFeatures.replace(/\n/g, '<br>\n');
            $("#editor").html(dealerFeatures);
        },
        gridComplete: function () {
            $(grid_selector).setColProp('Approve', { editoptions: { value: '' } });
        },
        loadComplete: function () {
            var table = this;
            setTimeout(function () {
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
    }).navGrid(pager_selector, { edit: true, add: true, del: false },
        {
            url: '/Activity/SaveSpecification',
            closeAfterAdd: true,
            closeAfterEdit: true,
            afterSubmit: function () {
                getAbbrData();
                return [true, '', ''];
            }
        });
    jQuery(grid_selector).sortableRows();

    function updatePagerIcons(table) {
        var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
        })
    }

    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({ container: 'body' });
        $(table).find('.ui-pg-div').tooltip({ container: 'body' });
    }

    $(document).one('ajaxloadstart.page', function (e) {
        $(grid_selector).jqGrid('GridUnload');
        $('.ui-jqdialog').remove();
    });
}

仅当我点击外部提交按钮时，我才会将数据保存到数据库。

当我点击编辑按钮时，数据显示在弹出窗口中，当我点击保存按钮时，数据将进入数据库并显示在jqgrid中。

但我有一个新的要求，我必须在点击保存按钮时在jqgrid中显示数据但不应保存到数据库。

提前致谢。

Answer 1

如果您使用Guriddo jqGrid JS，则可以将导航器中编辑选项中的网址设置为clientArray - 即

...navGrid(pager_selector, { edit: true, add: true, del: false },
    {
        url: 'clientArray',
        closeAfterAdd: true,
        closeAfterEdit: true,
        afterSubmit: function () {
            getAbbrData();
            return [true, '', ''];
        }
});

这将在本地保存数据。

Answer 2

您发布的代码包含许多小错误。例如，

您使用url: '/Activity/SaveSpecification'作为表单编辑选项（不适用于添加表单） - 请参阅navGrid来电。您应该删除使editurl: 'clientArray'正常工作的选项
您将key:true更多地用作一列。不允许这样做。只能在一个列中使用它，其中包含唯一值。
index: 'Id'列colModel中name: 'specification'属性的使用可能还有一个错误，可能会在列中进行错误的排序和过滤。
您当前的代码包含.setColProp('Approve', { ... });的来电，这是错误的，因为您的colModel不包含'Approve'列
选项sortname: 'Specification'也是错误的，因为sortname的值应该是来自name的{{1}}属性的值（例如，colModel，如果您要从列中删除sortname: 'specification'属性。）

此外，index: 'Id'的使用在大网格的情况下可能会大大降低网格的性能。如果实际行数约为4000，那么使用本地数据分页会更有效。显示器只允许显示大约20-25行。因此，建议您使用rowNum: 4000这么小的pager。用户可以使用分页按钮转到下一页。

editurl：'客户端数组'数据将在jqgrid中显示，但不应将该数据保存到数据库

2 个答案: