2016-09-10 3 views
1

Format Tasten (hinzufügen, bearbeiten, löschen, Tasten nicht sichtbar)JqGrid Formatierer Taste (Aktionen) nicht sichtbar

JqGrid Version: 4.4.4

folgende Skript kopiert und dann modifiziert aus: jqgrid EditActionIconsColumn Events

ich brauche zeigen hinzufügen, bearbeiten, löschen Schaltflächen wie in diesem Beispiel: 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 }); 

meine jqGrid wie folgt aussieht enter image description here

+0

Ich würde Ihnen empfehlen, nicht Retro-Version 4.4.4 zu verwenden. Es ist wirklich sehr, sehr alt (vor mehr als 3,5 Jahren veröffentlicht) und es wird seit langer Zeit nicht mehr unterstützt. Ich würde Ihnen empfehlen, auf [free jqGrid] zu aktualisieren (https://github.com/free-jqgrid/jqGrid) 4.13.4. Es ist das von jqGrid, das ich entwickle. Es enthält viele Erweiterungen, zum Beispiel in 'formatter:" actions "'. Probiere [die Demo] (http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm) und [diese] (http://www.ok-soft-gmbh.com/jqGrid/ OK/CustomActionButton1.htm). Weitere Informationen finden Sie in der [Antwort] (http://stackoverflow.com/a/29735149/315935). – Oleg

+0

@Oleg Danke Mann, ich warte auf deine Antwort, nettes Plugin, –

+0

@Oleg Ich plane, Tutorial auf JqGrid mit MVC in meinem Blog zu erstellen –

Antwort

0

Haben Sie die Lösung - Antwort auf meine eigene Frage Entsendung andere

veränderten Stylesheet Link

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

mit

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

Es funktioniert gut, jetzt zu helfen.

Verwandte Themen