本文共 3454 字,大约阅读时间需要 11 分钟。
上图就是个典型的例子,openSendWin方法里Id,EmergencyTitle,EmergencyDetail 三个参数,后两个参数是string类型,必须加双引号,否则报错,解决的方式就是加\"
都用的KenUI 辅助方法写的
定义模态框@(Html.Kendo().Window().Name("sendWin") .Title("发送").Draggable(true) .Resizable(resiz=>resiz.Enabled(false) .MinHeight(900) .MinWidth(760) .MaxHeight(900) ) .Visible(false) .Modal(true) .Width(800) .Height(680) .Content(""))定义事件弹出这个模态框:
function openSendWin(contentId,title,content) { var win = $("#sendWin").data("kendoWindow"); win.center().open() win.refresh({ url: "@Url.Action("SendPart","EmergencyPlan")", type:"port" , data: { contentId: contentId, title: title, content:content }, }) win.center().open(); }语法很简单,写下来怕自己忘了(我是不是记忆力有问题)
一般的都得加上这三个方法 .
.Scrollable(c => c.Height("100%")).HtmlAttributes(new { @class = "k-grid-autoheight" }).Events(c => c.DataBound("window.kendoGridAutoHeightDataBound"))一般要求的Grid显示正常的效果图:
.Format("{0:yyyy-MM-dd HH:mm:ss}");
使用Kendo UI中的Grid经常会和DatePicker一起用,选择时间刷新Grid这个场景非常常见,具体的操作分为以下两步
1. 在DataSource的Read方法中添加Data事件,这个addData的方法作用就是返回DatePicker中的时间 事例:
.Read(read => read.Action("FlowJson", "PatrolFlow", new { checkDate = @ViewBag.checkDate }).Data("addData")); function addData(){ return { checkDate: kendo.toString($("#checkDate").data("kendoDatePicker").value(),"yyyy-MM-dd") }}2.在DatePicker中添加change事件pubchange 事例:
@(Html.Kendo().DatePicker().Name("checkDate").Events(e=>e.Change("pubChange")));然后写一个pubchange事件,刷新kendo Ui grid
function pubChange() { var grid = $("#mygrid").data("kendoGrid"); grid.dataSource.read(); }
kendo ui 中tabstrip使用的数据来自远程,这个时候就得使用辅助方法LoadContentFrom了。可以传递参数。如下所示
@(Html.Kendo().TabStrip().Name("tabstrip_#=EmployeeId#") .Items(tabstrip => { tabstrip.Add() .Text("巡更详情") .LoadContentFrom("SubPatrol", "PatrolFlow", new { employeeId ="#=EmployeeId#", patrolDate = "#=PatrolDate#" }) .Selected(true); }).ToClientTemplate() )
.Scrollable(c => c.Height("100%"))
@(Html.Kendo().DatePicker() .Name("monthpicker") .Start(CalendarView.Year) .Depth(CalendarView.Year) .Format("yyyy-MM") .Value("November 2011") .HtmlAttributes(new { style = "width: 100%" }) )
$("#monthpicker").kendoDatePicker({ //定义打开时显示的格式为年 start: "year", //定义当日历应该返回日期为年 depth: "year", //显示输入格式为年月 format: " " });
function onEdit(e) { var modelWindow = e.container.data("kendoWindow"); var aObj = $(".k-window").find("a.k-grid-update"); console.info(aObj); if (e.model.isNew()) { modelWindow.title("添加记录"); aObj.html("添加"); } else { modelWindow.title("编辑"); $("#ProductId").change(); aObj.html("更新"); } }
转载地址:http://rardx.baihongyu.com/