摘要：非必設(shè)項(xiàng)篩選條件列表數(shù)組對象。格式在使用時(shí)該參數(shù)為必設(shè)項(xiàng)。前端雞湯前端框架前端相關(guān)篩選選中項(xiàng)，字符串默認(rèn)為。非必設(shè)項(xiàng)，選中的過濾條件將會覆蓋否為多選布爾值默認(rèn)為。刷新更新查詢條件其它更多請直接訪問查看當(dāng)前版本

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

列表項(xiàng)目

寬度調(diào)整: 表格的列寬度可進(jìn)行拖拽式調(diào)整

位置更換: 表格的列位置進(jìn)行拖拽式調(diào)整

配置列: 可通過配置對列進(jìn)行顯示隱藏轉(zhuǎn)換

表頭吸頂: 在表存在可視區(qū)域的情況下,表頭將一直存在于頂部

排序: 表格單項(xiàng)排序或組合排序

分頁: 表格ajax分頁,包含選擇每頁顯示總條數(shù)和跳轉(zhuǎn)至指定頁功能

用戶偏好記憶: 記住用戶行為,含用戶調(diào)整的列寬、列順序、列可視狀態(tài)及每頁顯示條數(shù)

序號: 自動生成序號列

全選: 自動生成全選列

導(dǎo)出: 當(dāng)前頁數(shù)據(jù)下載,和僅針對已選中的表格下載

右鍵菜單: 常用功能在菜單中可進(jìn)行快捷操作

過濾: 通過對列進(jìn)行過濾達(dá)到快速搜索效果

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

API

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

簡單的示例

復(fù)雜的示例

GridManager

jTool

ES2015 + webpack + angular 1.x + GridManager

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

es2015引入方式

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

通過script標(biāo)簽引入

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": "前端相關(guān)"
    };

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

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

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

    // 表格渲染回調(diào)函數(shù)
    // 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: `
                                
                            `
            },{
                key: "title",
                remind: "the title",
                align: "left",
                text: "標(biāo)題",
                sorting: "",
                // 使用函數(shù)返回 ng template
                template: function() {
                    return "{{row.title}}";
                }
            },{
                key: "type",
                remind: "the type",
                text: "博文分類",
                align: "center",
                width: "150px",
                sorting: "",
                // 表頭篩選條件, 該值由用戶操作后會將選中的值以{key: value}的形式覆蓋至query參數(shù)內(nèi)。非必設(shè)項(xiàng)
                filter: {
                    // 篩選條件列表, 數(shù)組對象。格式: [{value: "1", text: "HTML/CSS"}],在使用filter時(shí)該參數(shù)為必設(shè)項(xiàng)。
                    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: "前端相關(guān)"}
                    ],
                    // 篩選選中項(xiàng)，字符串, 默認(rèn)為""。 非必設(shè)項(xiàng)，選中的過濾條件將會覆蓋query
                    selected: "3",
                    // 否為多選, 布爾值, 默認(rèn)為false。非必設(shè)項(xiàng)
                    isMultiple: true
                },
                // isShow: false,
                template: ``
            },{
                key: "info",
                remind: "the info",
                width: "300px",
                text: "簡介"
            },{
                key: "username",
                remind: "the username",
                align: "center",
                width: "100px",
                text: "作者",
                // 使用函數(shù)返回 dom string
                template: `{{row.username}}`
            },{
                key: "createDate",
                width: "130px",
                text: "創(chuàng)建時(shí)間",
                sorting: "DESC",
                // 使用函數(shù)返回 htmlString
                template: function(createDate, rowObject){
                    return new Date(createDate).toLocaleDateString();
                }
            },{
                key: "lastDate",
                width: "130px",
                text: "最后修改時(shí)間",
                sorting: "",
                // 使用函數(shù)返回 htmlString
                template: function(lastDate, rowObject){
                    return new Date(lastDate).toLocaleDateString();
                }
            },{
                key: "action",
                remind: "the action",
                width: "100px",
                align: "center",
                text: "操作",
                // 直接返回 htmlString
                template: "刪除"
            }
        ]
    };

    /**
     * 模擬刪除
     * @param row
     * @param index
     */
    $scope.delectRowData = function(row, index) {
        if(window.confirm(`確認(rèn)要?jiǎng)h除當(dāng)前頁第[${index}]條的["${row.title}]?`)){
            console.log("----刪除操作開始----");
            $gridManager.refreshGrid("testAngular");
            // $element[0].querySelector("table[grid-manager="testAngular"]").GM("refreshGrid");
            console.log("數(shù)據(jù)沒變是正常的, 因?yàn)檫@只是個(gè)示例,并不會真實(shí)刪除數(shù)據(jù).");
            console.log("----刪除操作完成----");
        }
    };
}
AppController.inject = ["$window", "$rootScope", "$scope", "$element", "$gridManager"];

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

以下方法需要在已經(jīng)存在gridManager實(shí)例的Angular環(huán)境下使用。

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