ui-grid应用（调整了表格行高）+指定列模糊查询+联动搜索

最近在应用ng-grid升级版的ui-grid,就顺便记录了这篇文章；

angular1.3.2+bootstrap3.X

直接上代码

view:

<div ng-controller="listCtrl">
    <!-- <div class="text-left wrapper-md" style="padding-top: 0; padding-bottom: 0;" class="row">
        <a href class="btn btn-mb btn-primary padder-mb m-b-sm btn-addon" ui-sref="app.message.add()"><i class="fa fa-plus"></i>创建通知</a>
        <a href class="btn btn-mb btn-danger padder-mb m-b-sm btn-addon" ng-click="delSelData()" style="margin-left:1%;"><i class="fa fa-times"></i>删除通知</a>
    </div> -->
    <div class="wrapper-md">
      <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row form-group" style="margin-top:15px;">


                <div class="col-md-9">
                    <form class="form-inline">
                        <label class="control-label normal">省:</label>
                        <select class="form-control normal" ng-model="province.id" ng-options="a.id as a.name for a in provinces" ng-change="active()"></select>
                        <span ng-show="isCity">
                            <label class="control-label normal">市:</label>
                            <select class="form-control normal" ng-model="city.id" ng-options="a.id as a.name for a in citys" ng-change="active()"></select>
                        </span>
                        <span  ng-show="isArea">
                            <label class="control-label normal">区:</label>
                            <select class="form-control normal" ng-model="area.id" ng-options="a.id as a.name for a in areas" ng-change="active()"></select>
                        </span>
                        <span ng-show="isBranche">
                            <label class="control-label normal">网点:</label>
                            <select class="form-control normal" ng-model="branche.id" ng-options="a.id as a.name for a in branches"></select>
                        </span>
                        <label class="control-label normal">设备:</label>
                        <select class="form-control normal" ng-model="equipment.id" ng-options="a.id as a.name for a in equipments"></select>
                    </form>
                </div>


                <div class="col-md-2 input-group">
                    <input type="text" ng-model="filterValue" placeholder="请输入查询关键字..." class="form-control"/>
                    <div class="input-group-btn">
                        <button ng-click='filter()' class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </div> 
                </div>


            </div>
        </div>
        <div class="table-responsive">
            <div  ui-grid="gridOptions" class="gridStyle"
                ui-grid-pagination
                ui-grid-selection  
                ui-grid-resize-columns 
                ui-grid-auto-resize >
            </div>
            <!-- <div ng-grid="gridOptions" class="gridStyle"></div> -->
        </div>
      </div>
      
    </div>


    <div class="wrapper-md" >
        <form  name="form" class="form-horizontal ">  
            <div class="form-group">
                <label class="control-label col-sm-2 m-n">收件人：</label>
                <div class="col-sm-9">
                    <input class="form-control"  readonly>
                </div>
            </div>
        </form>
        <form  name="form" class="form-horizontal" style="padding:20px 0;"> 
            <div class="form-group"> 
                <label class="control-label col-sm-2 m-n">创建通告信息：</label>
                <div class="col-sm-9">
                    <textarea name="msgContent" cols="30" rows="10" class="form-control" required placeholder="请输入通告内容（少于300字）" ng-model="item.msgContent" ng-maxlength="300"></textarea>
                    <span ng-show="form.msgContent.$error.maxlength" class="formTiShi">
                        超出限制字数
                    </span>
                </div>
            </div>
             <div class="line line-dashed b-b line-lg pull-in" style="visibility:hidden;"></div>
            <div class="text-center">
                <a class="btn btn-primary" ng-click="onSend()" type="submit" ng-disabled='form.$invalid'>发送</a>
            </div>
        </form>
    </div>
    
</div>

controller:

