所需的css与js文件:
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
主页layout:
<section data-role="layout" data-id="mainlayout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#left-drawer" data-align="left" data-icon="mydrawer"></a>
<span data-role="view-title"></span>
<a data-role="button" class="nav-button" data-align="right" data-icon="add" data-rel="modalview" href="#addUnivModalView" data-click="initAddUniversity"></a>
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#universities" data-icon="bookmarks">Universities</a>
<a href="#settings" data-icon="settings">Settings</a>
</div>
</footer>
</section>
listview:
<div id="universities" data-role="view" data-title="Universities" data-layout="mainlayout" data-init="universityListInit">
<ul id="university-listview"></ul>
</div>
listview模板:
<script type="text/x-kendo-tmpl" id="university-listview-template">
<div class="university">
<a style="text-decoration:none;">
<h3>#:UniversityName#</h3>
<p>Location: #:Location#</p>
<p>WebSite: #:WebSite#</p>
<p>University ID: #:UniversityId#</p>
</a>
</div>
</script>
listview初始化:
var crudServiceBaseUrl = "http://192.168.***.****/university/";
var dataSource1 = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "getuniversity",
dataType: "json"
}
},
schema: {
model: {
id: "universityId",
fields: {
UniversityId: { type: "string" },
UniversityName: { type: "string" },
Location: { type: "string" },
WebSite: { type: "string" }
}
}
}
});
function universityListInit() {
$("#university-listview").kendoMobileListView({
dataSource: dataSource1,
template: $("#university-listview-template").text(),
filterable: {
field: "UniversityName",
operator: "startswith"
},
virtualViewSize: 100,
}).kendoTouch({
filter: ">li",
enableSwipe: true,
tap: univNavigate
});
}
listview点击跳转:
function univNavigate(e) {
var itemUID = $(e.touch.currentTarget).data("uid");
kendo.mobile.application.navigate("#univDetail?uid=" + itemUID);
}
function univDetailShow(e) {
var model = dataSource1.getByUid(e.view.params.uid);
kendo.bind(e.view.element, model, kendo.mobile.ui);
collegeListInit(); // 初始化detail页面的listview
}
// 二级页面跳转至三级页面
function colNavigate(e) {
var itemUID = $(e.touch.currentTarget).data("uid");
if (isEditUniv) { //判断是否处在编辑状态
$("#leaveEditUnivToColAlertModalView").kendoMobileModalView("open");
itemCID = itemUID;
} else {
kendo.mobile.application.navigate("#colDetail?uid=" + itemUID);
}
}
二级页面的显示:
function colNavi(itemUID) {
kendo.mobile.application.navigate("#colDetail?uid=" + itemUID);
}
function colDetailShow(e) {
var model = dataSource2.getByUid(e.view.params.uid);
kendo.bind(e.view.element, model, kendo.mobile.ui);
}
【表单自定义验证:】
增:
function saveAddUniversity() {
var universityName = null;
var webSite = null;
var location = null;
universityName = $("#txtAddUnivName").val();
webSite = $("#txtAddWebSite").val();
location = $("#txtAddLocation").val();
if (universityName.length == 0) {
$("#txtAddUnivName").addClass("invalid");
} else {
$("#txtAddUnivName").removeClass("invalid");
}
if (location.length == 0) {
$("#txtAddLocation").addClass("invalid");
} else {
$("#txtAddLocation").removeClass("invalid");
}
if (webSite.length == 0) {
$("#txtAddWebSite").addClass("invalid");
} else {
$("#txtAddWebSite").removeClass("invalid");
}
if ((universityName.length > 0) && (location.length > 0) && (webSite.length > 0)) {
submitAddUniversity(universityName, webSite, location);
}
}
function submitAddUniversity(universityName, webSite, location) {
var data = { UniversityName: encodeURIComponent(universityName), WebSite: encodeURIComponent(webSite), Location: encodeURIComponent(location) };
$.ajax({
url: crudServiceBaseUrl + "InsertUniversity",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function (result) {
if (result == "Success") {
console.log("save add university success[saveAddUniversity]");
} else {
console.log("save add university faild[saveAddUniversity]");
return;
}
}
});
$("#addUnivModalView").kendoMobileModalView("close");
//resetAddUniversity();
refresh();
}
删:
function deleteUniversity() {
var uid = null;
uid = $("#txtUnivID").val();
if (uid.length == 0) {
alert("Did not find college id from txtUnivID[deleteUniversity]");
return;
}
var data = { UniversityId: uid };
$.ajax({
url: crudServiceBaseUrl + "DeleteUniversity",
data: JSON.stringify(data),
type: "POST",
dataType: "JSON",
success: function (result) {
if (result == "Success") {
console.log("delete university success[deleteUniversity]");
} else {
console.log("delete university faild[deleteUniversity]");
}
}
});
$("#deleteUnivModalView").kendoMobileModalView("close");
$("#deleteUnivSuccessModalView").kendoMobileModalView("open");
}
改:
function saveEditedUniversity() {
isEditUniv = false;
univEditState(isEditUniv);
var universityName = null;
var webSite = null;
var location = null;
var universityId = null;
universityName = $("#txtUnivName").val();
webSite = $("#txtWebSite").val();
location = $("#txtLocation").val();
universityId = $("#txtUnivID").val();
if (universityName.length == 0) {
alert("Did not find university name id from txtUnivName[saveEditedUniversity]");
return;
}
if (webSite.length == 0) {
alert("Did not find web site from txtWebSite[saveEditedUniversity]");
return;
}
if (location.length == 0) {
alert("Did not find location from txtLocation[saveEditedUniversity]");
return;
}
if (universityId.length == 0) {
alert("Did not find university id from txtUnivID[saveEditedUniversity]");
return;
}
var data = { UniversityName: encodeURIComponent(universityName), WebSite: encodeURIComponent(webSite), Location: encodeURIComponent(location), UniversityId: encodeURIComponent(universityId) };
$.ajax({
url: crudServiceBaseUrl + "UpdateUniversity",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function (result) {
if (result == "Success") {
console.log("save edited university success[saveEditedUniversity]");
} else {
console.log("save edited university faild[saveEditedUniversity]");
return;
}
}
});
$("#saveUnivModalView").kendoMobileModalView("close");
}
防止未保存编辑:
function backToUnivList(e) {
e.preventDefault();
if (isEditUniv) {
$("#leaveEditUnivAlertModalView").kendoMobileModalView("open");
} else {
kendo.mobile.application.navigate("#:back");
}
}
一些CSS:
<style scoped>
.university h1 {
font-family: Arial,Verdana,Sans-serif;
font-size: 1.5em;
font-weight: bold;
line-height: 1.4em;
margin: 0;
padding: 0;
height: 1.3em;
overflow: hidden;
}
.university p {
font-size: 1em;
margin: 0;
padding: .3em 0 0;
}
.invalid {
border: 1px dashed red !important;
}
hr {
height: 1px;
border: none;
border-top: 1px double #CCCCCC;
}
.km-mydrawer:after,
.km-mydrawer:before {
content: "\e0f1";
}
.km-mysave:after,
.km-mysave:before {
content: " \e037";
}
</style>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
以上就是一个简单的kendo UI listview点击跳转显示detail页面的例子,重复代码未给出。