angularJS ng-grid 配置
以下是按我的需求修改的 简单的demo 可以自己扩展
HTML：
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="width=device-width" name="viewport"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link href="css/ui-grid.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-grid.min.js"></script> <style>
body {
padding: 60px;
/*min-height: 600px;*/
}
.grid {
width: 1200px;
/*height: 5000px;*/
margin:0 auto;
}
.placeholder {
height: 50%;
width: 50%;
border: 3px solid black;
background: #ccc;
}
.nav-ul{
overflow: hidden;
zoom:1;
}
.nav-ul li{
float: left;
list-style: none; margin-right: 15px;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
.nav-ul li a{
cursor: pointer!important;
}
.nav-ul li p.active{
color:red;
}
.nav-ul li input[type='checkbox']{
position: relative;
top: 1px;
}
</style>
</head>
<body ng-controller="Main">
<!-- <h1>Test</h1> --> <!-- <div class="row main"> -->
<h2>Grid{{gridName}} </h2>
<!--<ul class="nav-ul">-->
<!--<li>address.state <a ng-click="addColumn('address.state',150)">[+]</a> <a ng-click="removeColumn('address.state')">[-]</a></li>-->
<!--<li>address.zip <a ng-click="addColumn('address.zip',150)">[+]</a></li>-->
<!--<li>company <a ng-click="addColumn('company',150)">[+]</a></li>-->
<!--<li>email <a ng-click="addColumn('email',100)">[+]</a></li>-->
<!--<li>phone <a ng-click="addColumn('phone',100)">[+]</a></li>-->
<!--<li>about <a ng-click="addColumn('about',100)">[+]</a></li>-->
<!--</ul>-->
<!--<ul class="nav-ul">-->
<!--<li ng-repeat="col in baseData">-->
<!--{{col.name}} <a ng-click="addColumn(col.name,col.width)">[+]</a> <a ng-click="removeColumn(col.name)">[-]</a>-->
<!--</li>-->
<!--</ul>-->
<!--<ul class="nav-ul">-->
<!--<li ng-repeat="col in baseData">-->
<!--<p class="{{col.name}} active">{{col.name}} <a ng-click="addColumn(col.name,col.width,col.key)">[+]</a> <a ng-click="removeColumn(col.name)">[-]</a></p>-->
<!--</li>-->
<!--</ul>-->
<ul class="nav-ul">
<li ng-repeat="col in baseData">
<label><input ng-click="changeColumn(col.name,col.displayName,col.width,col.key,$event)" type="checkbox" checked/> {{col.displayName}}</label>
</li>
</ul>
<!--<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div>-->
<div ui-grid="gridOptions" class="grid" ui-grid-selection ui-grid-edit ui-grid-importer ui-grid-exporter></div>
<!-- <div class="placeholder"> -->
<!-- </div> --> <br>
<br>
<style>
.grid1467082016751 .ui-grid-render-container-body .ui-grid-viewport{
height: inherit!important;
}
</style>
<script>
var iArray = [
{ name:'id',displayName:"编号", width:50 , key:1},
{ name:'name',displayName:"姓名", width:100, pinnedLeft:true , key:2},
{ name:'age',displayName:"年龄", width:100, pinnedRight:true, key:3 },
{ name:'address.street',displayName:"街道", width:150 , key:4 },
{ name:'address.city',displayName:"城市", width:150, key:5 },
{ name:'address.state',displayName:"社区", width:150 , key:6},
{ name:'address.zip',displayName:"详细地址", width:150, key:7 },
{ name:'company',displayName:"公司名称", width:120 , key:8},
{ name:'email',displayName:"邮箱", width:100, key:9},
{ name:'phone',displayName:"手机", width:200 , key:10},
{ name:'about',displayName:"关于", width:300 , key:11}
];
// iArray.sort(function(a,b){
// if(a.key> b.key) return 1;
// if(a.key> b.key) return -1;
// return 0;
// })
var iArray2 = iArray.concat();//复制数组1array1.concat() var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']);
app.controller('Main', function($scope, $http) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = iArray2;
$scope.baseData = iArray;
$scope.gridName = "员工信息";
$scope.datas = null;
var dataName = null; $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json',{params: {pageSize:10,pageNo:3}
}).success(function(data) {
$scope.datas = data;
dataName = data;
$scope.gridOptions.data = dataName;
}); $scope.getFields = function () {
var data = $scope.$parent[dataName];
if (data && data.length > 0) {
var keys = _.keys(data[0]);
return _.reject(keys, function (key) {
return _.find($scope.columnDefs, function (col) {
return col.field === key;
});
});
}
return [];
} $scope.changeColumn = function (field,displayName,width,key,$event){
if( $($event.target).prop("checked") ){
$scope.addColumn(field,displayName,width,key);
}else{
$scope.removeColumn(field);
}
return false;
} $scope.addColumn = function (field,displayName,width,key) {
var index = $scope.getIndex($scope.gridOptions.columnDefs, field);
var index2 = $scope.getIndex($scope.baseData, field);
if (index == -1) {
var oEle = document.getElementsByClassName(field);
$(oEle).addClass("active");
// $scope.gridOptions.columnDefs.splice(index2,0,{
// field: field,
// displayName: field,
// width: width,
// class: "active"
// });
$scope.gridOptions.columnDefs.push({
field: field,
displayName: displayName,
width: width,
key: key
});
$scope.gridOptions.columnDefs.sort(function(a,b){
if(a.key> b.key) return 1;
if(a.key< b.key) return -1;
return 0;
})
}
}
$scope.removeColumn = function (col) {
var index = $scope.getIndex($scope.gridOptions.columnDefs,col,"active2");
if( index!=-1 ) {
var oEle = document.getElementsByClassName($scope.gridOptions.columnDefs[index].name);
$(oEle).removeClass("active");
$scope.gridOptions.columnDefs.splice(index,1);
};
}
$scope.getIndex = function(arr,val){
var index_ = -1;
$(arr).each(function(i,o){
if( arr[i].name == val ){
index_ = i;
}
})
return index_;
}
$scope.$watch('gridOptions', function (data) {
if (data.length > 0 && $scope.columnDefs.length == 0) {
$scope.getFields().forEach(function (f) {
$scope.addColumn(f);
});
}
}); $("h2 a").each(function(i,o){
$(this).click(function(){
if(i==0){
$scope.gridOptions.columnDefs = iArray2;
$scope.$apply();
}else{
$scope.gridOptions.columnDefs = iArray;
$scope.$apply();
}
})
}) }); </script>
</body>
</html>
整个资源放在了百度网盘 需要的下载：http://pan.baidu.com/s/1eSFfksi
angularJS ng-grid 配置的更多相关文章
- AngularJS开发相关配置
安装步骤: 1. Node.js,下载地址:https://nodejs.org/en/ 2. Git 下载地址:https://git-scm.com/download/ 3. Python (需为 ...
- ice grid配置使用第二篇------实际使用
一 首先,启动ice grid 1 修改配置文件 node.cfg,appication.xml 修改registry.cfg 配置注册表信息: IceGrid.Registry.Client. ...
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- part 4 AngularJS ng src directive
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- 【转】Flume(NG)架构设计要点及配置实践
Flume(NG)架构设计要点及配置实践 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中.由原来的Fl ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- 【翻译】ExtJS vs AngularJS
原文:ExtJS vs AngularJS ExtJS和AngularJS是两个行业内领先的富界面开发框架.TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程 ...
- Flume NG Getting Started（Flume NG 新手入门指南）
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
随机推荐
- javascript事件有哪些？javascript的监听事件
事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...
- android之简单图形绘制
首先编写MyView类 代码如下: package com.example.myhello; import android.content.Context; import android.graphi ...
- 重新启动 Apache 以加载上面安装的模块
尽管Ubuntu 是一种新兴的Linux分支,但Ubuntu 组织却为Apache提供了丰富的支持软件,这些软件都可以从发行版的光盘获取,也可以从官方站点轻松下载.所以,Ubuntu非常适合作为Web ...
- XHTML基础
简介:前一章,我们知道网页主要是由内容.结构.表现和行为四个部分组成,而网页的结构由W3C规定的XHTML语言定义.本章介绍定义网页结构的XHTML基本标价. 1.XHTML基本语法 ...
- C＃7.0中有新特性
以下将是 C# 7.0 中所有计划的语言特性的描述.随着 Visual Studio “15” Preview 4 版本的发布,这些特性中的大部分将活跃起来.现在是时候来展示这些特性,你也告诉借此告诉 ...
- [LeetCode]题解（python）：113 Path Sum II
题目来源 https://leetcode.com/problems/path-sum-ii/ Given a binary tree and a sum, find all root-to-leaf ...
- NPOI操作excel之读取excel数据
NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 一.下载引用 去NPOI官网http://npoi.codeplex. ...
- Python开发程序：FTP程序
作业:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp se ...
- 白话学习MVC(七)Action的执行一
一.概述 在此系列开篇的时候介绍了MVC的生命周期 , 对于请求的处理,都是将相应的类的方法注册到HttpApplication事件中,通过事件的依次执行从而完成对请求的处理.对于MVC来说,请求是先 ...
- LUA语言注意点归集
统计元素个数接口--只计算以整数为下标的 第一段连续元素的数目 #tab 和 table.getn() http://ju.outofmemory.cn/entry/29450 我们修改table: ...