最近在应用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;
}