다음 jqGrid 지시문에서 왼쪽 호출기를 볼 수 없습니다.

저는 처음으로 jqGrid에서 작업하고 있습니다. 편집, 삭제, dding, 정렬과 같은 모든 고유 기능을 사용하여 응용 프로그램에서 사용하고 싶었습니다. 그리고 다른 모든 것들.다음 jqGrid 지시문에서 왼쪽 호출기를 볼 수 없습니다.

나는이 project을 발견했으며, 이것은 jqGrid의 기본 구현 인 것으로 보인다. 좋은 출발점이었습니다. 그러나 왼쪽의 호출기에 Add, Delete, Search 단추를 표시하는 데 문제가 있습니다.

페이저를 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 개 라인과

navGrid filterToolbar 전화

$grid.jqGrid(newValue) 
    .jqGrid("navGrid") 
    .jqGrid("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 : ** 최신 4.14.0 버전의 [free jqGrid] (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) 또는 [메이븐 센트럴] (http://search.maven.org/#search%7Cga%7C1%7Cfree-jqgrid). – Oleg

감사합니다. 버전을 업데이트하면 문제가 해결됩니다. 또한 제 호출기에서 몇 개의 아이콘을 제거 할 수 있습니까? 예를 들어 왼쪽 페이저에 Add 아이콘 만 있으면됩니다. 검색, 새로 고침 및 아이콘 편집을 제거하려면 어떻게해야합니까? –

다음 jqGrid 지시문에서 왼쪽 호출기를 볼 수 없습니다.

답변

관련 문제