ui-grid angularjs
<pre name="code" class="html"><!--ui-grid css-->
<link rel="stylesheet" type="text/css" href="../lib/angular-ui/ui-grid/ui-grid.min.css">
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize ui-grid-exporter ui-grid-edit ui-gird-pagination ui-grid-cellnav>
</div>
<!--ui-grid js-->
<script src="../lib/angular-ui/ui-grid/ui-grid.min.js"></script>
<!--ui-grid excel export-->
<script src="../lib/angular-ui/ui-grid/csv.js"></script>
<!--ui-grid pdf export-->
<script src="../lib/angular-ui/ui-grid/pdfmake.min.js"></script>
<script src="../lib/angular-ui/ui-grid/vfs_fonts.js"></script>
<!--ui-grid-selection 选择行指令-->
<!--ui-grid-resize-columns 表格宽可拉伸指令-->
<!--ui-grid-auto-resize 自动使用div的高度和宽度指令-->
<!--ui-grid-exporter 导出指令-->
<!--ui-grid-edit 编辑指令-->
<!--ui-gird-pagination 分页指令-->
<!--ui-gird-pagination 分页指令-->
<!--ui-grid-cellnav 单元格指令-->
<!--gridStyle 自定义设置样式-->
JS
angular.module('app', ['ui.grid','ui.grid.selection','ui.grid.resizeColumns','ui.grid.autoResize','ui.grid.edit','ui.grid.exporter','ui.grid.pagination','ui.grid.cellNav'])
.controller('RootCtrl', function($scope,i18nService) {//前四个基本上是必用到的 后面的可以根据自身情况去加
// 国际化;
i18nService.setCurrentLang('zh-cn');
$scope.gridOptions = {
data : 'myData',
//基础属性
enableSorting : true,//是否支持排序(列)
useExternalSorting : false,//是否支持自定义的排序规则
enableRowHeaderSelection : false,
enableGridMenu : false,//是否显示表格 菜单
showGridFooter: true,//时候显示表格的footer
enableHorizontalScrollbar : 1,//表格的水平滚动条
enableVerticalScrollbar : 1,//表格的垂直滚动条 (两个都是 1-显示,0-不显示)
selectionRowHeaderWidth : 30,
enableCellEditOnFocus:false,//default为false,true的时候单击即可打开编辑(cellEdit为true的时候,需要引入'ui.grid.cellNav')
//分页属性
enablePagination: true, //是否分页,default为true
enablePaginationControls: true, //使用默认的底部分页
paginationPageSizes: [10, 15, 20], //每页显示个数选项
paginationCurrentPage:1, //当前的页码
paginationPageSize: 10, //每页显示个数
paginationTemplate:"<div></div>", //自定义底部分页代码
totalItems : 0, // 总数量
useExternalPagination: true,//是否使用分页按钮
//选中
rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",//双击行事件
enableFooterTotalSelected: true, // 是否显示选中的总数,default为true,如果显示,showGridFooter 必须为true
enableFullRowSelection : true, //是否点击行任意位置后选中,default为false,当为true时,checkbox可以显示但是不可选中
enableRowHeaderSelection : true, //是否显示选中checkbox框 ,default为true
enableRowSelection : true, // 行选择是否可用,default为true;
enableSelectAll : true, // 选择所有checkbox是否可用,default为true;
enableSelectionBatchEvent : true, //default为true
modifierKeysToMultiSelect: false ,//default为false,为true时只能按ctrl或shift键进行多选,这个时候multiSelect必须为true;
multiSelect: true ,// 是否可以选择多个,默认为true;
noUnselect: false,//default为false,选中后是否可以取消选中
selectionRowHeaderWidth:30 ,//default为30,设置选择列的宽度
//api
onRegisterApi : function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity){
//编辑离开事件
}); $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
//行选中事件
});
}, //导出(只支持csv,扩展性不太好)
exporterAllDataFn: function(){//导出全部
return getAllData();
},
exporterCsvColumnSeparator: ',',
exporterCsvFilename:'testdown.csv',
exporterFieldCallback : function ( grid, row, col, value ){//导出回调可以过滤条件 return value;
},
exporterHeaderFilterUseName : true,
exporterMenuCsv : true,
exporterMenuLabel : "Export",
exporterMenuPdf : true,
exporterOlderExcelCompatibility : false,//是否兼容低版本excel
exporterPdfCustomFormatter : function ( docDefinition ) {
docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
return docDefinition;
},
exporterPdfFooter :{
text: '',
style: ''
},
exporterPdfDefaultStyle : {
fontSize: 11,font:'simblack' //font 设置自定义字体
},
exporterPdfFilename:'testdown.pdf',
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 : ['name'],//过滤不需要的列
exporterSuppressMenu: false,
//列属性设置
columnDefs: [{ field: 'name',
displayName: '名字',
width: '100', //宽度设置
enableColumnMenu: false,// 是否显示列头部菜单按钮
//enableHiding: false,
//suppressRemoveSort: true,
enableCellEdit: false, // 是否可编辑
cellEditableCondition:function($scope){
return boolean;//是否编辑控制
},
visible:true,是否显示default为true,
cellTemplate : '<a href="" ng-click="grid.appScope.viewPages(row.entity);">{{row.entity.name==1?"重写":""}}</a>',//重写cell
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
//做一些判断。。。
return 'red'//自定义样式
},
//cell下拉
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: [],//[{name:1,nameText:'Yoko'}]
editDropdownIdLabel: 'name',//id
editDropdownValueLabel: 'nameText',//显示的名字 cellFilter:"nameFilet"//过滤器
} ],
};
var myData=[{name:''}];
});
自定义指令
.directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) {
return {
priority : -190, // run after default uiGridCell directive
restrict : 'A',
scope : false, compile: function($element, attr) { // Get the function at ng-dblclick for ui-grid
var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true); return function ngEventHandler(scope, element) { element.on('dblclick', function(event) { var callback = function() { if ($scope.gridApi.grid.selection.lastSelectedRow)
{
fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
}
}; $scope.$apply(callback); }
)}; } };
} ])
ui-grid angularjs的更多相关文章
- 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( ...
- angularjs之UI Grid 的刷新 本地数据源及HTTP数据源
关键代码: 如果数据源是本地数据$("#hidJsonData").val("[]"); var myJsonData = []; if ($(&quo ...
- AngularJS +Kendo UI Grid template
var dataSource = new kendo.data.DataSource({ transport: { dataType: "json", read: inputUri ...
- [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. ...
随机推荐
- [分布式系统学习] 6.824 LEC1 MapReduce 笔记
什么是Map-Reduce呢? Map指的是一个形如下面定义的函数. def Map(k, v): //return [(k1, v1), (k2, v2), (k3, v3), ...] pass ...
- ch 与等宽字体
难题 有的时候,特别想通过字符来判断元素的长度,比如: 多行文本溢出时,文字变省略号 文字一个个的显示 效果分别如下: 第一种情况下,如果可以通过字符的数量判断长度是否溢出,从而把最后几个字符替换成省 ...
- 洛谷P2463 Sandy的卡片【后缀数组】【二分】
题目描述 Sandy和Sue的热衷于收集干脆面中的卡片. 然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积攒卡片兑换超炫的人物模型. 每一张卡片都由一些数字进行标记,第i张卡片的 ...
- poj3261 Milk Patterns【后缀数组】【二分】
Farmer John has noticed that the quality of milk given by his cows varies from day to day. On furthe ...
- POJ 1556 - The Doors - [平面几何+建图spfa最短路]
题目链接:http://poj.org/problem?id=1556 Time Limit: 1000MS Memory Limit: 10000K Description You are to f ...
- XTU 1261 - Roads - [最小割][2017湘潭邀请赛B题(江苏省赛)]
之前在网上搜了一个下午没搜到这道题的题解,然后同时又对着叉姐写的两行字题解看了一个下午: 虽然基本上已经知道了这题的思路,但愣是因为自己代码实现起来太繁复,外加不确定正确性,没敢码…… 但是一道题肝了 ...
- YARN Architecture
The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...
- 自己实现一个简单的网络音乐mp3播放器
大繁至简,把思路搞清楚才是最重要的,如何去做依托于使用什么来实现这项功能 列出我使用的基本类 NSURLSessionDataTask 数据获取类 NSFileHandle 数据缓存和数据读取类 Au ...
- Elasticsearch 过滤器
序 本文主要记录es的查询过滤的使用. 使用过滤器 过滤器不影响评分,而评分计算让搜索变得复杂,而且需要CPU资源,因而尽量使用过滤器,而且过滤器容易被缓存,进一步提升查询的整体性能. post_fi ...
- 2018/03/16 echo、print_r、print、var_dump之间的区别
还是先说下我对这个方法的理解 print_r()用于 cli模式下的输出调试,error_log() 调试 var_dump() 用于页面的显示调试 echo() 用处比较多,__toString() ...