我正在开发一个反应和角度js网格。
这是我的代码：
在页面加载时，它会调用gen(dataSetOne);函数并完美地加载网格。但是第二次当我尝试通过按钮单击加载具有不同json值集的表时，它失败了！任何想法如何纠正它
<!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>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<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">
gen(dataSetOne);
function gen(dataSet){
console.log(dataSet);
angular.module("example", ['ngReactGrid'])
.controller("BasicExampleController", function ($scope, $timeout,
ngReactGridCheckbox, ngReactGridTextField) {
console.log("in");
$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,
state: rec.state,
zip: rec.zip,
country: rec.country
},
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.city",
columnFilter: true,
displayName: "city"
},
{
field: "user.city",
columnFilter: true,
displayName: "city"
},
{
field: "user.state",
columnFilter: true,
displayName: "state"
},
{
field: "user.zip",
columnFilter: true,
displayName: "zip"
},
{
field: "user.country",
columnFilter: true,
displayName: "country"
}
]
};
});
}
function make(dataSet){
console.log("here" + dataSet);
}
</script>
<button id="gen" onclick="gen(dataSetTwo)">Generate</button>
</body>
</html>
var dataSetTwo = [{
"firstName": "ViVVVjay0",
"lastName": "Vijay0",
"city": "New York0",
"state": "New York0",
"zip": "192030",
"country": "United States0",
"phone": "123-455-67530",
"email": "test@gmail.com0"
}, {
"firstName": "JJJJJJJJJose1",
"lastName": "Garcia1",
"city": "New York1",
"state": "New York1",
"zip": "192031",
"country": "United States1",
"phone": "123-455-67531",
"email": "test@gmail.com1"
}];
var dataSetOne = [{
"firstName": "Vijay0",
"lastName": "Vijay0",
"city": "New York0",
"state": "New York0",
"zip": "192030",
"country": "United States0",
"phone": "123-455-67530",
"email": "test@gmail.com0"
}, {
"firstName": "Jose1",
"lastName": "Garcia1",
"city": "New York1",
"state": "New York1",
"zip": "192031",
"country": "United States1",
"phone": "123-455-67531",
"email": "test@gmail.com1"
}];
这是我的小提琴