【问题标题】:Show save cancel icon on inlinenav in jqgrid在 jqgrid 中的 inlinenav 上显示保存取消图标
【发布时间】:2013-12-21 19:15:20
【问题描述】:

我已经实现了一个带有内联添加、编辑、删除的 jqgrid。当我添加新行时,新添加的行有一个编辑图标和一个取消图标,而保存图标在添加旁边的工具栏上。

有没有办法指定新添加的行有一个保存和取消图标而不是编辑图标?

我在这个链接上发现了同样的问题

here

但是找不到在哪里添加指定的函数。

这是我的代码

function BindGridView(columnNames, colModel) {
        colModel = [
                { index: 'Id', name: 'Id', align: 'center', 'hidden': true, editable: false },

                {
                    index: 'Value', name: 'Value', editable: true, editrules: { custom: true, custom_func: myvaluecheck },
                    sorttype: function (cell) { if (cell == 'Value') return '1'; }
                },
                 { index: 'Name', name: 'Name', align: 'center', editable: true, editrules: { custom: true, custom_func: CheckName } },
                {
                    name: 'myac', width: 80, fixed: true, sortable: false, resize: false,
                    formatter:  inlineNavAction(cellvalue, options, rowObject, (options.rowid != 'new_row')),
                    formatoptions: {
                        keys: true,
                        onEdit: null,
                        onSuccess: null,
                        onError: null,
                        afterSave: null,
                        afterRestore: null,
                        delOptions: {
                            onclickSubmit: function (rp_ge, rowid) {
                                var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
                                var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
                                Delete(celValue);
                                rp_ge.processing = true;
                                $("#dataList").delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();
                                if (grid[0].p.lastpage > 1) {
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }
                                return true;
                            },
                            processing: true
                        }
                    }
                }];
        var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
        var gridDataUrl = '@Url.Action("GetGridData", "Grid")';
        var grdurl = gridDataUrl + "?lookupId=" + guid();
        $("#dataList").jqGrid('GridUnload');
        jQuery("#dataList").jqGrid({
            formatter: {
                number: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' }
            },
            url: grdurl,
            datatype: "json",
            colNames: columnNames,
            colModel: colModel,
            autowidth: true,
            width: 'auto',
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30],
            scrolling: true,
            shrinktofit: true,
            pager: '#pager',
            sortname: 'Name',
            rownumbers: false,
            rownumWidth: 30,
            viewrecords: true,
            sortorder: "desc",
            multiselect: false,
            imgpath: gridimgpath,
            editurl: "/Grid/PerformCRUDAction",
            inlineData: {
                myParam: function () {
                    var selRowId = $("#dataList").jqGrid('getGridParam', 'selrow');
                    getActualRowData(selRowId);
                    var jsonOfLog = JSON.stringify(myKeyValuePairs);
                    return jsonOfLog;
                }
            },
            beforeShowForm: function (id) {
                alert("deleted");
            },
            onSelectRow: function (id) {
                if (id && id !== lastSel) {
                   // debugger;
                    $(this).jqGrid('restoreRow', lastSel);
                    $(this).jqGrid('editRow', id, true, null, null, null, {
                        myNextParam: function () {
                            alert("extraparam of 'editRow' is calling!!!");
                            return "Fine";
                        }
                    });
                    lastSel = id;
                }
            },

        }).navGrid("#pager",
    { refresh: false, add: false, edit: false, search: false, del: false },
        {}, // settings for edit
        {}, // settings for add
        {}, // settings for delete
        {} // Search options. Some options can be set on column level
 );
        //{ refresh: false, add: false, edit: false, del: false },
        $("#dataList").jqGrid('inlineNav', '#pager',
           {
               refresh: false,
               edit: false,
               add: true,
               del: false,
               search: false,
               //edittext: "Edit",
               //addtext: "Add",
               //save: false,
              // cancel: false,
               //addtext: "Add",
               //savetext: "Save",
               // canceltext: "Cancel",

               addicon: "ui-icon-plus"//,
           });

    }

    inlineNavAction = function(cellvalue, options, rowObject, isSavedRow){
        if(isSavedRow !== true){
            var rowid = options.rowId;
            var ocl = "id='jSaveButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'save'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
            var str = "<div title='"+$.jgrid.edit.bSubmit+"' style='float:left;' class='ui-pg-div ui-inline-save' "+ocl+"><span class='ui-icon ui-icon-disk'></span></div>";
            ocl = "id='jCancelButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'cancel'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
            str += "<div title='"+$.jgrid.edit.bCancel+"' style='float:left;margin-left:5px;' class='ui-pg-div ui-inline-cancel' "+ocl+"><span class='ui-icon ui-icon-cancel'></span></div>";
            return "<div style='margin-left:8px;'>" + str + "</div>";

        }else{
            return $.fn.fmatter.actions(cellvalue, options, rowObject);
        }   

    } 

当我点击“添加”时,新生成的行显示“编辑”和“删除”按钮,当我点击“编辑”时,按钮变为“保存”和“取消”。现在单击此取消(内联)新行消失,但添加按钮不可见。

【问题讨论】:

  • 该答案中定义的函数是 jqgrid 格式化函数。在您使用操作格式化程序的 colmodel 中,将其替换为 function(cellvalue, options, rowObject){return inlineNavAction(cellvalue, options, rowObject, (options.rowid != 'WhateverYouSetAsDefaultRowid'));}
  • 现在我的 colmodel 是这样的
  • 格式化程序:function(cellvalue,options,rowObject) {return inlineNavAction(cellvalue,options,rowObject,options.rowid!='new_row'));},
  • formatoptions:keys:true,onEdit:null,onSuccess:null,onError:null,afterSave:null,afterRestore:null,delOptions{onclickSubmit:function(rp_ge,rowid){var selRowId=$( '#dataList').jqGrid('getGridParam','selrow');var celValue=$('#dataList').jqGrid('getCell',selRowId,'Id');Delete(celValue);rp_ge.processing= true;$("#dataList").delRowData(rowid);$("#delmod"+grid[0].id).hide();if(grid[0].p.lastpage>1)grid.trigger ("reloadGrid",[{page:grid[0].p.page }]);}return true;},processing:true}}}
  • 和我在网格定义中定义的函数 inlinenavAction 但现在网格没有加载我做错的地方?

标签: jquery jqgrid jqgrid-formatter jqgrid-inlinenav


【解决方案1】:

改变这一行

formatter:  inlineNavAction(cellvalue, options, rowObject, (options.rowid != 'new_row')),

到

formatter:  function(cellvalue,options,rowObject) {
    return inlineNavAction(cellvalue,options,rowObject, (options.rowId!='new_row'));
 }

【讨论】:

  • 我每次都得到 isSavedRow 值 true,即使我点击添加按钮,OnSelectRow 事件它会找到 id 值,如果它是新行,那么它会显示“new_row”,所以从哪里可以我在添加期间传递了错误
  • 我已经调试了代码,发现首先调用了 inlinenavAction,然后调用了 OnSelectRow。那么点击添加按钮时,我可以从哪里设置 issaved false 的值
  • options.rowid 应该是 options.rowId,我更新了答案。 trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
  • 为什么不添加一些 console.log() 语句来查看选项和 rowObject 对于添加的行和已编辑的行有什么区别,然后您可以将其用于 isSavedRow 参数。此外,您应该将一列设置为具有 key:true
  • 好的,现在按钮显示为保存和取消,但他们的事件不起作用
猜你喜欢
  • 2013-10-17
  • 1970-01-01
  • 1970-01-01
  • 2013-03-20
  • 1970-01-01
  • 2014-05-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多