GridManager Angular 1.x

GridManager wrapper based on Angular 1.x for easy use in Angular.

Realize the function

function describe
Width adjustment Table column widths can be drag-and-drop adjusted
Position change The column position of the table is drag-and-drop adjusted
Configure the column Columns can be configured for show hide conversions
Suction top header In the case of a visible area of the table, the table header will always exist at the top
Column fixed Specifies that a column is fixed to the left or right
The sorting Tables are sorted individually or in groups
paging Table Ajax pagination, including the ability to select the total number of items displayed per page and jump to a specified page
User preference memory Remember user behavior, including user-adjusted column width, column order, column visual state, and number of columns per page
The serial number Automatically generate ordinal column
select all Automatically generate all selected columns
export Export static data, dynamic data, and selected data
print Current page print
Right-click menu Common functions can be quickly operated on the menu
filter Fast search results are achieved by filtering columns
merge Cells with the same value under the same column can be automatically merged
The tree form You can quickly configure the tree table structure
Line of mobile Row position movement can be quickly configured

API

This document is a native GridManager document, and angular-1. X version uses the same angular template except in columnData.text columndata.template topfullColumn.template.

  • API

Demo

This example is an example of the native GridManager. The angular-1. X version uses the same angular template except in columndata.text columndata.template topfullcolumn.template.

  • Simple example
  • Complex example

Core code

  • GridManager
  • jTool

ENV

ES2015 + webpack + angular 1.x + GridManager

The installation

npm install gridmanager-angular.1.x --save
Copy the code

Project reference

  • Es2015 import mode
import gridManager from 'gridmanager-angular-1.x';
Copy the code
  • Introduced by the script tag
<link rel="stylesheet" href=".. /node_modules/gridmanager-angular-1.x/css/gm-angular.css">
<script src=".. /node_modules/gridmanager-angular-1.x/js/gm-angular.js"></script>
Copy the code

The sample

<html>
    <head>
      <link rel="stylesheet" href="https://unpkg.com/gridmanager-angular-1.x/css/gm-angular.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
      <script src="https://unpkg.com/gridmanager-angular-1.x/js/gm-angular.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="AppController as vm">
      <grid-manager option="option" callback="callback(query)"></grid-manager>
    </body>
</html>
Copy the code
function AppController($window, $rootScope, $scope, $element, $gridManager){
    $scope.testClick = (row) = > {
        console.log('click', row);
    };

    // Constant: search criteria
    $scope.TYPE_MAP = {
        '1': 'HTML/CSS'.'2': 'nodeJS'.'3': 'javaScript'.'4': 'Chicken soup for the front'.'5': 'PM Coffee'.'6': 'Front frame'.'7': 'Front-end correlation'
    };

    $scope.searchForm = {
        title: ' '.info: ' '
    };

    /** * search for events */
    $scope.onSearch = (a)= > {
        console.log('onSearch');
        $gridManager.setQuery('testAngular', $scope.searchForm);
    };

    $scope.onReset = (a)= > {
        $scope.searchForm = {
            title: ' '.info: ' '
        };
    };

    // Table render callback function
    // query is the query configured in gmOptions
    $scope.callback = function(query) {
        console.log('callback => ', query);
    };

    $scope.option = {
        gridManagerName: 'testAngular'.width: '100%'.height: '100%'.supportAjaxPage:true.isCombSorting: true.disableCache: false.ajax_data: function () {
            return 'https://www.lovejavascript.com/blogManager/getBlogList';
        },
        ajax_type: 'POST'.columnData: [{key: 'pic'.remind: 'the pic'.width: '110px'.align: 'center'.text: 'Thumbnail'.// ng template
                template: ` < img style =" width: 90 px; margin:0 auto;" ng-src="https://www.lovejavascript.com/{{row.pic}}" alt="{{row.title}}"> `}, {key: 'title'.remind: 'the title'.align: 'left'.text: 'title'.sorting: ' '.// Use the function to return ng template
                template: function() {
                    return ' {{row. The title}} < / a > ';
                }
            },{
                key: 'type'.remind: 'the type'.text: 'Blog Category'.align: 'center'.width: '150px'.sorting: ' '.{key: value} overwrites the selected value as {key: value} in the query parameter. The will be investigating
                filter: {
                    // Filter criteria list, array object. Format: [{value: '1', text: 'HTML/CSS'}]. This parameter is mandatory when filter is used.
                    option: [
                        {value: '1'.text: 'HTML/CSS'},
                        {value: '2'.text: 'nodeJS'},
                        {value: '3'.text: 'javaScript'},
                        {value: '4'.text: 'Chicken soup for the front'},
                        {value: '5'.text: 'PM Coffee'},
                        {value: '6'.text: 'Front frame'},
                        {value: '7'.text: 'Front-end correlation'}].// Filter selected items, string, default ''. Optional. The selected filter condition overrides the Query
                    selected: '3'.// This parameter is optional. The default value is false. The will be investigating
                    isMultiple: true
                },
                // isShow: false,
                template: `<button type="button" ng-click="testClick(row)" ng-bind="TYPE_MAP[row.type]"></button>`}, {key: 'info'.remind: 'the info'.width: '300px'.text: 'introduction'}, {key: 'username'.remind: 'the username'.align: 'center'.width: '100px'.text: 'the writer'.// Use the function to return a DOM string
                template: ` {{row. The username}} < / a > `}, {key: 'createDate'.width: '130px'.text: 'Creation time'.sorting: 'DESC'.// Return htmlString using the function
                template: function(createDate, rowObject){
                    return new Date(createDate).toLocaleDateString();
                }
            },{
                key: 'lastDate'.width: '130px'.text: 'Last modified time'.sorting: ' '.// Return htmlString using the function
                template: function(lastDate, rowObject){
                    return new Date(lastDate).toLocaleDateString();
                }
            },{
                key: 'action'.remind: 'the action'.width: '100px'.align: 'center'.text: ' .// Return htmlString directly
                template: '}};@param row @param index */
    $scope.delectRowData = function(row, index) {
        if(window.confirm('Confirm to delete current page [${index}The article] ['${row.title}]? `)) {console.log('---- Delete operation started ----');
            $gridManager.refreshGrid('testAngular');
            // $element[0].querySelector('table[grid-manager="testAngular"]').GM('refreshGrid');
            console.log('It's normal that the data doesn't change, because this is just an example and doesn't actually delete the data.');
            console.log('---- Deletion completed ----'); }}; } AppController.inject = ['$window'.'$rootScope'.'$scope'.'$element'.'$gridManager'];

angular
	.module('myApp'['gridManager'])
	.controller('AppController', AppController);
Copy the code

Calling an open method

The following methods need to be used in an Angular environment where a gridManager instance already exists.

/ / refresh
$gridManager.refreshGrid('testAngular');

// Update the query criteria
$gridManager.setQuery('testAngular', {name: 'baukh'});

/ /... Other more please direct access to the [API] (http://gridmanager.lovejavascript.com/api/index.html)
Copy the code

Viewing the Current Version

import gridManager from 'gridmanager-angular-1.x';
console.log('GridManager', angular.module('gridManager').version);
Copy the code