zoukankan      html  css  js  c++  java
  • ng-grid

    请查看官网:http://angular-ui.github.io/ui-grid/

    简单的使用: 总的来说我们

    1.需要引入ng-grid-1.3.2.js

    2.在html页面需要加入  class="gridStyle" ng-grid="gridOptions"

    //  html
    <html ng-app="myApp">  
        <head lang="en">
            <meta charset="utf-8">
            <title>Getting Started With ngGrid Example</title>  
            <link rel="stylesheet" type="text/css" href="ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script type="text/javascript" src="jquery-1.8.2.js"></script>
            <script type="text/javascript" src="angular.js"></script>
            <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
            <script type="text/javascript" src="main.js"></script>
        </head>
        <body ng-controller="MyCtrl">
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>
    .gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 400px; 
        height: 300px;
    }
    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
        $scope.myData = [{name: "Moroni", age: 50},
                         {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];
        $scope.gridOptions = { 
            data: 'myData',
            columnDefs: [{field:'name', displayName:'Name'}, {field:'age', displayName:'Age'}]
        };
    });

     

  • 相关阅读:
    学习进度笔记
    博雅数据机器学习07
    学习进度笔记
    博雅数据机器学习06
    《一级架构师》阅读笔记
    学习进度笔记
    博雅数据机器学习05
    递归的概念
    CSS学习笔记3:选择器及优先级
    CSS学习笔记2:伪类
  • 原文地址:https://www.cnblogs.com/coding4/p/5584773.html
Copyright © 2011-2022 走看看