Javascript kenodui treeview滚动到节点问题
我有一个带两个标签的标签条。在第一个选项卡中，我有一个搜索文本框和网格来显示搜索结果。当用户使用搜索框找到项目时，他们在网格中选择项目，它将选项卡切换到树状视图，并在树状视图中选择项目（所有这些组件都是kendo ui mvc） 搜索正在工作，并且treeview项目已被选中，但是，它尚未向下滚动到视图中的项目位置。这是我的代码，但无法让滚动工作。我正在使用jquery插件scrollto Index.cshtml：Javascript kenodui treeview滚动到节点问题,javascript,kendo-ui,kendo-asp.net-mvc,kendo-treeview,Javascript,Kendo Ui,Kendo Asp.net Mvc,Kendo Treeview,我有一个带两个标签的标签条。在第一个选项卡中，我有一个搜索文本框和网格来显示搜索结果。当用户使用搜索框找到项目时，他们在网格中选择项目，它将选项卡切换到树状视图，并在树状视图中选择项目（所有这些组件都是kendo ui mvc） 搜索正在工作，并且treeview项目已被选中，但是，它尚未向下滚动到视图中的项目位置。这是我的代码，但无法让滚动工作。我正在使用jquery插件scrollto Index.cshtml： <body> <div class="contain
<body>
<div class="container-fluid">
<section style="padding-top:10px;"></section>
<div style="float:left; position:fixed">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Activate("onTabActivate")
)
.Items(tabstrip =>
{
tabstrip.Add().Text("Search")
.Selected(false)
.Content(@<text>
<div>
<div style="padding-bottom:5px; padding-bottom:5px;">
<input type="text" class="clearable" id="search" name="search" placeholder="Enter a Account Name or Number" />
</div>
@(Html.Kendo().Grid<SageEMS.CRM.WebApp.DataService.AccountTreeItem>()
.Name("searchGrid")
.Events(events => events
.Change("onGridSelect"))
.Columns(columns =>
{
columns.Bound(acc => acc.AccountName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(w => w.Account))
.ServerOperation(false)
.Read(read => read.Action("LoadSearchResult", "Home").Data("searchAccounts"))
)
.Pageable()
.Selectable()
)
</div>
</text>);
tabstrip.Add().Text("Accounts")
.Selected(false)
.Content(@<text>
<div class='k-scrollable' style='height: 400px; overflow: auto;'>
@(Html.Kendo().TreeView()
.Name("treeview")
.Events(events => events
.Expand("onExpand")
.Select("onTreeviewSelect"))
.DataTextField("AccountName")
.DataSource(dataSource => dataSource
.Model(m => m
.Id("Account")
.HasChildren("HasChildren"))
.Read(read => read.Action("LoadAccountTree", "Home").Data("loadChildren"))
)
))
</div>
</text>);
})
)
</div>
<div id="dvSections" style="padding-left:450px;">
@{Html.RenderPartial("Sections", Model);}
</div>
</div>
<script>
var _selectedAccount = null;
var _selectedTrackingItem = null;
var _searchValue;
var _selectedGridItem = null;
var $search = $('#search');
var $treeview = $("#treeview");
var $searchGrid = $("#searchGrid");
var $txtSelectedAccount = $('#txtSelectedAccount');
var $tabstrip = $("#tabstrip");
$search.on('change keyup copy paste cut', function () {
// set delay for fast typing
setTimeout(function () {
_searchValue = $('#search').val();
$searchGrid.data("kendoGrid").dataSource.read();
}, 500);
});
$(function () {
$txtSelectedAccount.text("All");
$treeview.select(".k-first");
});
function searchAccounts() {
if (_searchValue) {
return {
searchTerm: _searchValue
};
}
}
function onExpand(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function loadChildren() {
if (_selectedAccount) {
return {
id: _selectedAccount
};
}
}
function onTabActivate(e) {
var tab = $(e.item).find("> .k-link").text();
if (tab == "Search")
$search.focus();
if (tab == "Accounts") {
if (_selectedGridItem == null) return;
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
}
}
function onTreeviewSelect(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function onGridSelect(e) {
var grid = $searchGrid.data("kendoGrid");
_selectedGridItem = grid.dataItem(grid.select());
var tabStrip = $tabstrip.kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
// Get the tree item and select it
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
else
findExpandSearch(_selectedGridItem.id);
}
function getTreeItem(id) {
var treeView = $treeview.data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(id);
return dataItem;
}
function findExpandSearch(id) {
// item is not loaded in treeview yet, find parent and trigger load children and search again
var url = "@Url.Action("LoadTreePath")";
$.ajax({
url: url,
type: "POST",
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (data) {
if (data && data.length > 1) {
$.each(data, function (index, value) {
_selectedAccount = value;
loadChildren();
});
var dataItem = getTreeItem(data[0]);
if (dataItem)
selectNodeInTree(dataItem);
}
},
error: function (error, h, status) {
alert(error.responseText);
}
});
}
function selectNodeInTree(item) {
var treeView = $treeview.data("kendoTreeView");
var node = treeView.findByUid(item.uid);
if (node) {
treeView.select(node);
treeView.trigger("select", { node: node });
treeView.element.closest(".k-scrollable").scrollTo(treeView.select(), 450);
}
else
alert('Account not found in tree.');
}
</script>
<script src="../../Content/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
@（Html.Kendo（）.TabStrip（））
.名称（“tabstrip”）
.Events（Events=>Events
.激活（“onTabActivate”）
)
.Items（tabstrip=>
{
tabstrip.Add（）.Text（“搜索”）
.已选择（错误）
.内容(@
@（Html.Kendo（）.Grid（））
.Name（“搜索网格”）
.Events（Events=>Events
.Change（“onGridSelect”））
.列（列=>
{
columns.Bound（acc=>acc.AccountName）；
})
.DataSource（DataSource=>DataSource
.Ajax（）
.Model（Model=>Model.Id（w=>w.Account））
.ServerOperation（错误）
.Read（Read=>Read.Action（“LoadSearchResult”、“Home”）.Data（“searchAccounts”））
)
.Pageable（）
.可选（）
)
);
tabstrip.Add（）.Text（“帐户”）
.已选择（错误）
.内容(@
@（Html.Kendo（）.TreeView（））
.名称（“树视图”）
.Events（Events=>Events
.扩展（“onExpand”）
.选择（“onTreeviewSelect”））
.DataTextField（“AccountName”）
.DataSource（DataSource=>DataSource
.Model（m=>m
.Id（“账户”）
.HasChildren（“HasChildren”））
.Read（Read=>Read.Action（“LoadAccountTree”、“Home”）.Data（“loadChildren”））
)
))
);
})
)
@{Html.RenderPartial（“Sections”，Model）；}
var _selectedAccount=null；
var _selectedTrackingItem=null；
var_值；
var _selectedGridItem=null；
var$search=$（“#search”）；
var$treeview=$（“#treeview”）；
var$searchGrid=$（“#searchGrid”）；
变量$txtSelectedAccount=$（“#txtSelectedAccount”）；
var$tabstrip=$（“#tabstrip”）；
$search.on（'change keyup copy paste cut'，函数（）{
//设置快速键入的延迟
setTimeout（函数（）{
_searchValue=$（'#search'）.val（）；
$searchGrid.data（“kendoGrid”）.dataSource.read（）；
}, 500);
});
$（函数（）{
$txtSelectedAccount.text（“全部”）；
$treeview.select（“.k-first”）；
});
函数searchAccounts（）{
如果（_searchValue）{
返回{
searchTerm:\u searchValue
};
}
}
函数onExpand（e）{
_selectedAccount=$treeview.getKendoTreeView（）.dataItem（e.node）.id；
$txtSelectedAccount.text（this.text（e.node））；
}
函数loadChildren（）{
如果（_selectedAccount）{
返回{
id:\u所选帐户
};
}
}
函数onTabActivate（e）{
var tab=$（e.item.find（“>.k-link”）.text（）；
如果（制表符=“搜索”）
$search.focus（）；
如果（制表符=“账户”）{
if（_selectedGridItem==null）返回；
var dataItem=getTreeItem（_selectedGridItem.id）；
如果（数据项）
选择NodeIntree（数据项）；
}
}
功能onTreeviewSelect（e）{
_selectedAccount=$treeview.getKendoTreeView（）.dataItem（e.node）.id；
$txtSelectedAccount.text（this.text（e.node））；
}
功能选择（e）{
var grid=$searchGrid.data（“kendoGrid”）；
_selectedGridItem=grid.dataItem（grid.select（））；
var tabStrip=$tabStrip.kendoTabStrip（）.data（“kendoTabStrip”）；
tabStrip.select（1）；
//获取树项目并选择它
var dataItem=getTreeItem（_selectedGridItem.id）；
如果（数据项）
选择NodeIntree（数据项）；
其他的
findExpandSearch（_selectedGridItem.id）；
}
函数getTreeItem（id）{
var treeView=$treeView.data（'kendoTreeView'）；
var dataSource=treeView.dataSource；
var dataItem=dataSource.get（id）；
返回数据项；
}
函数findExpandSearch（id）{
//项目尚未加载到treeview中，请查找父项并触发加载子项，然后再次搜索
var url=“@url.Action”（“LoadTreePath”）；
<div class='scrollable' style='height: 300px; overflow: auto;'>
<div id="treeview-left"></div>
</div>
tree.element.closest(".scrollable").scrollTo(tree.select(), 150)