在做的查询工具,它有一个填写的角度形式,然后在提交时它使用 AJAX,它返回 JSON,然后将其渲染到 ui-grid 中,JSON 响应看起来像
{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
{first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
{first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}
我正在处理 PHP 和角度,因此如果需要,我可以完全控制此 JSON 响应。当我呈现来自第一个 AJAX 调用的 JSON 响应时,我遇到了一个问题,然后我在同一页面上运行另一个单独的 AJAX 调用并获取一个新数据集:这个新数据集不会呈现任何不在原始数据集中的列。这是非常有问题的,因为当没有一列相同时,表格基本上被清除了,而且我经常需要在这个单页应用程序中将完全不同的数据加载到 ui-grid 中。
收到 JSON 后,我只需将jsonResult.results
绑定到 ui-grid 绑定到的旧$scope.myData
变量。
我已经做了一个孤立这个问题的笨蛋。加载带有"朋克"列的数据集,然后单击"交换数据"将尝试加载具有"员工"列而不是"朋克"列的数据集。到目前为止,我已经研究了当 $scope.myData 变量使用 $watch 更改时将刷新或重新加载的指令,并研究了找到类似 $scope.columnDefs 的东西来让 ui-grid 知道。对 angular 和 javascript 相对较新,所以指令仍然有点超出我的头脑。
我已经稍微更新了你的 plunker:
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'employee' }
];
$scope.gridOpts.data = data2;
//punk column changes to employee
}
else {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'punk' }
];
$scope.gridOpts.data = data1;
//employee column changes to punk
}
};
http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview
由于您的 json 中有列,因此应该很容易做到。
在 Kevin Sage 的回答和 plunker 示例的帮助下,我想出了另一块...... 如果使用向后兼容的"field"属性,则当两组列定义之间存在字段名称重叠时,交换将无法正常工作。 在这种情况下,列标题和列宽无法正确呈现。 使用列定义的"name"属性可以更正此问题。
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'employee' }
];
$scope.gridOpts.data = data2;
//punk column changes to employee
}
else {
$scope.gridOpts.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'punk' }
];
$scope.gridOpts.data = data1;
//employee column changes to punk
}
};
这里的例子:普伦克
我的解决方案:
$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest
$timeout(function() {
gridOptions.data = res;
});
});