jqgrid-wiring-example.js

// utils.js
(function ($,sr) {
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced () {
            var obj = this, args = arguments;
            function delayed () {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    };
    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');

// gensym.js
(function () {
    var counters = {};
    App.value('$gensym',
        function (name) {
            if (!counters[name]) counters[name] = 1;
            return name + counters[name]++;
        });
})();

// jqgrid.js
App.directive('jqGrid', function ($gensym) { return {
    restrict: 'AE',
    scope: { options: '=', entries: '=', selectedEntries: '=' },
    link: function ($scope, $elem) {
        //--------------------------------------------------------------------------------------------------------------
        var grid  = $('<table id="' + $gensym('jqGrid') + '"></table>');
        var pager = $('<div id="' + $gensym('jqGridPager') + '"></div>');
        //--------------------------------------------------------------------------------------------------------------
        $elem.append(grid);
        $elem.append(pager);
        //--------------------------------------------------------------------------------------------------------------
        $scope.selectedEntries = [];
        //--------------------------------------------------------------------------------------------------------------
        var updateSelectedRows = function (id, selected) {
            $scope.$apply(function () {
                if (selected) {
                    var rowData = grid.jqGrid('getRowData', id);
                    rowData.id = rowData.id || id;
                    $scope.selectedEntries.push(rowData);
                } else {
                    $scope.selectedEntries =
                        $scope.selectedEntries.filter(function (row) {
                            return row.id != id;
                        });
                }
            });
        };
        //--------------------------------------------------------------------------------------------------------------
        grid.jqGrid($.extend({
            datatype: 'local',
            loadonce: false,
            data: $scope.entries,
            rowList: [10, 50, 100, 250],
            rowNum: 10,
            forceFit: true,
            pager: pager,
            pgbuttons: true,
            altRows: true,
            altclass: 'zebra',
            onSelectRow: updateSelectedRows,
            onSelectAll: function (rowIDs, isSelected) {
                if (isSelected) {
                    $scope.selectedEntries = $scope.selectedEntries.filter(function (row) {
                        return !rowIDs.find(row.id);
                    });
                }
                rowIDs.forEach(function (id) {
                    updateSelectedRows(id, isSelected);
                });
            },
            loadComplete: function () {
                // show/hide pager
                var itemsTotal = grid.jqGrid('getGridParam','records');
                var itemsPerPage = grid.jqGrid('getGridParam','rowNum');
                if (itemsTotal <= itemsPerPage)
                    pager.addClass('hide');
                else
                    pager.removeClass('hide');
                // persist selected rows with pagination
                $scope.selectedEntries.forEach(function (row) {
                    grid.jqGrid('setSelection', row.id, false);
                });
            }
        }, $scope.options));
        //--------------------------------------------------------------------------------------------------------------
        grid.jqGrid('navGrid', pager.get(0).id, {
            edit: false, add: false, del: false
        });
        //--------------------------------------------------------------------------------------------------------------
        if ($scope.options.autowidth != false) {
            var resizer = function() {
                grid.setGridWidth($elem.width() - 5);
            };
            $(window).smartresize(resizer);
            resizer();
        }
        //--------------------------------------------------------------------------------------------------------------
        $scope.$watch('entries', function (val) {
            grid.jqGrid('clearGridData');
            grid.jqGrid('setGridParam', { data: val }).trigger('reloadGrid');
        });
    }
};});

// index.html
    <div jq-grid
         data-options="gridOptions"
         data-entries="entries"
         data-selected-entries="selectedEntries">
    </div>

// app.js
App.controller('MainCtrl', function ($scope) {
    $scope.entries = [
        { name: "A", surname: "Psk", phone: "1122334", group: "D" },
        { name: "I", surname: "Sc", phone: "3344556", group: "Y" }
    ];
    $scope.selectedEntries = [];
    $scope.gridOptions = {
        cellEdit: true,
        cellsubmit: 'clientArray',
        colNames: [ 'Name*', 'Surname', 'Phone*', 'Group' ],
        colModel: [
            { name: 'name', index: 'name', editable: true, editrules: { required: true } },
            { name: 'surname', index: 'surname', editable: true },
            { name: 'phone', index: 'phone', editable: true, editrules: { required: true } },
            { name: 'group', index: 'group', editable: true }
        ]
    };
});