Skip to content

Instantly share code, notes, and snippets.

@apskii

apskii/jqgrid-wiring-example.js

Last active August 29, 2015 13:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save apskii/9553168 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save apskii/9553168 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. apskii revised this gist Mar 14, 2014. 5 changed files with 63 additions and 54 deletions.
    8 changes: 0 additions & 8 deletions gensym.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +0,0 @@
    (function () {
    var counters = {};
    App.value('$gensym',
    function (name) {
    if (!counters[name]) counters[name] = 1;
    return name + counters[name]++;
    });
    })();
    5 changes: 0 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +0,0 @@
    <div jq-grid
    data-options="gridOptions"
    data-entries="entries"
    data-selected-entries="selectedEntries">
    </div>
    18 changes: 0 additions & 18 deletions jqgrid-example-ctrl
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +0,0 @@
    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 }
    ]
    };
    });
    64 changes: 63 additions & 1 deletion jqgrid.js → jqgrid-wiring-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,38 @@
    // 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: '=' },
    @@ -80,4 +115,31 @@ App.directive('jqGrid', function ($gensym) { return {
    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 }
    ]
    };
    });
    22 changes: 0 additions & 22 deletions utils.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +0,0 @@
    (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');
  2. apskii renamed this gist Mar 14, 2014. 1 changed file with 0 additions and 0 deletions.
    0 controllers.js → jqgrid-example-ctrl
    View file
    File renamed without changes.
  3. apskii created this gist Mar 14, 2014.
    18 changes: 18 additions & 0 deletions controllers.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    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 }
    ]
    };
    });
    8 changes: 8 additions & 0 deletions gensym.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    (function () {
    var counters = {};
    App.value('$gensym',
    function (name) {
    if (!counters[name]) counters[name] = 1;
    return name + counters[name]++;
    });
    })();
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div jq-grid
    data-options="gridOptions"
    data-entries="entries"
    data-selected-entries="selectedEntries">
    </div>
    83 changes: 83 additions & 0 deletions jqgrid.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    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');
    });
    }
    };});
    22 changes: 22 additions & 0 deletions utils.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    (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');