NgReactGrid

来自ling
跳转至: 导航搜索

Include sources in your HTML

<!DOCTYPE html>
<html ng-app="example">
    <head>
        <title>ngReactGrid Basic Example</title>
        <link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
    </head>
    <body>
      <!-- Your JS Sources -->
      <script src="js/angular.min.js" type="text/javascript" ></script>
      <script src="js/react-0.10.0.js" type="text/javascript" ></script>
      <script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
    </body>
</html>

默认使用方式

<!DOCTYPE html>
<html ng-app="example">
<head>
    <title>ngReactGrid Basic Example</title>
    <link rel="stylesheet" type="text/css" href="../build/css/ngReactGrid.css">
</head>
<body>
<div ng-controller="BasicExampleController" style="width: 100%">
    <ng-react-grid grid="grid"></ng-react-grid>
    <button type="button" ng-click="toggleVisibleCheckboxes()">Toggle Visible Checkboxes</button>
    <button type="button" ng-click="edit()" ng-show="!isEditing()">Edit Grid</button>
    <button type="button" ng-click="save()" ng-show="isEditing()">Save Grid</button>
    <button type="button" ng-click="cancel()" ng-show="isEditing()">Cancel</button>
    <br/>
    Selections: {{selections}}<br/>
    Clicked On Record: {{clickedOnRecord}}
</div>

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="./dataSet.js"></script>
<script src="../build/js/ngReactGrid.js"></script>
<script type="text/javascript">

    angular.module("example", ['ngReactGrid'])
            .controller("BasicExampleController", function ($scope, $timeout,
                  ngReactGridCheckbox, ngReactGridTextField) {

                $scope.employee = {};
                $scope.selections = [];
                $scope.clickedOnRecord = {};
                $scope.editingGrid = false;

                $scope.isEditing = function () {
                    return $scope.editingGrid;
                };

                var checkboxGrid = 
                    new ngReactGridCheckbox($scope.selections, 
                        {batchToggle: true,
                         disableCheckboxField: 'disableCheckbox'});
                
                var checkboxState = false;
                $scope.toggleVisibleCheckboxes = function () {
                    checkboxState = !checkboxState;
                    checkboxGrid.setVisibleCheckboxState(checkboxState);
                };

                $scope.edit = function () {
                    $scope.grid.edit();
                    $scope.editingGrid = true;
                };

                $scope.save = function () {
                    var data = $scope.grid.save();
                    console.debug('data', data);
                    $scope.editingGrid = false;
                };

                $scope.cancel = function () {
                    $scope.editingGrid = false;
                    $scope.grid.cancel();
                };

                var referenceData = dataSet.slice(0, 100).map(function (rec) {
                    return {
                        id: rec.firstName,
                        name: rec.firstName
                    }
                });

                var isOddRow = function(index) {
                    return (index % 2) === 0;
                };
                dataSet = dataSet.map(function (rec, index) {
                    return {
                        user: {
                            firstName: rec.firstName,
                            lastName: rec.lastName
                        },
                        disableCheckbox: isOddRow(index)
                    };
                });

                $scope.grid = {
                    data: dataSet,
                    columnDefs: [
                        checkboxGrid, 
                        {
                            field: "user.firstName",
                            columnFilter: true,
                            displayName: "First Name",
                            edit: function (row) {
                                return new ngReactGridTextField(row, 'user.firstName');
                            }
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        ,
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        },
                        {
                            field: "user.lastName",
                            columnFilter: true,
                            displayName: "Last Name"
                        }
                        
                    ],
                    horizontalScroll: true
                };

                /*$scope.grid = {
                 data: [],
                 columnDefs: [
                 {
                 field: "user.firstName",
                 displayName: "First Name"
                 },
                 {
                 field: "user.lastName",
                 displayName: "Last Name"
                 }
                 ],
                 /*rowClick: function(row) {
                 console.debug(row);
                 },
                 localMode: false,
                 getData: function () {
                 var grid = this;
                 $timeout(function () {
                 if (grid.search) {
                 $scope.grid.data = [];
                 } else {
                 $scope.grid.data = dataSet.slice((grid.currentPage - 1) * grid.pageSize, (grid.pageSize * grid.currentPage));
                 }
                 $scope.grid.totalCount = dataSet.length;
                 }, 2000);
                 }
                 };*/
            });

</script>
</body>
</html>

Basic Example

<!DOCTYPE html>
<html ng-app="example">
    <head>
        <title>ngReactGrid Basic Example</title>
        <link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
    </head>
    <body>
    
      <div ng-controller="BasicExampleController" style="width: 100%">
          <ng-react-grid grid="grid"></ng-react-grid>
      </div>
    
      <!-- Your JS Sources -->
      <script src="js/angular.min.js" type="text/javascript" ></script>
      <script src="js/react-0.10.0.js" type="text/javascript" ></script>
      <script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
      <script type="text/javascript">
        angular.module("example", ['ngReactGrid'])
        .controller("BasicExampleController", function($scope) {
            var employees = [];
            
            for(var i = 0; i < 49; i++)
                employees.push({
                    firstName: "John " + i,
                    lastName: "Doe " + i
                });
            
            $scope.grid = {
                    data: employees,
                    columnDefs: [
                    {
                        field: "firstName",
                        displayName: "First Name"
                    },
                    {
                        field: "lastName",
                        displayName: "Last Name"
                    }]
            };
        });
        
      </script>
    </body>
</html>

Horizontal Scrolling

