Kendo UI Listview 跳转与表单简单验证

所需的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页面的例子，重复代码未给出。