GridManager Angular 1.x

GridManager — это библиотека для удобной работы с GridManager. Она основана на Angular 1.x.

Объединение с GridManager

С версии 3.0 эта библиотека объединена с GridManager.

Изображение

Информация о сборке

Версия npm

Количество загрузок npm

Покрытие кода

Реализация функций

Функция	Описание
Ширина регулировки	Возможность перетаскивания для изменения ширины столбцов таблицы.
Перемещение позиции	Возможность перетаскивания для перемещения столбцов таблицы.
Конфигурация столбца	Возможность настройки отображения столбцов.
Заголовок закреплён	Заголовок таблицы остаётся в верхней части, когда таблица находится в видимой области.
Фиксированный столбец	Возможность фиксации столбцов слева или справа.
Сортировка	Возможность сортировки отдельных элементов или групп элементов таблицы.
Разбиение на страницы	Поддержка разбиения таблицы на страницы с возможностью выбора количества элементов на странице и перехода на определённую страницу.
Предпочтения пользователя	Сохранение пользовательских настроек, таких как ширина столбцов, порядок столбцов, состояние видимости столбцов и количество элементов на странице.
Порядковый номер	Автоматическое создание столбца с порядковыми номерами.
Выбор всех элементов	Автоматическое создание столбца для выбора всех элементов.
Экспорт	Экспорт статических данных, динамических данных и выбранных данных.
Печать	Печать текущей страницы.
Меню правой кнопки мыши	Доступ к часто используемым функциям через контекстное меню.
Фильтр	Быстрый поиск по таблице с помощью фильтрации столбцов.
Объединение	Автоматическое объединение ячеек с одинаковыми значениями в одном столбце.
Таблица дерева	Быстрая реализация структуры таблицы дерева с помощью конфигурации.
Перемещение строк	Быстрая реализация перемещения строк с помощью конфигурации.

API

Документация относится к исходному GridManager, за исключением использования шаблонов Angular в columnData.text, columnData.template и topFullColumn.template. В остальном использование аналогично.

API

Демо

Демонстрационные примеры относятся к исходному GridManager, за исключением использования шаблонов Angular в columnData.text, columnData.template и topFullColumn.template. В остальном использование аналогично.

Простой пример: http://gridmanager.lovejavascript.com/demo/index.html.
Сложный пример: http://develop.lovejavascript.com/node_modules/gridmanager/demo/index.html.

Основной код

GridManager.
jTool.

ENV

ES2015 + webpack + angular 1.x + GridManager.

Установка

npm install gridmanager-angular-1.x --save

Ссылка в проекте

Импорт через ES2015

import gridManager from 'gridmanager-angular-1.x';

Ссылка через тег script

<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>

Пример

<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>

