表格组件 GridManager Angular 1.x

摘要：非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。前端鸡汤前端框架前端相关筛选选中项，字符串默认为。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本

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

列表项目

宽度调整: 表格的列宽度可进行拖拽式调整

位置更换: 表格的列位置进行拖拽式调整

配置列: 可通过配置对列进行显示隐藏转换

表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部

排序: 表格单项排序或组合排序

分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

序号: 自动生成序号列

全选: 自动生成全选列

导出: 当前页数据下载,和仅针对已选中的表格下载

右键菜单: 常用功能在菜单中可进行快捷操作

过滤: 通过对列进行过滤达到快速搜索效果

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

API

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

简单的示例

复杂的示例

GridManager

jTool

ES2015 + webpack + angular 1.x + GridManager

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

es2015引入方式

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

通过script标签引入

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: `
                                
                            `
            },{
                key: "title",
                remind: "the title",
                align: "left",
                text: "标题",
                sorting: "",
                // 使用函数返回 ng template
                template: function() {
                    return "{{row.title}}";
                }
            },{
                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: ``
            },{
                key: "info",
                remind: "the info",
                width: "300px",
                text: "简介"
            },{
                key: "username",
                remind: "the username",
                align: "center",
                width: "100px",
                text: "作者",
                // 使用函数返回 dom string
                template: `{{row.username}}`
            },{
                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: "操作",
                // 直接返回 htmlString
                template: "删除"
            }
        ]
    };

    /**
     * 模拟删除
     * @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);