KendoUi学习之旅 TabStrip+template的使用
Posted jiangcm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于KendoUi学习之旅 TabStrip+template的使用的主要内容，如果未能解决你的问题，请参考以下文章