function AppController($window, $rootScope, $scope, $element, $gridManager){
    $scope.testClick = (row) => {
        console.log('click', row);
    };

    // 常量: 搜索条件
    $scope.TYPE_MAP = {
        '1': 'HTML/CSS',
        '2': 'nodeJS',
        '3': 'javaScript',
        '4': '前端鸡汤',
        '5': 'PM Coffee',
        '6': '前端框架',
        '7': '前端相关'
    };

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

    /**
     * 搜索事件
     */
    $scope.onSearch = () => {
        console.log('onSearch');
        $gridManager.setQuery('testAngular', $scope.searchForm);
    };

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

    // 表格渲染回调函数
    // query为gmOptions中配置的query
    $scope.callback = function(query) {
        console.log('callback => ', query);
    };

    $scope.option = {
        gridManagerName: 'testAngular',
        width: '100%',
        height: '100%',
        supportAjaxPage:true,
        isCombSorting: true,
        disableCache: false,
        ajaxData: function () {
            return 'https://www.lovejavascript.com/blogManager/getBlogList';
        },
        ajaxType: 'POST',

        columnData: [
            {
                key: 'pic',
                remind: 'the pic',
                width: '110px',

...

``` **Перевод текста запроса на русский язык:**

    align: 'center',
    text: '缩略图',
    // ng template
    template: `<a target="_blank" style="display:block; height:58.5px;" ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="点击阅读[{{row.title}}]">
                <img style="width:90px;margin:0 auto;" ng-src="https://www.lovejavascript.com/{{row.pic}}" alt="{{row.title}}">
            </a>`,
  }, {
    key: 'title',
    remind: 'the title',
    align: 'left',
    text: '标题',
    sorting: '',
    // 使用函数返回 ng template
    template: function() {
        return '<a class="plugin-action" target="_blank" ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="点击阅读[{{row.title}}]">{{row.title}}</a>';
    }
  }, {
    key: 'type',
    remind: 'the type',
    text: '博文分类',
    align: 'center',
    width: '150px',
    sorting: '',
    // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项
    filter: {
        // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
        option: [
            {value: '1', text: 'HTML/CSS'},
            {value: '2', text: 'nodeJS'},
            {value: '3', text: 'javaScript'},
            {value: '4', text: '前端鸡汤'},
            {value: '5', text: 'PM Coffee'},
            {value: '6', text: '前端框架'},
            {value: '7', text: '前端相关'}
        ],
        // 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆继query
        selected: '3',
        // 否为多选, 布尔值, 默认为false。非必设项
        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: '简介'
  }, {
    key: 'username',
    remind: 'the username',
    align: 'center',
    width: '100px',
    text: '作者',
    // 使用函数返回 dom string
    template: `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看{{row.username}}的github">{{row.username}}</a>`
  }, {
    key: 'createDate',
    width: '130px',
    text: '创建时间',
    sorting: 'DESC',
    // 使用函数返回 htmlString
    template: function(createDate, rowObject) {
        return new Date(createDate).toLocaleDateString();
    }
  }, {
    key: 'lastDate',
    width: '130px',
    text: '最后修改时间',
    sorting: '',
    // 使用函数返回 htmlString
    template: function(lastDate, rowObject){
        return new Date(lastDate).toLocaleDateString();
    }
  }, {
    key: 'action',
    remind: 'the action',
    width: '100px',
    align: 'center',
    text: '<span style="color: red">操作</span>',
    // 直接返回 htmlString
    template: '<span class="plugin-action" ng-click="delectRowData(row, index)">删除</span>'
  }
];

/**
 * 模拟删除
 * @param row
 * @param index
 */
$scope.delectRowData = function(row, index) {
    if (window.confirm(`确认要删除当前页第[${index}]条的['${row.title}]?`)) {
        console.log('----删除操作开始----');
        $gridManager.refreshGrid('testAngular');
        // $element[0].querySelector('table[grid-manager="testAngular"]').GM('refreshGrid');
        console.log('数据没变是正常的, 因为这只是个示例,并不会真实删除数据.'); ```
console.log('----удаление операции завершено----');
    }
};
}
AppController.inject = ['$window', '$rootScope', '$scope', '$element', '$gridManager'];

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

Вызов открытого метода

Через внедрение зависимостей внедрить $gridManager в Controller.

// Обновить
$gridManager.refreshGrid('testAngular');

// Изменить условия поиска
$gridManager.setQuery('testAngular', {name: 'baukh'});

// ...и многое другое, пожалуйста, посетите [API](http://gridmanager.lovejavascript.com/api/index.html) напрямую.

Просмотр текущей версии

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

OSCHINA-MIRROR/baukh-GridManager-Angular-1.x

GridManager Angular 1.x

Объединение с GridManager

Изображение

Информация о сборке

Версия npm

Количество загрузок npm

Покрытие кода

Реализация функций

API

Демо

Основной код

ENV

Установка

Ссылка в проекте

Импорт через ES2015

Ссылка через тег script

Пример

Вызов открытого метода

Просмотр текущей версии

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/baukh-GridManager-Angular-1.x .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

GridManager Angular 1.x

Объединение с GridManager

Изображение

Информация о сборке

Версия npm

Количество загрузок npm

Покрытие кода

Реализация функций

API

Демо

Основной код

ENV

Установка

Ссылка в проекте

Импорт через ES2015

Ссылка через тег script

Пример

Вызов открытого метода

Просмотр текущей версии

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/baukh-GridManager-Angular-1.x