Kendo UI 框架 HTML5
来源：互联网 发布：mac电脑如何重装系统 编辑：程序博客网 时间：2024/04/28 22:48
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。
Kendo UI包含了开发现代JavaScript,JQuery框架开发所需要的所有一切，
包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
Web Demos
Mobile Demos
DataViz Demos
在线演示地址：http://demos.kendoui.com/
最新Kendo UI框架下载：http://www.kendoui.com/get-kendo-ui.aspx
如何在项目中使用Kendo UI框架
1、下载Kendo UI 框架
DownLoad
2、需要引用Kendo UI CSS和JavaScript资源文件到项目中
1）Kendo UI Web
<head>
<!--In the header of your page, paste the following for Kendo UI Web styles--> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <!--Then paste the following for Kendo UI Web scripts--> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.web.min.js" type="text/javascript"></script></head>
2）Kendo UI DataViz
<!--In the header of your page, paste the following for Kendo UI DataViz style sheet --> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> <!--Then paste the following for Kendo UI DataViz scripts--> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.dataviz.min.js" type="text/javascript"></script>
3）Kendo UI Mobile
<!--In the header of your page, paste the following for Kendo UI Mobile styles--> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <!--Then paste the following for Kendo UI Mobile scripts--> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
3、配置你项目中需要使用的脚本和皮肤
系统，浏览器的支持
如：先把框架引入到项目中，再引用到<head>
请确保URL路径是正确的
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul class="Breadcrumb"> <li>Kendo UI框架 列表绑定</li> </ul> <div id="divBookingList"> </div> <div style="display: none;" id="template"> <div class="toolbar"> <label class="Language-label" for="CsNO"> CS编号:</label> <input type="search" id="CsNO" class="txtSearch"></input> <label class="Language-label" for="VoyageId"> 船期/航次:</label> <input type="search" id="VoyageId" class="txtSearch"></input> <label class="Language-label" for="SeekWayId"> 揽货方式:</label> <input type="search" id="SeekWayId" class="txtSearch"></input> <label class="Status-label" for="SignStatusName"> 签核状态:</label> <input type="search" id="SignStatusName" style="width: 130px"></input> <a class="k-button" href="javascript:void(0);" style="width: 80px;" onclick="javascript:SearchComment();"> 查询</a> </div> </div> <script type="text/javascript"> function SearchComment() { var _SignStatusName = $("#SignStatusName").val(); var _VoyageId = $("#VoyageId").val(); var _SeekWayId = $("#SeekWayId").val(); var CSNO = $("#CsNO").val(); jsonBookingList.query({ page:1, pageSize:jsonBookingList.pageSize(), skip:jsonBookingList.skip(), take:jsonBookingList.take(), filter:[ { field: "VoyageId", value: _VoyageId }, { field: "SeekWayId", value: _SeekWayId }, { field: "SignStatusName", value: _SignStatusName }, { field: "CsNO", value: CSNO } ] }); } //转换查询条件 function ConverToFilter(filters) { var strFilters = ""; if (filters) { for (var i = 0; i < filters.filters.length; i++) { strFilters += "$$$" + filters.filters[i].field + "###" + filters.filters[i].value; } } return strFilters; } function ConverToSort(sort) { var strSort = ""; if (sort) { strSort = sort[0].field + " " + sort[0].dir; } return strSort; } var jsonBookingList = new kendo.data.DataSource({ pageSize: 15, //batch: true, //启用服务端分页功能 serverPaging: true, //启用服务端排序功能 serverSorting: true, //启用服务端查询功能 serverFiltering: true, transport: { read: { url: "/_ws/_wsBookingCargo.asmx/GetBookingList", contentType: 'application/json; charset=utf-8', type: "POST", dataType: "json" }, parameterMap: function (options, type) { //type:"create", "read", "update", "destroy" if (type == "read") { var filter = ConverToFilter(options.filter); var sort = ConverToSort(options.sort); var result = { take: options.take, pageSize: options.pageSize, skip: options.skip, page: options.page, filter: filter, orderBy: sort }; var resultJson = JSON.stringify(result); return resultJson; } } }, change: function () { //分页扩展 var info = $(".k-grid-pager .info"); if (!info.length) { info = $('<div class="info" style="float:right;"/>').appendTo(".k-grid-pager"); } info.text(kendo.format("显示 {0} - {1} ,共 {2} 条", (this.page() - 1) * this.pageSize() + 1, Math.min(this.page() * this.pageSize(), this.total()), this.total() )); }, schema: { parse: function (data) { //解析数据 var jsonData = eval("(" + data.d + ")"); return jsonData; }, data: function (data) { //显示的数据 return data.List; }, total: function (data) { //总记录数 return data.RecordCount; } } }); function Bind_DropDownList(objId, autoBind, optionLabel, TextField, ValueField, JsonData) { for (var ii = 0; ii < JsonData.length; ii++) { JsonData[ii].DictionaryName = unescape(JsonData[ii].DictionaryName); } return $("#" + objId).kendoDropDownList({ dataTextField: TextField, dataValueField: ValueField, autoBind: autoBind, optionLabel: optionLabel, dataSource: { data: JsonData } }); } function Bind_Dictionary(objId, JsonData) { Bind_DropDownList(objId, true, "全部", "DictionaryName", "DictionaryKey", JsonData); } var _VoyageList= <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.Voyage)%>; var _SeekWayId= <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.SeekWay)%>; var _SignStatusName= <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.SignStatus)%>; $(function () { var grid = $("#divBookingList").kendoGrid({ type: "json", //数据源绑定 dataSource: jsonBookingList, //header 内容模板 toolbar: kendo.template($("#template").html()), //启用分页 pageable: true, sortable: { mode: "single", allowUnsort: false }, columns: [{ field: "CsNumber", title: "CS编号" }, { field: "ConsigneeName", title: "收货人", template: '#= unescape(ConsigneeName) #' }, { field: "ShipperName", title: "发货人", template: '#= unescape(ShipperName) #' }, { field: "v_SeekWay", title: "揽货方式", template: '#= unescape(v_SeekWay) #' }, { field: "v_ShipOwner", title: "船公司", template: '#= unescape(v_ShipOwner) #' }, { title: "签核状态", field: "v_SignStatusName", template: '#= v_SignStatusName#' }, { sortable: false, title: "操作", width: "240px", template: '<a class="k-button" style="width:40px;" href="Show.aspx?id=#= CsNumber#" >详细信息</a> <a class="k-button" style="width:40px;" href="Edit.aspx?id=#= CSNumber#" >修改信息</a>' }] }); //绑定下拉框 Bind_Dictionary("VoyageId", _VoyageList); Bind_Dictionary("SeekWayId", _SeekWayId); Bind_Dictionary("SignStatusName", _SignStatusId); }); </script></asp:Content>运行结果如下：
后台WebService中
[WebMethod] public string GetBookingList(int take, int skip, int page, int pageSize, string filter, string orderBy) { return "JSON格式数据";// }
<body> <div style="margin-top: -6px; margin-left: 180px"> <input id="datepicker" value="7/6/2012" style="width:150px;" /> </div> <div style="margin-top: 59px; margin-left: 180px"> <input id="monthpicker" value="November 2011" style="width:150px" /> </div> <script> $(document).ready(function() { //创建DatePicker 格式为默认 $("#datepicker").kendoDatePicker();//自定显示义格式 $("#monthpicker").kendoDatePicker({ // 定义日历初始化日期试图 start: "year", // 定义日历应该返回日期 depth: "year", // 年份和月份 format: "MMMM yyyy" }); }); </script></body>试图：
- Kendo UI 框架 HTML5
- Kendo UI-html5 ui开源框架
- HTML5/JS开发框架Kendo UI视频教程集合
- HTML5 Web app开发工具Kendo UI Web教程：如何配置Kendo UI Calendar
- HTML5 Web app开发工具Kendo UI Web教程：如何配置Kendo UI Calendar
- Kendo UI
- HTML5 Web app开发工具Kendo UI Web教程
- 前台kendo ui js grid框架增删改查
- Kendo UI js
- Kendo UI Web扩展
- kendo ui listView
- kendo ui grid 汉化
- 接触kendo ui
- Kendo UI 学习
- kendo UI loading 操作方法：
- kendo ui (frozen column)
- Kendo UI使用笔记
- angularJs-kendo ui
- linux yum错误解决方法
- 关于电商构图
- linux 内核驱动编程 简单例子 与_IO, _IOR, _IOW, _IOWR 宏解析
- gdb 使用方法
- ubuntu下搭建svn服务器
- Kendo UI 框架 HTML5
- 使用ajax和history.pushState无刷新改变页面URL
- Amazon EC2 Linux实例定制内核
- sql 查询相同记录下日期最大的 一条
- 商业中的创意设计
- POJ3613-恰好K步最短路
- 132 个 Web 设计工具(上)
- 一个小时快速熟悉并掌握正则表达式
- 填报表编辑框数据校验不通过填报单元格值置空
