無法在以下jqGrid指令中看到左側尋呼機

我正在爲jqGrid第一次工作。我想在我的應用程序中使用它的所有原生功能，如編輯，刪除，dding，排序和其他所有人。無法在以下jqGrid指令中看到左側尋呼機

我碰到這個project，這似乎是jqGrid的基本實現。這是一個很好的起點。但是，我無法在左側尋呼機中顯示添加，刪除，搜索按鈕。

我曾嘗試將傳呼機設置爲true，並將其設置爲div-id。嘗試設置導航網格選項。嘗試將.navGrid函數綁定到指令中的分頁元素。

但是，左側的尋呼機根本不會顯示出來。我有一個相關問題here。

下面是我除了上述指令以外的整個代碼。

<!Doctype html> 
<html ng-app="poc"> 
<head> 
    <link rel="stylesheet" href="jquery-ui.css" /> 
    <link rel="stylesheet" href="ui.jqgrid.min.css" /> 
    <!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">--> 

    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript" src="jquery.jqgrid.min.js"></script> 
    <script type="text/javascript" src="angular-jqgrid.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body ng-controller="ctrl"> 
    <jq-grid dataset="myData" options="myGridOptions"></jq-grid> 
    <div id="pager"></div> 
</body> 
</html> 


angular.module("poc", ['angular-jqgrid']); 
angular.module("poc").controller('ctrl', function ($scope) { 
    $scope.myData = [{ "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" }, { "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null }, { "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" }, { "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" }, { "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null }, { "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" }, { "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" }, { "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" }, { "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" }, { "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null }, { "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" }, { "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" }, { "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null }, { "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null }, { "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" }, { "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" }, { "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null }, { "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null }, { "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" }, { "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" }]; 
    $scope.myGridOptions = { 
     colNames: ["OrderID", "Customer ID", "Order Date", "Freight", "Ship Name",], 
     colModel:[ 
        { label: 'OrderID', name: 'OrderID', key: true, width: 75 }, 
        { label: 'Customer ID', name: 'CustomerID', width: 50 }, 
        { label: 'Order Date', name: 'OrderDate', width: 150 }, 
        { label: 'Freight', name: 'Freight', width: 150 }, 
        { label:'Ship Name', name: 'ShipName', width: 150 } 
     ], 
    cmTemplate: { autoResizable: true, editable: true }, 
    hoverrows: true, 
    rowNum: 20, 
    autoResizing: { compact: true }, 
    rowList: [5, 10, 20, "10000:All"], 
    viewrecords: true, 
    sortable: true, 
    pager: true, 
     pgbuttons : true, 
    pagerRightWidth: 150, 
    sortname: "OrderID", 
    sortorder: "desc", 
    formEditing: { 
     width: 310, 
     closeOnEscape: true, 
     closeAfterEdit: true, 
     savekey: [true, 13] 
    }, 
    formViewing: { 
     labelswidth: "80%" 
    }, 
    navOptions: { 
     view: true, 
    }, 
    singleSelectClickMode: "selectonly", // optional setting 
    ondblClickRow: function (rowid) { 
     $(this).jqGrid("editGridRow", rowid); 
    }, 
    caption: "Angular Implementation of jqGrid", 
     width: 1280, 
     height: 450, 
    }; 
});

這簡直就是我現在所擁有的一切。我的控制檯顯示沒有錯誤，並且我認爲我已經擁有了所有需要的庫。網格顯示正常，除了空白的左分頁器。

我在配置對象中丟失了什麼。我如何使添加刪除按鈕出現。

任何幫助表示讚賞。

來源

2017-03-05 Saurabh Tiwari

我不知道angular-jqgrid，但它的代碼很簡單，你可以直接插入你的代碼。代碼從my old answer，大致相同。我使用你的colModel修改了它，並插入了一些額外的屬性和選項，這些對你而言可能很有趣。

The demo使用3條線

$grid.jqGrid(newValue) 
    .jqGrid("navGrid") 
    .jqGrid("filterToolbar");

哪個呼叫navGrid和filterToolbar。您可以輕鬆擴展代碼以調用更多選項。

我插入代碼，這是我在下面的演示中使用：

var initDatepicker = function (elem) { 
     var self = this; 
     $(elem).datepicker({ 
      minDate: new Date(1995, 1 - 1, 1), 
      defaultDate: new Date(1996, 6, 15), 
      onSelect: function() { 
       setTimeout(function() { 
        self.triggerToolbar(); 
       }, 0); 
      }, 
      dateFormat: "dd-M-yy", 
      autoSize: true, 
      changeYear: true, 
      changeMonth: true, 
      showButtonPanel: true, 
      showWeek: true 
     }); 
    }; 
var myApp = angular.module("myApp", []); 

myApp.directive("ngJqGrid", function ($compile) { 
    return { 
     restrict: "E", 
     scope: { 
      config: "=", 
      data: "=" 
     }, 
     link: function (scope, element, attrs) { 
      var $grid; 

      scope.$watch("config", function (newValue) { 

       element.children().empty(); 
       $grid = angular.element("<table></table>"); 
       element.append($compile($grid)(scope)); 

       element.append($grid); 
       angular.extend(newValue, { 
        loadComplete: function() { 
         $compile(this)(scope); 
        }, 
        autoencode: true, 
        iconSet: "fontAwesome" 
       }); 

       $grid.jqGrid(newValue) 
        .jqGrid("navGrid") 
        .jqGrid("filterToolbar"); 
      }); 
      scope.$watch("data", function (newValue, oldValue) { 
       var p = $grid.jqGrid("getGridParam"); 
       p.data = newValue; 
       $grid.jqGrid("destroyFilterToolbar"); 
       $grid.trigger("reloadGrid"); 
       $grid.jqGrid("filterToolbar"); 
      }); 
     } 
    }; 
}); 

myApp.controller("MyController", function ($scope) { 
    $scope.config = { 
     colModel:[ 
      { label: 'OrderID', name: 'OrderID', key: true, width: 75, sorttype: "integer" }, 
      { label: 'Customer ID', name: 'CustomerID', width: 90, stype: "select", 
       searchoptions: { 
        clearSearch: true, 
        sopt: ["eq", "ne"], 
        generateValue: true, 
        noFilterText: "Any" 
       }}, 
      { label: 'Order Date', name: 'OrderDate', width: 125, 
       autoResizing: { minColWidth: 90 }, 
       align: "center", sorttype: "date", 
       formatter: "date", formatoptions: { newformat: "d-M-Y" }, 
       editoptions: { dataInit: initDatepicker }, 
       searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } }, 
      { label: 'Freight', name: 'Freight', template: "number", width: 70, 
       autoResizing: { minColWidth: 65 },}, 
      { label: 'Ship Name', name: 'ShipName', width: 180, 
       createColumnIndex: true, 
       searchoptions: { 
        dataInit: function (elem, options) { 
         $(elem).autocomplete({ 
          source: $(this).jqGrid("getUniqueValueFromColumnIndex", "ShipName"), 
          delay: 0, 
          minLength: 0 
         }); 
        }, 
        sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ], 
        clearSearch: true 
       }} 
     ], 
     cmTemplate: { autoResizable: true, editable: true }, 
     hoverrows: true, 
     rowNum: 20, 
     pagerRightWidth: 105, 
     autoResizing: { compact: true }, 
     rowList: [5, 10, 20, "10000:All"], 
     viewrecords: true, 
     sortable: true, 
     pager: true, 
     sortname: "OrderID", 
     sortorder: "desc", 
     formEditing: { 
      width: 310, 
      closeOnEscape: true, 
      closeAfterEdit: true, 
      savekey: [true, 13] 
     }, 
     formViewing: { 
      labelswidth: "80%" 
     }, 
     navOptions: { 
      view: true, 
     }, 
     singleSelectClickMode: "selectonly", // optional setting 
     ondblClickRow: function (rowid) { 
      $(this).jqGrid("editGridRow", rowid); 
     }, 
     caption: "Angular Implementation of jqGrid"//, 
     //width: 1280, 
     //height: 450 
    }; 
    $scope.data = [ 
     { "OrderID": "10248", "CustomerID": "WILMK", "OrderDate": "1996-07-04 00:00:00", "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier" }, 
     { "OrderID": "10249", "CustomerID": "TRADH", "OrderDate": "1996-07-05 00:00:00", "Freight": "11.6100", "ShipName": null }, 
     { "OrderID": "10250", "CustomerID": "HANAR", "OrderDate": "1996-07-08 00:00:00", "Freight": "65.8300", "ShipName": "Hanari Carnes" }, 
     { "OrderID": "10251", "CustomerID": "VICTE", "OrderDate": "1996-07-08 00:00:00", "Freight": "41.3400", "ShipName": "Victuailles en stock" }, 
     { "OrderID": "10252", "CustomerID": "SUPRD", "OrderDate": "1996-07-09 00:00:00", "Freight": "51.3000", "ShipName": null }, 
     { "OrderID": "10253", "CustomerID": "HANAR", "OrderDate": "1996-07-10 00:00:00", "Freight": "58.1700", "ShipName": "Hanari Carnes" }, 
     { "OrderID": "10254", "CustomerID": "CHOPS", "OrderDate": "1996-07-11 00:00:00", "Freight": "22.9800", "ShipName": "Chop-suey Chinese" }, 
     { "OrderID": "10255", "CustomerID": "RICSU", "OrderDate": "1996-07-12 00:00:00", "Freight": "148.3300", "ShipName": "Richter Supermarkt" }, 
     { "OrderID": "10256", "CustomerID": "WELLI", "OrderDate": "1996-07-15 00:00:00", "Freight": "13.9700", "ShipName": "Wellington Importadora" }, 
     { "OrderID": "10257", "CustomerID": "HILAA", "OrderDate": "1996-07-16 00:00:00", "Freight": "81.9100", "ShipName": null }, 
     { "OrderID": "10258", "CustomerID": "ERNSH", "OrderDate": "1996-07-17 00:00:00", "Freight": "140.5100", "ShipName": "Ernst Handel" }, 
     { "OrderID": "10259", "CustomerID": "CENTC", "OrderDate": "1996-07-18 00:00:00", "Freight": "3.2500", "ShipName": "Centro comercial Moctezuma" }, 
     { "OrderID": "10260", "CustomerID": "OLDWO", "OrderDate": "1996-07-19 00:00:00", "Freight": "55.0900", "ShipName": null }, 
     { "OrderID": "10261", "CustomerID": "QUEDE", "OrderDate": "1996-07-19 00:00:00", "Freight": "3.0500", "ShipName": null }, 
     { "OrderID": "10262", "CustomerID": "RATTC", "OrderDate": "1996-07-22 00:00:00", "Freight": "48.2900", "ShipName": "Rattlesnake Canyon Grocery" }, 
     { "OrderID": "10263", "CustomerID": "ERNSH", "OrderDate": "1996-07-23 00:00:00", "Freight": "146.0600", "ShipName": "Ernst Handel" }, 
     { "OrderID": "10264", "CustomerID": "FOLKO", "OrderDate": "1996-07-24 00:00:00", "Freight": "3.6700", "ShipName": null }, 
     { "OrderID": "10265", "CustomerID": "BLONP", "OrderDate": "1996-07-25 00:00:00", "Freight": "55.2800", "ShipName": null }, 
     { "OrderID": "10266", "CustomerID": "WARTH", "OrderDate": "1996-07-26 00:00:00", "Freight": "25.7300", "ShipName": "Wartian Herkku" }, 
     { "OrderID": "10267", "CustomerID": "FRANK", "OrderDate": "1996-07-29 00:00:00", "Freight": "208.5800", "ShipName": "Frankenversand" } 
    ]; 
});

來源

2017-03-05 22:48:30 Oleg

這工作不錯。但是，即使在使用完整的代碼和配置後，我也無法獲取每個頭下的過濾器框。相反，我不斷收到'jqGrid - 沒有這樣的方法：getUniqueValueFromColumnIndex'這個錯誤在控制檯（angular.js中的某處） –

@SaurabhTiwari：你應該驗證你使用** [free jqGrid]的最新4.14.0版本（https： //github.com/free-jqgrid/jqGrid)**。你可以從CDN加載它（參見[wiki文章]（https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs）），從[npm]得到（ https://www.npmjs.com/package/free-jqgrid），[NuGet]（https://www.nuget.org/packages/free-jqGrid/），[bower]（https://bower.io/search /？q = free-jqgrid）或[Maven Central]（http://search.maven.org/#search%7Cga%7C1%7Cfree-jqgrid）。 – Oleg

謝謝..更新版本解決了這個問題。你能否也請指導我如何從我的傳呼機上刪除少量圖標。例如，我只需要左側分頁器上的添加圖標。我如何刪除搜索，刷新和編輯圖標 –

無法在以下jqGrid指令中看到左側尋呼機

回答

相關問題