Kendo中ListView 无分页控件显示和有分页控件显示
无分页ListView：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--引用-->
<script src="../js/kendo/jquery.min.js"></script>
<script src="../js/kendo/angular.min.js"></script>
<script src="../js/kendo/kendo.all.min.js"></script>
<script src="../js/kendo/cultures/kendo.culture.zh-CN.min.js"></script>
<script src="../js/kendo/messages/kendo.messages.zh-CN.min.js"></script>
<link href="../js/App_Themes/_Default/globle.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/bootstrap.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.uniform.min.css" rel="stylesheet" />
<style type="text/css">
.section{
width:700px;
}
</style>
</head>
<body>
<div class="globleWid">
<div class="section">
<div id="listPageView"></div>
</div>
</div>
<!--绑定模板-->
<script type="text-x-kendo-template" id="template">
<li><a href='javascript:' title="#=data.Title#">#=data.Title#</a><span class='pull-right news-time'>(#=data.Created_Time#)</span></li>
</script>
<script type="text/javascript">
var UserID = "";
var OrgID = "";
var Roles = "";
var DataUrl = "";//接口
var param = [
OrgIDs = OrgID,
Roles = Roles,
UserID = UserID,
];
$(document).ready(function () {
LoadListView();
});
function LoadListView() {
$.ajax({
url: DataUrl,
data: kendo.stringify(param),
type: "POST",
dataType: "json", //json格式
contentType: "application/json",
success: function (d) {
data = d;
//ListView列表
$("#listPageView").kendoListView({
dataSource: data.ReturnListModel, //数据源
template: kendo.template($("#template").html()) //列表显示模板
});
},
complete: function (d) {
},
error: function (e) {
console.log('Ins Error At Times!', e);
}
});
}
</script>
</body>
</html>
有分页ListView：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--引用-->
<script src="../js/kendo/jquery.min.js"></script>
<script src="../js/kendo/angular.min.js"></script>
<script src="../js/kendo/kendo.all.min.js"></script>
<script src="../js/kendo/cultures/kendo.culture.zh-CN.min.js"></script>
<script src="../js/kendo/messages/kendo.messages.zh-CN.min.js"></script>
<link href="../js/App_Themes/_Default/globle.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/bootstrap.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.uniform.min.css" rel="stylesheet" />
<style type="text/css">
.section{
width:700px;
}
</style>
</head>
<body>
<div class="globleWid">
<div class="section">
<div id="listPageView"></div> //ListView列表id
<div id="Pager"></div>//分页id
</div>
</div>
<!--绑定模板-->
<script type="text-x-kendo-template" id="template">
<li><a href='javascript:' title="#=data.Title#">#=data.Title#</a><span class='pull-right news-time'>(#=data.Created_Time#)</span></li>
</script>
<script type="text/javascript">
var UserID = "";
var OrgID = "";
var Roles = "";
var DataUrl = "";//接口
var param = [
OrgIDs = OrgID,
Roles = Roles,
UserID = UserID,
];
$(document).ready(function () {
LoadListView();
});
function LoadListView() {
$.ajax({
url: DataUrl,
data: kendo.stringify(param),
type: "POST",
dataType: "json", //json格式
contentType: "application/json",
success: function (d) {
data = d;
var dataSource = new kendo.data.DataSource({
data: data.ReturnListModel,
pageSize: 5 //每页显示5个数据
});
//分页
$("#Pager").kendoPager({
dataSource: dataSource //数据源
});
//ListView列表
$("#listPageView").kendoListView({
dataSource: dataSource, //数据源
template: kendo.template($("#template").html()) //列表显示模板
});
},
complete: function (d) {
},
error: function (e) {
console.log('Ins Error At Times!', e);
}
});
}
</script>
</body>
</html>
第二种带分页的ListView：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--引用-->
<script src="../js/kendo/jquery.min.js"></script>
<script src="../js/kendo/angular.min.js"></script>
<script src="../js/kendo/kendo.all.min.js"></script>
<script src="../js/kendo/cultures/kendo.culture.zh-CN.min.js"></script>
<script src="../js/kendo/messages/kendo.messages.zh-CN.min.js"></script>
<link href="../js/App_Themes/_Default/globle.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/bootstrap.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../js/App_Themes/_Default/styles/kendo.uniform.min.css" rel="stylesheet" />
<style type="text/css">
.section {
width: 700px;
}
</style>
</head>
<body>
<div class="globleWid">
<div class="section">
<div id="listPageView"></div> //ListView列表id
<div id="Pager"></div>//分页id
</div>
</div>
<!--绑定模板-->
<script type="text-x-kendo-template" id="template">
<li><a href='javascript:' title="#=data.Title#">#=data.Title#</a><span class='pull-right news-time'>(#=data.Created_Time#)</span></li>
</script>
<script type="text/javascript">
var UserID = "";
var OrgID = "";
var Roles = "";
var DataUrl = "";//接口
var param = [
OrgIDs = OrgID,
Roles = Roles,
UserID = UserID,
];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: DataUrl,
data: kendo.stringify(param),
type: "POST",
dataType: "json", //json格式
contentType: "application/json",
},
parameterMap: function (options, operation) {
if (operation == "read") {
var parameter = param;
parameter.StartIndex = (options.page - 1) * options.pageSize;
parameter.EndIndex = options.page * options.pageSize;
return kendo.stringify(parameter);
}
else { return options; }
}
},
batch: true,
pageSize: 5,
schema: {
data: function (d) {
return d.ReturnListModel;
},
total: function (d) {
return d.Count;
}
},
serverPaging: true
});
//分页
$("#Pager").kendoPager({
dataSource: dataSource //数据源
});
//ListView列表
$("#listPageView").kendoListView({
dataSource: dataSource, //数据源
template: kendo.template($("#template").html()) //列表显示模板
});
})
</script>
</body>
</html>
