Unable to see the left pager in the following jqGr

2019-01-29 06:44发布

站内文章 / 前沿技术
33 0 0

问题:

I am working for the jqGrid for the first time at all.I wanted to use it in my application with all its native features, like editing, deleting,a dding, sorting and all others.

I came across this project, which seems to be a basic implementation of jqGrid. It was a good starting point. However, I am having trouble displaying the Add, Delete, Search buttons in Left pager.

I have tried setting the pager to true, setting it to an div-id. Tried setting nav grid options. Tried binding the .navGrid function to the pager element in directive.

But the left pager won't show up at all. I have a related issue here.

below is the entire code I have apart from the above directive.

<!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,
    };
});

This is simply all I have for now. My console shows no error, and I think I pretty much have all needed libraries in place. The grid displays fine except for the blank left pager.

Am I missing something in configuration object. How can I make the Add Delete button to appear.

Any help is appreciated.

回答1:

I don't know angular-jqgrid, but it's code is simple and you can insert it in your code directly. The code from my old answer, does mostly the same. I modified it using your colModel and inserted just some additional properties and options, which can be interesting for you.

The demo used 3 lines

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

which call navGrid and filterToolbar. You can easy extend the code to call more options.

I insert the code, which I used in the demo below:

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" }
    ];
});


标签： angularjs jqgrid free-jqgrid
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~