zoukankan      html  css  js  c++  java

  • 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{
            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{
            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 {
             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>

    　　
  • 相关阅读:
    Cocos2dx 学习笔记(6) 场景对象的移动
    Torque2D MIT 学习笔记(14) 动画资源(AnimationAsset)
    Cocos2dx 学习笔记(4) 对笔记3中触摸控制的第二种实现
    Torque2D MIT 学习笔记(12) 资源基类(AssetBase)
    Torque2D MIT 实战记录: 塔防进度(2)
    Torque2D MIT 学习笔记(17) 如何遍历与查询资源
    Torque2D MIT 实战记录: Isometric(等轴视距)
    Torque2D MIT 脚本阅读(4) ChainToy
    Torque2D MIT 实战记录: 塔防进度(1)
    Torque2D MIT 学习笔记(16) 物理系统(2)
  • 原文地址：https://www.cnblogs.com/ths0201/p/5626969.html
Copyright © 2011-2022 走看看