有人可以帮助我在角上选择一个剑道网格行编程。我可以逐行选择。我无法找出一种方法来选择一行，如果它的列的内容。
HTML: <body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div kendo-grid="myGrid" k-options="myOptions" k-selectable="'row'" k-on-change="myGridChange()"></div>
</body>
JS:
var app = angular.module('plunker', ['kendo.directives']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.myOptions = {
columns:[
{
field: 'ID'
},
{
field: 'FirstName'
},
{
field: 'LastName'
},
],
dataSource: [
{ID:139, FirstName:'John', LastName:'Doe'},
{ID:250, FirstName:'Jane', LastName:'Smith'},
{ID:376, FirstName:'Henry', LastName:'Rocks'}
],
dataBound:function(e) {
var grid = e.sender;
grid.select("tr:eq(2)");
grid.select("tr[FirstName='Henry'])"); // This doesn't work
}
};
$scope.myGridChange = function(){
var selectedRows = $scope.myGrid.select(); // This doesn't work
console.log($scope.myGrid.dataItem(selectedRows[0]));
};
});
另外，当以编程方式选择一行时，我在网格更改事件中得到一个错误。当手动选择row时，它可以正常工作。
这是我的活塞http://plnkr.co/edit/PpDuSR10xNOxOVirDpfN?p=preview
将您的dataBound更改为this，这将搜索整行搜索该搜索词:
dataBound:function(e) {
var searchTerm = "Henry";
var grid = e.sender;
grid.select("tr:contains('" + searchTerm + "')");
}
或者只搜索单列，这样做:
dataBound:function(e) {
var grid = e.sender;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.FirstName=="Henry"){
grid.select(this);
}
});
}
对于控制台错误，将id="grid"添加到索引页上的网格中，并将myGridChange替换为:
$scope.myGridChange = function(){
var grid = $scope.myGrid;
if(!grid)
grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
var data = grid.dataItem(selectedRows[0]);
console.log("The name is " + data.FirstName + ", "+ data.FirstName + " " + data.LastName);
};
您得到控制台错误，因为网格没有附加到数据库绑定函数中select命令的$scope上，导致网格引用为空。我不太了解angular JS，但我在上面做了一个hack解决方案，通过分配网格和ID，然后从ID选择器中获取网格。
您的"tr"应该基于id/uid。如果你检查元素，它会告诉你在表行中有什么属性。
dataBound:function(e) {
var grid = e.sender;
var data = grid._data; //this is your array of data. make sure you check what's in your object array. log it to see.
data.forEach(function(entry) {
if($scope.name === entry.name){
grid.select('tr[data-uid="' + entry.uid + '"]');
}
})
},
同样的问题在这里:调用$scope.myGrid.select(someRow)不起作用。代码不会抛出异常，只是简单地忽略调用。
让它工作，我把它放在setTimeout:
setTimeout(function () {
$scope.grid.select(someRow);
});
它不是很优雅，但它没有太多的LoC。我希望Telerik能在以后的版本中修复这个问题。
程序员
使用你正在使用的剑道版本，可能是不可能的。使用最新版本，您可以这样做:
改进myGridChange():
1。改变
k-on-change="myGridChange()"
k-on-change="myGridChange( dataItem )"
2。改变
$scope.myGridChange = function(){
// some code
}
$scope.myGridChange = function( dataItem ){
// dataItem will contain the row that was selected
}
基本上你应该把选定的行保存在你的模型/控制器的某个地方。
以编程方式选择行
$scope.myGrid.select(); // this will not work.
这是把剑道代码和AngularJs混在一起。有时我们不得不这样做，但让我们尽量避免它。
简单的回答是没有办法做到。你要做的是:
- 为行添加CSS样式
- 修改你的模型以记住哪一行是通过编程选择的
详细答案在我的网页上。是的，我经历过和你一样的痛苦。