app.controller('listCtrl',['$scope','$http','$state','$stateParams','i18nService' ,function ($scope, $http, $state, $stateParams,i18nService) {
    $scope.province = {
        id: "-1"
    };
    $scope.city = {
        id: "-1"
    };
     $scope.area = {
        id: "-1"
    };
    $scope.branche = {
        id: "-1"
    };
     $scope.equipment = {
        id: "-1"
    };
    
    $scope.provinces = [
        {id: "-1", name: "全部"},
        {id: "1", name: "浙江"},
        {id: "2", name: "河南"},
        {id: "3", name: "河北"}
    ];


    $scope.citys = [
        {id: "-1", name: "全部"},
        {id: "1", name: "杭州"},
        {id: "2", name: "嘉兴"},
        {id: "3", name: "海宁"},
        {id: "4", name: "绍兴"}
    ]; 
    $scope.areas = [
        {id: "-1", name: "全部"},
        {id: "1", name: "上城区"},
        {id: "2", name: "滨江区"},
        {id: "3", name: "下城区"},
        {id: "4", name: "萧山区"}
    ];    
    $scope.branches = [
        {id: "-1", name: "全部"},
        {id: "1", name: "滨江一级加盟网点"},
        {id: "2", name: "滨江一级直营网点"},
        {id: "3", name: "西湖一级加盟网点"},
        {id: "4", name: "西湖一级直营网点"}
    ];    
    $scope.equipments = [
        {id: "-1", name: "全部"},
        {id: "1", name: "APK"},
        {id: "2", name: "ROM"}
    ];       




    //联动控制
    $scope.isCity = false;
    $scope.isArea = false;
    $scope.isBranche = false;


    $scope.active = function(){
        if($scope.province.id != "-1"){
            $scope.isCity = true;
            if($scope.city.id != "-1"){
                $scope.isArea = true;
                if($scope.area.id != "-1"){
                    $scope.isBranche = true;
                }
            }
        }else{
            $scope.isCity = false;
            $scope.isArea = false;
            $scope.isBranche = false;
            if($scope.city.id == "-1"){
                $scope.isArea = false;
                if($scope.area.id == "-1"){
                    $scope.isBranche = false;
                }
            }
        }


        if($scope.city.id == "-1"){
            $scope.isArea = false;
            $scope.isBranche = false;
                if($scope.area.id == "-1"){
                    $scope.isBranche = false;
                }
        }


        if($scope.area.id == "-1"){
            $scope.isBranche = false;
        }
    };
    


    //国际化；
    i18nService.setCurrentLang("zh-cn");
    // 基本属性设置
    $scope.gridOptions = {
        columnDefs: [
            { 
                field: 'name' ,
                displayName: '名字',
                // width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'gender',
                displayName: '性别',
                width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'company' ,
                displayName: '公司',
                // width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'email' ,
                displayName: '邮箱',
                // width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'phone' ,
                displayName: '电话',
                // width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'age' ,
                displayName: '年龄',
                width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false // 是否可编辑
            },
            { 
                field: 'mixedDate',
                displayName: '操作',
                // width: '10%',
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                enableHiding: false,
                suppressRemoveSort: false,
                enableCellEdit: false,// 是否可编辑
                // cellTemplate: '<div style="height:100%;"><a style="color:blue; display:block; line-height:350%; height:100%;" ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
                cellTemplate: "<div style='height:100%; padding-top:2%;'><button type='button' class='btn btn-info' ui-sref='app.message.detail({msgId:row.entity.id})'>详情</button></div>"
            }
        ],
        enableFiltering: false,
        enableSorting: true, //是否排序
        useExternalSorting: false, //是否使用自定义排序规则
        enableGridMenu: false, //是否显示grid 菜单(右上角菜单项)
        showGridFooter: false, //是否显示grid footer
        enableHorizontalScrollbar :  0, //grid水平滚动条是否显示, 0-不显示  1-显示
        enableVerticalScrollbar : 1, //grid垂直滚动条是否显示, 0-不显示  1-显示


        //-------- 分页属性 ----------------
        enablePagination: true, //是否分页，默认为true
        enablePaginationControls: true, //使用默认的底部分页
        paginationPageSizes: [10, 15, 20], //每页显示个数可选项
        paginationCurrentPage:1, //当前页码
        paginationPageSize: 10, //每页显示个数
        //paginationTemplate:"<div></div>", //自定义底部分页代码
        totalItems : 0, // 总数量
        useExternalPagination: true,//是否使用分页按钮


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


            //行选中事件,监听选择变化
            $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
                if(row){
                    $scope.testRow = row.entity;
                }
                //获取选择项
                $scope.currentSelection = $scope.gridApi.selection.getSelectedRows(row.entity);
            });


            //监听过滤器
            $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
        },
    
    };


    var mydefalutData=[];


    $http.get('data/ui-grid.json')
        .success(function(data) {
            mydefalutData = data;
            getPage(1, $scope.gridOptions.paginationPageSize);
            // $scope.gridOptions.data = data.slice(0, 10); 
    });


    // 根据页码和每页size获取数据
    var getPage = function(curPage, pageSize) {
        var firstRow = (curPage - 1) * pageSize;
        $scope.gridOptions.totalItems = mydefalutData.length;
        $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);
        //或者像下面这种写法
        //$scope.myData = mydefalutData.slice(firstRow, firstRow + pageSize);
    };


    //获取被选中的row对象;
    $scope.delSelData = function(){
        console.log($scope.currentSelection);
    };


    // 文本过滤器
    $scope.filter = function() {
        $scope.gridApi.grid.refresh();
    };
        
    $scope.singleFilter = function( renderableRows ){  
        var matcher = new RegExp($scope.filterValue);
        renderableRows.forEach( function( row ) {
          var match = false;
          [ 'name', 'company', 'email' ].forEach(function( field ){
            if ( row.entity[field].match(matcher) ){
              match = true;
            }
          });
          if ( !match ){
            row.visible = false;
          }
        });
        return renderableRows;
    };


}]);


CSS：

.gridStyle {
    border: 1px solid rgb(212, 212, 212);
    height: 500px;
    text-align:center;
}
.ngGridMaxPagesNumber {
    display: inline-block;
    height: 24px;
    vertical-align: top;
    font-size:16px;
}


.ui-grid-contents-wrapper{
background: #F6F8F8;
}


/*行高内容居中*/
.ui-grid-cell-contents{
padding: 0px;
line-height: 40px;
}


/*行高控制*/
.ui-grid-cell{
height: 40px !important;
}


.normal{
    color: #58666e;
}