2016-09-10 48 views
1

甲酸按鈕(添加,編輯,刪除按鈕不可見)jqGrid的格式按鈕(行爲)不可見

jqGrid的版本:jqgrid EditActionIconsColumn Events

:4.4.4

下面的腳本複製,然後從修改

我需要顯示添加,編輯,在這個演示中刪除如按鈕: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看起來像這樣 enter image description here

+0

我建議你不要使用復古版本4.4.4。它真的很老了(3.5年前發佈的更多),並且很久以來它不被支持。我建議你升級到[免費jqGrid](https://github.com/free-jqgrid/jqGrid)4.13.4。這是我開發的jqGrid的功能。它包含許多增強功能,例如'formatter:「actions」'。試試[演示](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm)和[這一個](http://www.ok-soft-gmbh.com/jqGrid/ OK/CustomActionButton1.htm)。有關更多詳細信息,請參見[答案](http://stackoverflow.com/a/29735149/315935)。 – Oleg

+0

@Oleg謝謝你,我正在等待你的回答,好的插件, –

+0

@Oleg我正打算在我的博客上用MVC在JqGrid上創建教程 –

回答

0

得到了解決 - 張貼回答我自己的問題,以幫助他人

改變的樣式錶鏈接

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

現在工作得很好。