KendoUi学习之旅 TabStrip+template的使用

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="companyManage-window-container"></div>
<script type="text/kendo-ui-template" id="tpl-companyManage-orgGrid-baseWindow">
<div class="window-container">
<div data-role="tabstrip" id="employeebasedatatab" class="k-tabstrip-gridContent">
<ul>
<li id="personstandardli">
Employee_PersonFee_Stantard
</li>
<li id="travelstandardli">
Employee_TravelFee_Stantard
</li>
</ul>
<div>
<div data-role="grid"
data-selectable="row"
data-resizable="true"
data-filterable="true"
data-auto-bind="false"
data-pageable=‘{"refresh":true,"pageSizes":[10,15,100,"all"],"buttonCount":5,"messages":{"itemsPerPage":"A_Page"}}‘
data-columns="[ { ‘field‘: ‘TEMPLATE_NAME‘,‘title‘:‘Expense_Project‘,width:120},
{ ‘field‘: ‘TEMPLATE_TYPE_NAME‘,‘title‘:‘Expense_Model_Name‘,width:120},
{ ‘field‘: ‘ExpenseItem‘,‘title‘:‘Correspondent_Fee_Project‘,width:120},
{ ‘field‘: ‘LOCAL_NAME‘,‘title‘:‘City‘},
{ ‘field‘: ‘STANDARD_EXPENSE‘,‘title‘:‘Standard_Fee‘,width:120},
{ ‘field‘: ‘ClaimCurrency‘,‘title‘:‘Currency_Type‘},
{ ‘field‘: ‘STANDARD_UNIT‘,‘title‘:‘Scheme_Measure_Unit‘,width:120}, ]"
data-bind="source: personStandardFeeDatas">
</div>
</div>
<div>
<div data-role="grid"
data-pageable=‘{"refresh":true,"pageSizes":[10,15,100,"all"],"buttonCount":5,"messages":{"itemsPerPage":"A_Page"}}‘
data-auto-bind="false"
data-resizable="true"
data-filterable="true"
data-selectable="row"
data-columns="[{ ‘field‘: ‘TEMPLATE_NAME‘,‘title‘:‘Travel_Method‘},
{ ‘field‘: ‘TEMPLATE_TYPE_NAME‘,‘title‘:‘Expense_Model_Name‘},
{ ‘field‘: ‘LOCAL_NAME‘,‘title‘:‘City‘},
{ ‘field‘: ‘STANDARD_EXPENSE‘,‘title‘:‘Standard_Fee‘},
{ ‘field‘: ‘SEATCLASS_NAME‘,‘title‘:‘Shipping_Space‘},
{ ‘field‘: ‘DISCOUNT‘,‘title‘:‘Discount‘},
{ ‘field‘: ‘ClaimCurrency‘,‘title‘:‘Currency_Type‘} ]"
data-bind="source: travelStandardFeeDatas">
</div>
</div>
</div>
</div>
</script>

<div id="example">
<div class="demo-section k-content">
<div>
<div data-role="tabstrip"
data-bind="visible: isVisible">
<ul>
<li class="k-state-active">
ComboBox
</li>
<li>
dropdownlist
</li>
<li>
Grid
</li>
<li>
NumericTextBox
</li>
</ul>
<div>

