我的视图页面中有一个 Kendo UI Grid(MVVM 概念)。绑定来自视图模型的数据。当我减小页面大小时。
Kendo UI 网格更改为 Kendo UI Listview。看这张图片:
我怎样才能做到这一点?
我的视图页面中有一个 Kendo UI Grid(MVVM 概念)。绑定来自视图模型的数据。当我减小页面大小时。
Kendo UI 网格更改为 Kendo UI Listview。看这张图片:
我怎样才能做到这一点?
为 Grid 和 ListView 定义一个数据源。
var ds = {
data : ...,
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
};
然后DIV
为 Grid 和 ListView 定义一个:
<div id="grid"></div>
<div id="list"></div>
并初始化 Grid 和 ListView:
$("#grid").kendoGrid({
dataSource: ds,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
]
});
$("#list").kendoListView({
dataSource: ds,
template : $("#template").html()
});
现在,您应该根据宽度显示一个或另一个:
// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
CSS类在哪里ob-hidden
:
.ob-hidden {
display: none;
visibility: hidden;
width: 1px;
}
现在,剩下的唯一问题是根据宽度调用一个或另一个。您可以使用 jQueryresize
事件来检测更改。
因此,将 ListView 和 Grid 都包含在一个DIV
withid
容器中:
<div id="container">
<div id="grid"></div>
<div id="list" class="ob-hidden"></div>
</div>
并将resize
处理程序定义为:
$("window").on("resize", function(e) {
var width = $("#container").width();
console.log(width);
if (width < 300) {
console.log("list");
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
} else {
console.log("grid");
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
}
});
重要提示:无论您为获得相同的结果做什么,请不要在每次有resize
. 这是一个计算成本很高的操作。
在此处查看实际操作:http: //jsfiddle.net/OnaBai/JYXzJ/3/