Javascript 剑道网格列显示/隐藏制作问题与80+;柱
我有一个剑道网格,大约有80列。基于某种逻辑,我隐藏/显示列。前20列是静态的,其余60列取决于员工数量(例如:-如果有20名员工,则只显示20列)。到目前为止,所有这60列都被隐藏。但当将40多名员工的数据加载到网格浏览器时,显示没有响应。即,显示/隐藏列需要时间 请检查我的代码以加载数据Javascript 剑道网格列显示/隐藏制作问题与80+;柱,javascript,jquery,asp.net-mvc-4,kendo-grid,Javascript,Jquery,Asp.net Mvc 4,Kendo Grid,我有一个剑道网格,大约有80列。基于某种逻辑,我隐藏/显示列。前20列是静态的,其余60列取决于员工数量(例如:-如果有20名员工,则只显示20列)。到目前为止,所有这60列都被隐藏。但当将40多名员工的数据加载到网格浏览器时,显示没有响应。即,显示/隐藏列需要时间 请检查我的代码以加载数据 $.ajax({ type: "POST", url: '@Url.Action("GetData", "Employees")',
$.ajax({
type: "POST",
url: '@Url.Action("GetData", "Employees")',
dataType: "json",
data: param,
success: function (response) {
if (response != null) {
var empList = response.Employees;
grid.dataSource.data([]);
grid.dataSource.data(response.Items);
//To change the name header and hide/show crew name column
if (empList != null) {
var listIndex = 0;
$('#grdEmployees th[coltype]').each(function (i) {
if ($(this).data().title == "HideColumn") {
var dataField = "Crew" + (listIndex + 1);
$("#grdEmployees thead [data-field=" + dataField + "] .k-link").html(empList[listIndex].Name.toString());
if (empList[listIndex].Name.toString() == "HideColumn") {
$('#grdEmployees').data("kendoGrid").hideColumn(dataField);
} else {
$('#grdEmployees').data("kendoGrid").showColumn(dataField);
}
listIndex++;
}
});
}
}
},
error: function (err) {
console.log(JSON.stringify(err));
}
});
请让我知道做同样事情的任何替代方案 我已经解决了这个问题。当我们使用剑道网格的
hideColumn()
和showColumn()
方法时,这需要时间。所以我用普通的jQueryhide()
和show()
方法替换了它
检查下面的代码
我换了
if (empList[listIndex].Name.toString() == "HideColumn") {
$('#grdEmployees').data("kendoGrid").hideColumn(dataField);
} else {
$('#grdEmployees').data("kendoGrid").showColumn(dataField);
}
与
这将对你有用
var colIdx = $(this).index() + 1;
if (crewNameList[listIndex].Name.toString() == "HideColumn") {
$("#grdEmployees table th:nth-child(" + colIdx + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").hide();
} else {
$("#grdEmployees table th:nth-child(" + (colIdx) + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").show();
}