<div data-role="grid" id="companyManage-usersetting-usergrid" class="grid-container"
data-excel="{allPages:‘true‘, fileName: ‘User_Info_List‘+‘.xlsx‘}"
data-selectable="row"
data-resizable="true"
data-pageable=‘{"refresh":true,"pageSizes":[10,15,30,100,200,500],"buttonCount":5,"messages":{"itemsPerPage":"A_Page"}}‘
data-filterable="true"
style="overflow:auto"
data-columns="[{ ‘field‘: ‘RowNumber‘,‘title‘:‘ ‘, ‘width‘: 40 ,filterable:false},{‘field‘:‘isChecked‘,attributes:{style:‘text-align:center;‘},filterable:false,‘title‘:‘<input type=\‘checkbox\‘ onclick=\‘checkGridAllCloumns(this)\‘>‘,‘template‘:‘<input type=\‘checkbox\‘ data-bind=\‘checked:isChecked\‘>‘,‘width‘:‘40px‘},
{‘field‘:‘Item‘,‘title‘:‘System_Account‘,‘width‘:130},
{‘field‘:‘Price‘,‘title‘:‘Job_Number‘,‘width‘: 80},
{‘field‘:‘ID‘,‘title‘:‘Name‘,‘width‘: 80,‘template‘:‘<a class=\‘gridmao\‘ data-bind=\‘events:{click:EmployeeNameClick}\‘>#:data.ID#</a>‘},
{‘field‘:‘‘,‘title‘:‘Personal_Standards‘,‘width‘: 100,‘template‘:‘<a class=\‘gridmao\‘ data-bind=\‘events:{click:openPersonStandardWindow}\‘>See</a>‘},
{‘field‘:‘‘,‘title‘:‘Standard_Travel‘,‘width‘: 100,‘template‘:‘<a class=\‘gridmao\‘ data-bind=\‘events:{click:openTravelStandardWindow}\‘>See</a>‘} ]"
data-bind="source:projectList,events:{change:gridRowSelected}">
</div>
</div>
<div>
<div id="example">
<div class="demo-section k-content wide">
<div>
<div data-role="grid"
data-auto-bind="true"
data-editable="true"
data-filterable="true"
data-columns="[
{ ‘field‘: ‘ID‘, ‘width‘: 270 },
{ ‘field‘: ‘Price‘ },
]"
data-bind="source: projectList,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
</div>

</div>
</div>
<div>
<div data-role="grid"
data-selectable="row"
data-excel="{allPages:‘false‘, fileName: ‘Item_List‘+‘.xlsx‘}"
data-columns="[
{‘field‘:‘ProjectCD‘,title:‘Project_Code‘},
{field:‘Project‘,title:‘Project_Name‘},
{field:‘R_RECORD_STATUS_DESC‘,title:‘Achievement_State‘}]"
data-bind="source:projectList,events:{change:gridRowSelected,dataBound:gridBounded}">
</div>
</div>
<div>
@Html.Partial("~/Views/Home/ComboBox.cshtml")
@*<div data-role="grid"
data-selectable="row"
data-excel="{allPages:‘false‘, fileName: ‘Product_Line_List‘+‘.xlsx‘}"
data-columns="[
{field:‘ProductionLineCD‘,title:‘Product_Line_Code‘},
{field:‘ProductionLine‘,title:‘Product_Line_Name‘},
{field:‘R_RECORD_STATUS_DESC‘,title:‘Achievement_State‘}]"
data-bind="source:projectList,events:{change:gridRowSelected,dataBound:gridBounded}">
</div>*@
</div>
</div>
</div>
</div>

</body>
</html>
<script>
var viewModel = kendo.observable({
isVisible: true
});
kendo.bind($("#example"), viewModel);
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
projectList: new kendo.data.DataSource({
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
Price: { type: "string" }
}
}
},
batch: true,
transport: {
read: {
url: ‘/Home/GetCategoryList‘,
dataType: "json"
},

}
}),
openPersonStandardWindow: function (e) {
var selectmodel = e.data;
this.openStandardWindow(selectmodel, 0);
},
selectedItem: "",
selectedPrice: "",
openStandardWindow: function (selectmodel, index) {
debugger
this.set("selectedItem", selectmodel.Item);
this.set("selectedPrice", selectmodel.Price);
var that = this;
$("#companyManage-window-container").html("<div id=‘employeebasedatawindow‘></div>");

var window = $("#employeebasedatawindow").kendoWindow({
width: "1000px",
iframe: false,
height: "500px",
modal: false,
title: "Employee_Base_Data",
deactivate: function () {
kendo.unbind(this.element, that);
this.destroy();
},
content: {
template: $.trim($("#tpl-companyManage-orgGrid-baseWindow").html())
},
animation: false
}).data("kendoWindow");

kendo.bind(window.element, that)
//that.personStandardFeeDatas.read();
//that.travelStandardFeeDatas.read();
//that.personStandardFeeDatas.page(1);
//that.travelStandardFeeDatas.page(1);
$(window.element).find("#employeebasedatatab").data("kendoTabStrip").select(index);
window.open().center();
}

});
kendo.bind($("#example"), viewModel);
</script>

时间: 2024-09-28 02:02:30

KendoUi学习之旅 TabStrip+template的使用的相关文章

kendoui学习之旅开始!

原来只是浅显的以为kendo ui是一个简单的前端组件,后来逐渐发现包含的内容广泛,而且又很丰富. 立一个flag,探索kendo ui神秘之旅要开始了! 原文地址:https://www.cnblogs.com/LessIsMoreZ/p/8358796.html

