angular ui-grid 表格插件配置项

最新推荐文章于 2025-07-15 11:14:11 发布

原创最新推荐文章于 2025-07-15 11:14:11 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angular #表格控件

本文详细介绍了 AngularUI Grid 表格插件的常见配置选项，包括数据展示、排序、分页等功能设置方法，以及如何自定义选择行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular ui-grid 表格插件配置项
ui-grid是英文文档，我总结了一些常用配置项

$scope.gridOptions = {
     data:$scope.data//请求来的数据放入$scope.data中
     columnDefs:[
         {name:'',displayName:'',enableColumnMenu:false,width:,cellTemplate:"<div></div>"},
        {name:'sendMobile',displayName:'手机号',enableColumnMenu:false,width:100},
        ],
        enableSorting: true, //是否排序
        useExternalSorting: false, //是否使用自定义排序规则
        enableGridMenu: false, //是否显示grid 菜单
        showGridFooter: false, //是否显示grid footer
        enableHorizontalScrollbar :  0, //grid水平滚动条是否显示, 0-不显示  1-显示
        enableVerticalScrollbar : 0, //grid垂直滚动条是否显示, 0-不显示  1-显示

        //-------- 分页属性 ----------------
        enablePagination: true, //是否分页，默认为true
        enablePaginationControls: false, //使用默认的底部分页
        paginationPageSizes: [15, 30, 50, 100], //每页显示个数可选项
        paginationCurrentPage:1, //当前页码
        paginationPageSize: 15, //每页显示个数
        totalItems : 0, // 总数量
        useExternalPagination:true,//是否使用分页按钮

        //----------- 选中 ----------------------
        enableFooterTotalSelected: false, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true
        enableFullRowSelection : false, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中
        enableRowHeaderSelection : false, //是否显示选中checkbox框 ,默认为true
        enableRowSelection : true, // 行选择是否可用，默认为true;
        enableSelectAll : false, // 选择所有checkbox是否可用，默认为true;
        enableSelectionBatchEvent : true, //默认true
        isRowSelectable: function(row){ //GridRow
            if(row.entity.age > 45){
                row.grid.api.selection.selectRow(row.entity); // 选中行
            }
        },
        modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;
        multiSelect: false ,// 是否可以选择多个,默认为true;
        noUnselect: false,//默认false,选中后是否可以取消选中
        selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；