You*_*mer 5 angularjs kendo-grid
有人可以帮助我以编程方式选择角度的剑道网格行。我可以逐行选择一个行。我无法找出一种方法来选择基于一行的内容(如果其列的内容)。
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>
Run Code Online (Sandbox Code Playgroud)
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]));
};
});
Run Code Online (Sandbox Code Playgroud)
另外,以编程方式选择一行时,我的网格更改事件出现错误。手动选择行时,它可以正常工作。
将您的 dataBound 更改为此,这会在整行中搜索该搜索词:
dataBound:function(e) {
var searchTerm = "Henry";
var grid = e.sender;
grid.select("tr:contains('" + searchTerm + "')");
}
Run Code Online (Sandbox Code Playgroud)
或者要仅基于单个列进行搜索,请执行以下操作:
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);
}
});
}
Run Code Online (Sandbox Code Playgroud)
至于控制台错误,请添加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);
};
Run Code Online (Sandbox Code Playgroud)
您收到控制台错误是因为网格未附加到数据绑定函数中 select 命令上的 $scope,导致网格引用为空。我对 Angular JS 不太了解,但我在上面做了一个 hack 解决方案,方法是分配网格和 ID,然后从该 ID 选择器获取网格。
| 归档时间: |
|
| 查看次数: |
13626 次 |
| 最近记录: |