zoukankan      html  css  js  c++  java

  • [转]ng-grid

    本文转自：http://angular-ui.github.io/ui-grid/

    Getting Started

    Steps for getting started (example on right):

      1. Add references to jQuery and AngularJS.
      2. Add references to ngGrid's javascript and css files.
      3. Where you declare your app module, add ngGrid: angular.module('myApp',['ngGrid']); If you use angular seed, it is in your app.js file.
      4. In your html file within the controller where you plan to use ng-grid, add: <div class="gridStyle" ng-grid="gridOptions"></div> gridOptions is the variable we are going to bind to where we will initialize our grid options.
      5. We are going to define a basic style for our grid in style.css: 
        .gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}
      6. In your javascript file within the controller where you plan to use ng-grid, lets add data that our grid will use:
    $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
    1. Now initialize your grid options under the same controller as data: $scope.gridOptions = { data: 'myData' };
    2. Below is the outcome of the grid using the example on the right:
     
    name
     
     
    age
     
     
    Moroni
     
    50
     
    Tiancum
     
    43
     
    Jacob
     
    27
     
    Nephi
     
    29
     
    Enos
     
    34

    HTML:

    1. <html ng-app="myApp">
    2. <head lang="en">
    3. <meta charset="utf-8">
    4. <title>Getting Started With ngGrid Example</title>
    5. <link rel="stylesheet" type="text/css" href="ng-grid.css" />
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. <script type="text/javascript" src="jquery-1.8.2.js"></script>
    8. <script type="text/javascript" src="angular.js"></script>
    9. <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
    10. <script type="text/javascript" src="main.js"></script>
    11. </head>
    12. <body ng-controller="MyCtrl">
    13. <div class="gridStyle" ng-grid="gridOptions">
    14. </div>
    15. </body>
    16. </html>

    CSS:

    1. /*style.css*/
    2. .gridStyle {
    3. border: 1px solid rgb(212,212,212);
    4. width: 400px;
    5. height: 300px
    6. }

    Javascript:

    1. // main.js
    2. var app = angular.module('myApp', ['ngGrid']);
    3. app.controller('MyCtrl', function($scope) {
    4. $scope.myData = [{name: "Moroni", age: 50},
    5. {name: "Tiancum", age: 43},
    6. {name: "Jacob", age: 27},
    7. {name: "Nephi", age: 29},
    8. {name: "Enos", age: 34}];
    9. $scope.gridOptions = { data: 'myData' };
    10. });

    View the plunker here.
  • 相关阅读:
    扩展springMVC
    SpringBoot推荐的Thymeleaf
    springboot使用注解添加组件
    @PropertySource 加载指定的配置文件
    读取yml配置文件中的值
    媒体查询
    若是前台接收的数据为null的不进行传递
    DATA时间：若是数据库存储的为毫秒，而前台需要的是秒，下面介绍一个工具类：
    表单验证
    Redis集群总结
  • 原文地址：https://www.cnblogs.com/freeliver54/p/5234990.html
Copyright © 2011-2022 走看看