ui-grid
html代码：
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>ui-Grid Example01</title>
<link rel="stylesheet" type="text/css" href="../css/ui-grid/ui-grid.css" />
<script type="text/javascript" src="../js/lib/angular/angular.js"></script>
<script type="text/javascript" src="../js/lib/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../js/lib/ui-grid/ui-grid.js"></script>
<!-- ui-grid export 导出-->
<script src="../js/lib/pdfmake/pdfmake.min.js"></script>
<script src="../js/lib/pdfmake/vfs_fonts.js"></script>
<script src="../js/lib/ui-grid/csv.js"></script>
</head>
<body ng-controller="MyCtrl">
<div ui-grid="gridOptions" style="width: 100%; height: 500px; text-align: center;" ui-grid-edit ui-grid-pagination
ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize>
</div>
<div style="width:100%; height: 100px">
<ol>
<li>名称：{{testRow.name}}</li>
<li>年龄：{{testRow.age}}</li>
<li>生日：{{testRow.birthday}}</li>
</ol>
</div>
</body></html>ui-grid-edit: grid 编辑指令；
ui-gird-pagination : grid 分页指令；
ui-grid-selection : grid 选择行所需指令；
ui-grid-exporter : grid 导出功能所需指令；
ui-grid-resize-columns: grid 列宽可以拉伸所需指令；
ui-grid-auto-resize : 解决grid布局 自动适应div 高度和宽度问题（非常有用）；
js 代码：
var app = angular.module('myApp', ['ui.grid','ui.grid.selection','ui.grid.edit',
'ui.grid.exporter','ui.grid.pagination','ui.grid.resizeColumns','ui.grid.autoResize']);
app.controller('MyCtrl', function($scope,i18nService) {
// 国际化；
i18nService.setCurrentLang("zh-cn");
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name',
displayName: '名字',
width: '10%',
enableColumnMenu: false,// 是否显示列头部菜单按钮
enableHiding: false,
suppressRemoveSort: true,
enableCellEdit: false // 是否可编辑
},
{ field: "age"},
{ field: "birthday"},
{ field: "salary"}
],
enableSorting: true, //是否排序
useExternalSorting: false, //是否使用自定义排序规则
enableGridMenu: true, //是否显示grid 菜单
showGridFooter: true, //是否显示grid footer
enableHorizontalScrollbar : 1, //grid水平滚动条是否显示, 0-不显示 1-显示
enableVerticalScrollbar : 0, //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 : true, //是否点击行任意位置后选中,默认为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 > 45){
row.grid.api.selection.selectRow(row.entity); // 选中行
}
},
modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;
multiSelect: true ,// 是否可以选择多个,默认为true;
noUnselect: false,//默认false,选中后是否可以取消选中
selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；
//--------------导出----------------------------------
exporterAllDataFn: function(){
return getPage(1,$scope.gridOptions.totalItems);
},
exporterCsvColumnSeparator: ',',
exporterCsvFilename:'download.csv',
exporterFieldCallback : function ( grid, row, col, value ){
if ( value == 50 ){
value = "可以退休";
}
return value;
},
exporterHeaderFilter :function( displayName ){
return 'col: ' + name;
},
exporterHeaderFilterUseName : true,
exporterMenuCsv : true,
exporterMenuLabel : "Export",
exporterMenuPdf : true,
exporterOlderExcelCompatibility : false,
exporterPdfCustomFormatter : function ( docDefinition ) {
docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
return docDefinition;
},
exporterPdfFooter :{
text: 'My footer',
style: 'footerStyle'
},
exporterPdfDefaultStyle : {
fontSize: 11,font:'simblack' //font 设置自定义字体
},
exporterPdfFilename:'download.pdf',
/* exporterPdfFooter : {
columns: [
'Left part',
{ text: 'Right part', alignment: 'right' }
]
},
或 */
exporterPdfFooter: function(currentPage, pageCount) {
return currentPage.toString() + ' of ' + pageCount;
},
exporterPdfHeader : function(currentPage, pageCount) {
return currentPage.toString() + ' of ' + pageCount;
},
exporterPdfMaxGridWidth : 720,
exporterPdfOrientation : 'landscape',// 'landscape' 或 'portrait' pdf横向或纵向
exporterPdfPageSize : 'A4',// 'A4' or 'LETTER'
exporterPdfTableHeaderStyle : {
bold: true,
fontSize: 12,
color: 'black'
},
exporterPdfTableLayout : null,
exporterPdfTableStyle: {
margin: [0, 5, 0, 15]
},
exporterSuppressColumns : ['buttons'],
exporterSuppressMenu: false,
//---------------api---------------------
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;
}
});
}
};
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);
};
var mydefalutData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
getPage(1, $scope.gridOptions.paginationPageSize);
});效果图：
ui-grid 使用讲解
名称：{{testRow.name}}
- 年龄：{{testRow.age}}
- 生日：{{testRow.birthday}}
ui-grid-edit: grid 编辑指令；
ui-gird-pagination : grid 分页指令；
ui-grid-selection : grid 选择行所需指令；
ui-grid-exporter : grid 导出功能所需指令；
ui-grid-resize-colums: grid 列宽可以拉伸所需指令；
ui-grid-auto-resize : 解决grid布局 自动适应div 高度和宽度问题（非常有用）；
js 代码：
var app = angular.module('myApp', ['ui.grid','ui.grid.selection','ui.grid.edit',
'ui.grid.exporter','ui.grid.pagination','ui.grid.resizeColumns','ui.grid.autoResize']);
app.controller('MyCtrl', function($scope,i18nService) {
// 国际化；
i18nService.setCurrentLang("zh-cn");
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name',
displayName: '名字',
width: '10%',
enableCellEdit: false // 是否可编辑
},
{ field: "age"},
{ field: "birthday"},
{ field: "salary"}
],
enableSorting: true, //是否排序
useExternalSorting: false, //是否使用自定义排序规则
enableGridMenu: true, //是否显示grid 菜单
showGridFooter: true, //是否显示grid footer
enableHorizontalScrollbar : 1, //grid水平滚动条是否显示, 0-不显示 1-显示
enableVerticalScrollbar : 0, //grid垂直滚动条是否显示, 0-不显示 1-显示
//-------- 分页属性 ----------------
enablePagination: true, //是否分页，默认为true
enablePaginationControls: true, //使用默认的底部分页
paginationPageSizes: [10, 15, 20], //每页显示个数可选项
paginationCurrentPage:1, //当前页码
paginationPageSize: 10, //每页显示个数
//paginationTemplate:"
", //自定义底部分页代码
totalItems : 0, // 总数量
useExternalPagination: true,//是否使用分页按钮
//----------- 选中 ----------------------
enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true
enableFullRowSelection : true, //是否点击行任意位置后选中,默认为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 > 45){
row.grid.api.selection.selectRow(row.entity); // 选中行
}
},
modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;
multiSelect: true ,// 是否可以选择多个,默认为true;
noUnselect: false,//默认false,选中后是否可以取消选中
selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；
//--------------导出----------------------------------
exporterAllDataFn: null,
exporterCsvColumnSeparator: ',',
exporterCsvFilename:'download.csv',
exporterFieldCallback : function ( grid, row, col, value ){
if ( value == 50 ){
value = "可以退休";
}
return value;
},
exporterHeaderFilter :function( displayName ){
return 'col: ' + name;
},
exporterHeaderFilterUseName : true,
exporterMenuCsv : true,
exporterMenuLabel : "Export",
exporterMenuPdf : true,
exporterOlderExcelCompatibility : false,
exporterPdfCustomFormatter : function ( docDefinition ) {
docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
return docDefinition;
},
exporterPdfFooter :{
text: 'My footer',
style: 'footerStyle'
},
exporterPdfDefaultStyle : {
fontSize: 11
},
exporterPdfFilename:'download.pdf',
/* exporterPdfFooter : {
columns: [
'Left part',
{ text: 'Right part', alignment: 'right' }
]
},
或 */
exporterPdfFooter: function(currentPage, pageCount) {
return currentPage.toString() + ' of ' + pageCount;
},
exporterPdfHeader : function(currentPage, pageCount) {
return currentPage.toString() + ' of ' + pageCount;
},
exporterPdfMaxGridWidth : 720,
exporterPdfOrientation : 'landscape',// 'landscape' 或 'portrait'
exporterPdfPageSize : 'A4',// 'A4' or 'LETTER'
exporterPdfTableHeaderStyle : {
bold: true,
fontSize: 12,
color: 'black'
},
exporterPdfTableLayout : null,
exporterPdfTableStyle: {
margin: [0, 5, 0, 15]
},
exporterSuppressColumns : ['buttons'],
exporterSuppressMenu: false, //---------------api---------------------
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;
}
});
}
};
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);
};
var mydefalutData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
getPage(1, $scope.gridOptions.paginationPageSize);
}); ==============================
'use strict';
myApp.controller(
'itEquipmentCreatController', [
'ItEquipmentCommonService',
'$scope',
'$location',
'$http',
function(ItEquipmentCommonService,$scope,$location,$http,$timeout) {
$scope.titleText="设置项目-IT设备清单";//title show
$scope.proNo="001";//项目编号
//rack
$scope.backSearch = function(path){
$location.path(path);
};
//显示动态表格
$scope.showData = function(flag) {
$scope.visible = flag;
};
// // 国际化；
// i18nService.setCurrentLang("zh-cn");
$scope.gridOptions = {
// data: 'myData',
// columnDefs: [{ field: 'name', displayName: '名字',
// width: '10%',
// enableColumnMenu: false,// 是否显示列头部菜单按钮
// enableHiding: false,
// suppressRemoveSort: true,
// enableCellEdit: false // 是否可编辑
// },
// { field: "age"},
// { field: "birthday"},
// { field: "salary"}
// ],
//----------- 选中----------------------
enableRowSelection : true, // 行选择是否可用，默认为true;
enableFullRowSelection : true, //不起作用...
enableSelectAll: false,
rowHeight: 30,
modifierKeysToMultiSelect: false ,//默认false,为true时只能按ctrl或shift键进行多选, multiSelect 必须为true;
multiSelect: false ,// 是否可以选择多个,默认为true;
noUnselect: false,//默认false,选中后是否可以取消选中
//---------------api---------------------
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
//行选中事件
$scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
if(row){
$scope.testRow = row.entity;
}
});
}
};
var getPage = function(curPage, pageSize) {
var firstRow = (curPage - 1) * pageSize;
$scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);
};
//后台查询所有数据显示
var mydefalutData = [
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
getPage(1, 5);
/**
* 调用service
*/
$scope.proText="---选项目编号--";
ItEquipmentCommonService.queryProNoes($scope);//查询项目编号
ItEquipmentCommonService.queryProInfo($scope,$scope.proNo);//根据项目编号，查询项目相关信息
/**设置第一个被选中，为默认值：以下设置方法不可取，会引起列表上出现默认数据被重复*/
//方法一：利用循环
// for(var i=0;i<=$scope.proNoes.length;i++ ){
// if($scope.proNoes.proNo=='01'){
// proText=$scope.proNoes[i].proNo+"-"+$scope.proNoes[i].proName;
// break;
// }
// }
// alert( $scope.proText)
//方法二：
//$scope.modelPro=$scope.proNoes[1].proNo+"-"+$scope.proNoes[1].proName;
}
]);
ui-grid的更多相关文章
- NGUI UI Grid, two column
NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.
- Kendo Web UI Grid添加一个html控件如（checkbox,button)
在Kendo Web UI Grid增加一个控件如效果图: <div id="grid1"></div><script> $("#gr ...
- kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
- Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
- [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)
有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...
- Kendo Web UI Grid数据绑定，删除，编辑，并把默认英文改成中文
Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...
- Asp.net mvc Kendo UI Grid的使用(二)
上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...
- 封装扩展Kendo UI Grid
封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...
- kendo ui grid控件在选择行时如何取得所选行的某一列数据
$("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...
随机推荐
- Unity VR全景漫游
一.前言: 最近VR如火如茶,再不学习就落伍啦.有空闲时间,跟Rodolfo一起研究下相关知识. 本文介绍了两种方法来制作VR场景: 方法一:通过6张小图搭建的VR场景 方法二:通过一张全景图来搭建V ...
- dcraw源码解析
dcraw源码解析 Author:Maddock Date:2015-04-22 转载请注明出处: 首先吐槽一点: 程序中使用了相当多的全局变量, 看的人头大.全局变量的坏处参看 http://wen ...
- 数据库错误：check the manual that corresponds to your MySQL server version for the right sy
检查对应到您的MySQL服务器版本附近使用正确的语法手册 数据库插入的时候出现上述问题,总结了两方面原因: 1.语法错误,这是百度之得到的大部分结果,但是没有解决我的问题 2.仔细观察我的sql语句, ...
- RocketMQ与kafka对比（18项差异）-转自阿里中间件
淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...
- mysql数据库引擎
看某个使用的引擎,在显示结果里参数engine后面的就表示该表当前用的存储引擎:mysql> show create table 表名; 看mysql支持哪些存储引擎:mysql> sho ...
- PHP require和include的区别
require一个文件存在错误的话,那么程序就会中断执行了,并显示致命错误 include一个文件存在错误的话,那么程序不会中端,而是继续执行,并显示一个警告错误. 以下为补充:1. include有 ...
- Docker on YARN在Hulu的实现
这篇文章是我来Hulu这一年做的主要工作,结合当下流行的两个开源方案Docker和YARN,提供了一套灵活的编程模型,目前支持DAG编程模型,将会支持长服务编程模型. 基于Voidbox,开发者可以很 ...
- LightOJ1126 Building Twin Towers（DP）
题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1126 Description Professor Sofdor Al ...
- log4php的配置
网上关于log4php配置的文章很多,下面是我的配置,跟网上部分略有不同 (1)添加日志 1.下载log4php,到官网就可以下载到,下载后解压 我的版本是log4php_2.3.0 ...
- Kinect的那些事儿
Kinect结合Unity3d跑酷游戏体感Demo 今天收拾东西,在柜子的翻出了一台崭新的Kinect,说起来真是惭愧,大学毕业那会儿,慈老师(和名字一位慈祥的好老师,也是我的毕业设计指导老师)赞 助 ...