我不知道angular-jqgrid，但是它的代码很简单，您可以直接将其插入代码中。我的旧答案中的代码执行的操作大致相同。我使用修改了它，colModel并只插入了一些其他的属性和选项，这些对您来说可能很有趣。

该演示使用了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" }
    ];
});