基于 Android NDK 的学习之旅----- C调用Java

http://www.cnblogs.com/luxiaofeng54/archive/2011/08/17/2142000.html 基于 Android NDK 的学习之旅----- C调用Java许多成熟的C引擎要移植到Android 平台上使用 , 一般都会 提供 一些接口, 让Android sdk 和 jdk 实现. 下文将会介绍 C 如何 通过 JNI 层调用 Java 的静态和非静态方法. 1.主要流程 1.  新建一个测试类TestProvider.java a)       

SSIS 学习之旅 序章 和 简介

SSIS 学习之旅目录: 第一章: SSIS 学习之旅 第一个SSIS 示例(一) 第二章: SSIS 学习之旅 第一个SSIS 示例(二) 第三章: SSIS 学习之旅 数据同步 第四章: SSIS 学习之旅 FTP文件传输-FTP任务 第五章: SSIS 学习之旅 FTP文件传输-脚本任务 第六章: SSIS 学习之旅 FTP访问类 SSIS是Microsoft SQL Server Integration Services的简称,是生成高性能数据集成解决方案,是Microsoft BI 解

【转】基于 Android NDK 的学习之旅-----数据传输(引用数据类型)

原文网址:http://www.cnblogs.com/luxiaofeng54/archive/2011/08/20/2147086.html 基于 Android NDK 的学习之旅-----数据传输二(引用数据类型)(附源码) 基于 Android NDK 的学习之旅-----数据传输(引用数据类型) 接着上篇文章继续讲.主要关于引用类型的数据传输,本文将介绍字符串传输和自定义对象的传输. 1.主要流程 1.  String 字符串传输 a)         上层定义一个native的方法

Git命令学习之旅——日志和穿梭版本号

在总结了git命令的基础之后,接下来我们看一下基础的一些进阶内容:删除撤销命令.日志查看命令等 既然有加入文件的功能,那么相相应的肯定有移除文件的功能,命令例如以下:git rm [文件名称] 在输入命令之后,例如以下图所看到的: 提示已经删除了"c.txt"文件.这个时候再用git status查看一下状态,例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JB

Android热修复学习之旅——HotFix完全解析

在上一篇博客Android热修复学习之旅开篇--热修复概述中,简单介绍了各个热修复框架的原理,本篇博客我将详细分析QQ空间热修复方案. Android dex分包原理介绍 QQ空间热修复方案基于Android dex分包基础之上,简单概述android dex分包的原理就是:就是把多个dex文件塞入到app的classloader之中,但是android dex拆包方案中的类是没有重复的,如果classes.dex和classes1.dex中有重复的类,当classes.dex和classes1

菜鸟的Android学习之旅(一)

最近在拜读郭霖老师的经典<第一行代码>,作为一名菜鸟级的新手来说这本书确实对新手很友好,讲的很详细.如果你也像我一样作为一只小菜鸟想学习Android,还不了解这本书的,还没有想好入手哪一本书作为自己新手启蒙书的同学,个人觉得你就不要徘徊了,加入购物车吧! 因为我才是刚开始学习不久,第二章才学习了很少一部分,所以我没办法说点有营养的东西,我就先记录一下我学习过程中经历的错误吧. 第二章开始,郭老师教我们如何手动创建活动.边看书边敲代码,但是你会发现当你完全按照书上所说敲完所有需要的代码之后代码

iOS学习之旅10 ATS(App Transport Security)对HTTPS协议要求引起的问题

问题描述 编写以下代码获取网络某个资源的MIMEType 1 -(void)getMIMEType 2 { 3 //路径 4 NSURL *url = [NSURL URLWithString:@"https://www.baidu.com/img/bd_logo1.png"]; 5 //请求对象 6 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url]; 7 NSOperationQueue *

c++ hmtlcxx 学习之旅

最近刚网页抓取,抓取下来后需要解析,所以在网上找了一些资料,也问问我的师兄,最终结合网上的开源知识,完成了htmlcxx的使用. vs2013. 首先要去下载htmlcxx: https://github.com/dhoerl/htmlcxx 或者你也可以百度下去下载一个. 接下来,将文件文件解压,我用vs2013将htmlcxx.vcproj打开,点击生成. 生成好就可以,点击调试会有错误,我们也不需要调试. 创建一个win32控制台,直接点击完成. 接下来将debug下的htmlcxx.li