Javascript JqGrid格式化程序按钮（操作）不可见

格式化按钮（添加、编辑、删除、按钮不可见）

JqGrid版本：4.4.4

复制以下脚本，然后从中修改：

我需要显示添加、编辑和删除按钮，如本演示中所示：

$（“#gridViewEditable”）.jqGrid({
数据：数据，
数据类型：“本地”，
cmTemplate:{sortable:false}，
colNames:['Actions'，“QuotationDetailID”，“QuotationID”，“ServiceID”，“ServiceDescription”，“Unit”，“Rate”，“折扣”，“Frequency”，“FrequencyBase”，“Total”]，
colModel：[
///
{
名称：'Actions'，索引：'Actions'，宽度：55，对齐：'center'，可排序：false，格式化程序：'Actions'，
格式选项：{
keys:true，//我们希望使用[Enter]键保存行，使用[Esc]键取消编辑。
onEdit：函数（rowid）{
警报（“在onEdit:rowid=“+rowid+”\n中，我们不需要返回任何内容”）；
},
onSuccess:函数（jqXHR）{
//该函数将用作editRow函数的“succesfunc”参数
//（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
警报（“在onSuccess中，仅用于远程编辑：”+
“\nResponsetText=“+jqXHR.responsetText+
“\n\n如果出现以下情况，我们可以验证服务器响应并返回false”+
“错误响应。返回true确认响应成功”）；
//我们可以验证服务器响应并将其解释为错误
//在这种情况下，我们应该返回false。在这种情况下，将调用onError
返回true；
},
onError：函数（rowid、jqXHR、textStatus）{
//该函数将用作editRow函数的“errorfunc”参数
//（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
//和存储行函数
//（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
警报（“在OneError中，仅用于远程编辑：”+
“\nResponsetText=“+jqXHR.responsetText+
“\n状态=“+jqXHR.status”+
“\n状态文本”+jqXHR.statusText+
“\n\n我们不需要返回任何内容”）；
},
afterSave:函数（rowid）{
警报（“在afterSave（Submit）：rowid=“+rowid+”\n我们不需要返回任何内容”）；
},
后还原：功能（rowid）{
警报（“在恢复后（取消）：rowid=“+rowid+”\n我们不需要返回任何内容”）；
},
删除选项：{
//因为我使用“本地”数据，所以我不想将更改发送到服务器
//因此，我使用“processing:true”设置并在onclickSubmit中手动删除该行
onclickSubmit：函数（rp_ge，rowid）{
//我们可以使用onclick提交功能作为“删除”按钮上的“onclick”
警报（“将删除rowid=“+rowid+”的行”）；
//可修改的重置处理
rp_ge.processing=真；
//删除行
grid.delRowData（rowid）；
$（“#delmod”+网格[0].id）.hide（）；
如果（网格[0].p.lastpage>1）{
//重新加载网格以使下一页的行可见。
//TODO:删除最后一页中数字较高的最后一行，即1
trigger（“reloadGrid”，[{page:grid[0].p.page}]）；
}
返回true；
},
处理：true/！！！这是“本地”编辑最重要的步骤
//跳过对服务器的ajax请求
}
}
},
///
{name:“QuotationDetailID”，隐藏：true}，
{name:“QuotationID”，隐藏：true}，
{name:“ServiceID”，隐藏：true}，
{name:“ServiceDescription”，宽度：150，可编辑：true}，
{name:“Unit”，宽度：75，可编辑：true}，
{name:“Rate”，宽度：75，可编辑：true}，
{name:“折扣”，宽度：75，可编辑：true}，
{name:“Frequency”，宽度：150，可编辑：true}，
{name:“FrequencyBase”，宽度：150，可编辑：true}，
{name:“Total”，宽度：150，可编辑：true}，
],
rowNum:10，
行列表：[5,10,20]，
寻呼机：“#gridViewEditablePager”，
gridview：没错，
行数：对，
ignoreCase：是的，
//sortname:“invdate”，
viewrecords：是的，
//巫师：“描述”，
标题：“报价服务”，
高度：“100%”，
editurl:'客户端阵列'，
ondblClickRow：函数（id、ri、ci）{
//编辑行并按“回车”键保存
jqGrid（'editRow'，id，true，null，null，'clientArray'）；
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.button.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>



$("#gridViewEditable").jqGrid({
            data: data,
            datatype: "local",
            cmTemplate: { sortable: false },
            colNames: ['Actions', "QuotationDetailID", "QuotationID", "ServiceID", "ServiceDescription", "Unit", "Rate", "Discount", "Frequency", "FrequencyBase", "Total"],
            colModel: [
                ///
                {
                    name: 'Actions', index: 'Actions', width: 55, align: 'center', sortable: false, formatter: 'actions',
                    formatoptions: {
                        keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                        onEdit: function (rowid) {
                            alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
                        },
                        onSuccess: function (jqXHR) {
                            // the function will be used as "succesfunc" parameter of editRow function
                            // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                            alert("in onSuccess used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\n\nWe can verify the server response and return false in case of" +
                                  " error response. return true confirm that the response is successful");
                            // we can verify the server response and interpret it do as an error
                            // in the case we should return false. In the case onError will be called
                            return true;
                        },
                        onError: function (rowid, jqXHR, textStatus) {
                            // the function will be used as "errorfunc" parameter of editRow function
                            // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                            // and saveRow function
                            // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
                            alert("in onError used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\nstatus=" + jqXHR.status +
                                  "\nstatusText" + jqXHR.statusText +
                                  "\n\nWe don't need return anything");
                        },
                        afterSave: function (rowid) {
                            alert("in afterSave (Submit): rowid=" + rowid + "\nWe don't need return anything");
                        },
                        afterRestore: function (rowid) {
                            alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
                        },
                        delOptions: {
                            // because I use "local" data I don't want to send the changes to the server
                            // so I use "processing:true" setting and delete the row manually in onclickSubmit
                            onclickSubmit: function (rp_ge, rowid) {
                                // we can use onclickSubmit function as "onclick" on "Delete" button
                                alert("The row with rowid=" + rowid + " will be deleted");

                                // reset processing which could be modified
                                rp_ge.processing = true;

                                // delete row
                                grid.delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();

                                if (grid[0].p.lastpage > 1) {
                                    // reload grid to make the row from the next page visable.
                                    // TODO: deleting the last row from the last page which number is higher as 1
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }

                                return true;
                            },
                            processing: true // !!! the most important step for the "local" editing
                            //     skip ajax request to the server
                        }
                    }
                },
                ///
                { name: "QuotationDetailID", hidden: true },
                { name: "QuotationID", hidden: true },
                { name: "ServiceID", hidden: true },
                { name: "ServiceDescription", width: 150, editable: true },
                { name: "Unit", width: 75, editable: true },
                { name: "Rate", width: 75, editable: true },
                { name: "Discount", width: 75, editable: true },
                { name: "Frequency", width: 150, editable: true },
                { name: "FrequencyBase", width: 150, editable: true },
                { name: "Total", width: 150, editable: true },
            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            pager: '#gridViewEditablePager',
            gridview: true,
            rownumbers: true,
            ignoreCase: true,
            //sortname: 'invdate',
            viewrecords: true,
            //sortorder: "desc",
            caption: "Quotation Services",
            height: "100%",
            editurl: 'clientArray',
            ondblClickRow: function (id, ri, ci) {
                // edit the row and save it on press "enter" key
                grid.jqGrid('editRow', id, true, null, null, 'clientArray');
            },
            onSelectRow: function (id) {
                if (id && id !== lastSel) {
                    // cancel editing of the previous selected row if it was in editing state.
                    // jqGrid hold intern savedRow array inside of jqGrid object,
                    // so it is safe to call restoreRow method with any id parameter
                    // if jqGrid not in editing state
                    if (typeof lastSel !== "undefined") {
                        grid.jqGrid('restoreRow', lastSel);
                    }
                    lastSel = id;
                }
            }
        }).jqGrid('navGrid', '#gridViewEditablePager', { add: false, edit: false }, {},{}, myDelOptions, { multipleSearch: true, overlay: false });

<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" />