Question

我第一次为jqGrid工作。我想在我的应用程序中使用它的所有本机功能，如编辑，删除，调整，排序等等。

我遇到了这个project，这似乎是jqGrid的基本实现。这是一个很好的起点。但是，我在左侧寻呼机中显示添加，删除，搜索按钮时遇到问题。

我尝试将寻呼机设置为true，将其设置为div-id。尝试设置导航网格选项。尝试将.navGrid函数绑定到指令中的pager元素。

但左侧寻呼机根本不会出现。我有一个相关问题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,
    };
});

这就是我现在所拥有的一切。我的控制台显示没有错误，我认为我已经拥有所有需要的库。网格显示正常，但空白的左侧分页器除外。

我在配置对象中遗漏了什么。如何显示“添加删除”按钮。

感谢任何帮助。

Answer 1

我不知道angular-jqgrid，但它的代码很简单，您可以直接将其插入代码中。来自my old answer的代码大致相同。我使用您的*对其进行了修改，并插入了一些其他属性和选项，这对您来说很有意思。

The demo使用了3行

${self:provider.region}

致电colModel和$grid.jqGrid(newValue) .jqGrid("navGrid") .jqGrid("filterToolbar");。您可以轻松扩展代码以调用更多选项。

我插入了我在下面的演示中使用的代码：

navGrid

无法在以下jqGrid指令中看到左侧寻呼机

1 个答案: