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%
}
