javascript - JqG​​rid 格式化程序按钮(操作)不可见

Question

格式化按钮(添加、编辑、删除、按钮不可见)

JqGrid版本:4.4.4

以下脚本被复制并修改:jqgrid EditActionIconsColumn Events

我需要显示添加、编辑、删除按钮，如本演示所示:http://www.ok-soft-gmbh.com/jqGrid/ActionButtons.htm

<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 });

我的 JqGrid 看起来像这样

Answer 1

找到了解决方案 - 发布我自己问题的答案以帮助其他人

更改样式表链接

<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" />

现在工作正常。