Angular 1.x表格組件 GridManage-Angular 1.x

時間 2019-11-10

標籤 angular 1.x 表格組件 gridmanage 欄目 AngularJS 简体版

原文原文鏈接

GridManager Angular 1.x

基於 Angular 1.x 的 GridManager 封裝, 用於便捷的在 Angular 中使用GridManager.

列表項目javascript

實現功能

寬度調整: 表格的列寬度可進行拖拽式調整
位置更換: 表格的列位置進行拖拽式調整
配置列: 可經過配置對列進行顯示隱藏轉換
表頭吸頂: 在表存在可視區域的狀況下,表頭將一直存在於頂部
排序: 表格單項排序或組合排序
分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
用戶偏好記憶: 記住用戶行爲,含用戶調整的列寬、列順序、列可視狀態及每頁顯示條數
序號: 自動生成序號列
全選: 自動生成全選列
導出: 當前頁數據下載,和僅針對已選中的表格下載
右鍵菜單: 經常使用功能在菜單中可進行快捷操做
過濾: 經過對列進行過濾達到快速搜索效果

API

該文檔爲原生GridManager的文檔，angular-1.x版本除了在 columnData.text columnData.template topFullColumn.template中能夠使用angular模版外，其它使用方式相同。

Demo

該示例爲原生GridManager的示例，angular-1.x版本除了在 columnData.text columnData.template topFullColumn.template中能夠使用angular模版外，其它使用方式相同。

Core code

ENV

ES2015 + webpack + angular 1.x + GridManagercss

安裝

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,
        ajax_data: function () {
            return 'https://www.lovejavascript.com/blogManager/getBlogList';
        },
        ajax_type: '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實例的Angular環境下使用。

// 刷新
$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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。