kendo ui 访问数据库数据,绘制jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<%
    Search isc = new Search(request);
%>

<script type="text/javascript">
    var params = {
        custId: <%=isc.getValue("custId")%>
    };
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>个人资料</title>
<meta charset="utf-8">
<%@ include file="common.jsp" %>
<link href="<%=basePath%>/content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="<%=basePath%>/styles/kendo.default.min.css" rel="stylesheet">
<link href="<%=basePath%>/styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="<%=basePath%>/styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="<%=basePath%>/js/angular.min.js"></script>
<script type="text/javascript">
    kendo.culture("zh-CN"); 
</script>
</head>
<body>


    <div id="detail" data-role="view" data-title="个人资料"
        data-layout="checklayout" data-show="showPerson">
        <ul data-role="listview" data-style="inset" id="dataPersonView" data-type="group">
        </ul>
    </div>

    <div data-role="layout" data-id="checklayout">
    <header data-role="header">
            <div data-role="navbar">
                <a  data-role="button"  onclick="goindex()"
                     data-align="left"><img alt="" style="height:80%" src="<%=basePath%>/images/home.png"></a>
                     <span data-role="view-title"</span> 
                <a data-align="right" data-role="button"  onclick="history.go(-1)">
                <img alt="" style="height:90%" src="<%=basePath%>/images/back.png">
                </a>
            </div>
        </header>
    </div>


<script type="script/x-kendo-template" id="initPerson">
<hr/>
<p class="til">基本信息&nbsp;<i class="fa fa-id-card" aria-hidden="true"></i></p>
<hr/>
<ul >
    #if(userName==null){userName=" "}#
    <p><i class="fa fa-street-view" aria-hidden="true"></i>
        用户名:<span class="list-item-data">#= userName#</span></p>
    <br/>
    #if(sex==null){sex=" "}else{if(sex=="F"){sex="男"}else if(sex=="M"){sex="女"}}#
    <p><i class="fa fa-venus-double" aria-hidden="true"></i>&nbsp;&nbsp;
        性别:<span class="list-item-data">#= sex #</span></p>
    <br/>
    #if(empName==null){empName=" "}#
    <p>
        真实姓名:<span class="list-item-data">#=empName#</span><p>
    <br/>
    #if(depPhone==null){depPhone=" "}#
    <p><i class="fa fa-mobile" aria-hidden="true"></i>
        电话:<span class="list-item-data">#= depPhone#</span></p>
    <br/>
    #if(depName==null){depName=" "}#
    <p><i class="fa fa-handshake-o" aria-hidden="true"></i>
        所在部门:<span class="list-item-data">#=depName#</span></p>
    <br/>
    #if(workPhone==null){workPhone=" "}#
    <p><i class="fa fa-volume-control-phone" aria-hidden="true"></i>
        公司电话:<span class="list-item-data">#=workPhone#</span></p>
    <br/>
    #if(address==null){address=" "}#
    <p><i class="fa fa-home" aria-hidden="true"></i>
        地址:<span class="list-item-data">#=address#</span></p>
    <br/>
    #if(email==null){email=" "}#
    <p><i class="fa fa-envelope" aria-hidden="true"></i>
        邮箱:<span class="list-item-data">#=email#</span></p>
    <br/>
    #if(memo==null){ffpType=" "}#
    <p><i class="fa fa-pencil-square-o" aria-hidden="true"></i>
        备注:<span class="list-item-data">#=memo#</span></p>
</ul>
</script>

<!-- </ul><hr/><p class="til">部门信息&nbsp;<i class="fa fa-users" aria-hidden="true"></i></p><hr/>
<ul> -->

<style>
.til{
    font-weight:bold;
    color:#000080;
}
#dataPersonView ul p {
    color:#0A0A0A;
}
    hr{
    color:honeydew;
    }
.km-list, .km-listview {
        border-left:1px solid color:ghostwhite;
        border-right:1px solid color:ghostwhite;
}


</style>
    <script>
    function goindex(){
        var path = "<%=basePath%>" + "/v2/phone/home";
        window.location.href = path;
    }

        var path ='<%=basePath%>';
        var dataPerson = new kendo.data.DataSource({
            transport : {
                read : {
                    //获取数据
                    url : path + "/v2/mobile/account/accInfo",
                    type : 'get', 
                    contentType : 'application/json; charset=utf-8',
                },
                parameterMap : function(data, type) { //X
                    if (type == "read") {
                        return {
                        page : data.page,//分页   
                            pageSize : data.pageSize
                        };
                    }
                }
            },
            schema : {//加载数据时的遮罩
                total : function(d) {
                    return d.records;
                },
                data : function(d) {
                    return d.gridObjectData;
                }
            },
            serverPaging : true,
            serverSorting : true,
            pageSize : 5
        });

        function showPerson() {
            console.log(dataPerson);
            $("#dataPersonView").kendoMobileListView({
                dataSource : dataPerson,//数据源
                template : $("#initPerson").html(),
                endlessScroll : true,
                pullToRefresh : true
            })
        }

        dataPerson.read();
    </script>


<script type="text/javascript">
//reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;


</script>


<script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body,{
            platform:'ios'
        });
    </script>

<body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值