<!DOCTYPE html>
<html ng-app="example">
    <head>
        <title>ngReactGrid Basic Example</title>
        <link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
    </head>
    <body>
    
      <div ng-controller="BasicExampleController" style="width: 100%">
          <ng-react-grid grid="grid"></ng-react-grid>
      </div>
    
      <!-- Your JS Sources -->
      <script src="js/angular.min.js" type="text/javascript" ></script>
      <script src="js/react-0.10.0.js" type="text/javascript" ></script>
      <script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
      <script type="text/javascript">
 
        angular.module("example", ['ngReactGrid'])
        .controller("BasicExampleController", function($scope) {
 
            var employees = [];
            for(var i = 0; i < 49; i++)
                employees.push({
                    firstName: "John " + i,
                    lastName: "Doe " + i,
                    city: "New York " + i,
                    state: "New York " + i
                });
 
            $scope.grid = {
                    data: employees,
                    columnDefs: [
                    {
                        field: "firstName",
                        displayName: "First Name",
                        width: "50%"
                    },
                    {
                        field: "lastName",
                        displayName: "Last Name",
                        width: "25%"
                    },
                    {
                        field: "city",
                        displayName: "City",
                        width: "25%"
                    },
                    {
                        field: "state",
                        displayName: "State"
                    }],
                    horizontalScroll: true
            };
        });
        
      </script>
    </body>
</html>

Server Side Processing

<!DOCTYPE html>
<html ng-app="example">
    <head>
        <title>ngReactGrid Basic Example</title>
        <link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
    </head>
    <body>
    
      <div ng-controller="BasicExampleController" style="width: 100%">
          <ng-react-grid grid="grid"></ng-react-grid>
      </div>
    
      <!-- Your JS Sources -->
      <script src="js/angular.min.js" type="text/javascript" ></script>
      <script src="js/react-0.10.0.js" type="text/javascript" ></script>
      <script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
      <script src="./dataSet.js"></script>
      <script type="text/javascript">
        angular.module("example", ['ngReactGrid'])
        .controller("BasicExampleController", function($scope, $timeout) {
            $scope.grid = {
                    data: [],
                    columnDefs: [
                    {
                        field: "firstName",
                        displayName: "First Name"
                    },
                    {
                        field: "lastName",
                        displayName: "Last Name"
                    }],
                    localMode: false,
                    getData: function() {
                        var grid = this;
                        $timeout(function() {
                            $scope.grid.data = dataSet.slice((grid.currentPage - 1) * grid.pageSize, (grid.pageSize * grid.currentPage));
                            $scope.grid.totalCount = dataSet.length;
                        }, 2000);
                    }
            };
        });
        
      </script>
    </body>
</html>

Custom Cell Rendering

<!DOCTYPE html>
<html ng-app="example">
    <head>
        <title>ngReactGrid Basic Example</title>
        <link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
    </head>
    <body>
    
      <div ng-controller="BasicExampleController" style="width: 100%">
          <ng-react-grid grid="grid"></ng-react-grid><br />

          Selections: []<br />
          Clicked On Record: {}
      </div>
    
      <!-- Your JS Sources -->
      <script src="js/angular.min.js" type="text/javascript" ></script>
      <script src="js/react-0.10.0.js" type="text/javascript" ></script>
      <script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
      <script src="./dataSet.js"></script>
      <script type="text/javascript">
 
        angular.module("example", ['ngReactGrid'])
        .controller("BasicExampleController", function($scope, ngReactGridCheckbox) {
          $scope.selections = [];
          $scope.clickedOnRecord = {};
          var employees = [];
          
          for(var i = 0; i < 50; i++)
              employees.push({
                  firstName: "John " + i,
                  lastName: "Doe " + i
              });
          
          $scope.grid = {
              data: employees,
              columnDefs: [
              new ngReactGridCheckbox($scope.selections),
              {
                  field: "firstName",
                  displayName: "First Name",
                  render: function(row) {
                      return React.DOM.a({href:"javascript:", onClick: function() {
                          $scope.clickedOnRecord = row;
                      }}, row.firstName);
                  }
              },
              {
                  field: "lastName",
                  displayName: "Last Name"
              }]
            };
          });
        
      </script>
    </body>
</html>

Default Grid Options

{
    // Properties you can set
    columnDefs: [],
    data: [],
    height: 500,
    localMode: true,

    /**
     * Use this function when setting localMode = false,
     * it will be called for every change in page size, sort, search, or pagination.
     * @return void
     */
    getData: function() {
        var grid = this;
        // grid.currentPage
        // grid.search
        // grid.sortInfo.field, grid.sortInfo.dir
        // grid.pageSize
        
        // After making the server call, update the grid by simply setting the data and totalCount
        // $scope.grid.data = [], $scope.grid.totalCount = 0
    },
    totalCount: 0,
    pageSize: 25,
    pageSizes: [25, 50, 100],
    horizontalScroll: false,

    // Properties you can get, usually calculated after instantiation
    totalPages: 0, // calculated with pageSize and totalCount
    currentPage: 1,
    sortInfo: {
        field: "", // field property in columnDefs
        dir: "" // asc or desc
    },
    search: ""
}

Default Cell Options

{
    field: "", // prop key on the object, ie: {firstName: "John"}, your field would be "firstName"
    displayName: "", // this is the label that the grid will display on the column headers,
    render: function() {}, // use this function when you want a custom cell. It must return a string or React component
    sort: true, // this controls whether the grid allows sorting on this cell or not, default is true, set to false to disable
    width: "10%" // the default is 10%
}