常用控件介绍
1.1 Checkbox结合使用
注:该checkbox与第一列的checkbox不一样,第一列的checkbox表示的是当前行的所有属性,而这个checkbox则是这一行数据对象中的一个属性,具有值得存在并不是表示选中该行。
点击列头,表格根据该列首字母排序
sortable:true,//排序
可鼠标拉动调整列宽
resizable: true,//可调整列宽
设置表格内滚动
scrollable: true,//滚动条行宽高
初始化不请求数据,大部分用于数据在页面上产生时
autoBind: false,//初始化自动查询
设置表格是否可编辑
editable: true
拓展:设置单独列或单元格是否可编辑
editable:function (col) {//设置字段是否可以编辑
if (!this.isNew() || ifNotNull(this.id)) {
// 已经存在的数据,可以编辑
return true;
} else {
// 新增的数据
if (col == 'employeeId') {
return false;//人员ID列不能编辑
} else {
return true;
}
}
return false;
}
初始化(表格生成后)执行方法
此方法在请求数据并渲染表格数据行后立刻执行,多用于表格刷新影响其他元素时:
dataBound: function(e) {
if(grid._data.length>0){
var foundrow =grid.tbody.find("tr:eq(0)");
grid.select(foundrow); //默认选中第一条数据
$("#div_new_machining_daily_report").hide();
$("#div_new_machining_daily_report_hide").show();
}else{
$("#div_new_machining_daily_report").show();
$("#div_new_machining_daily_report_hide").hide();
}
}
延伸:在DataSource(请求成功后、表格渲染前)执行
requestEnd: function(e) {
var response = e.response; //定义一个response接受控制器传过来的responseData
var type = e.type;
if (!response.success){
Alertbox.alert('info', {
title: '提醒',
iconClass: false, //图表类:否
msg: response.message, //msg属性接收后台传过来的报错信息(通过键值对)
});
}
},
单元格columns
{
field: "workcellId",
title: '<@spring.message "dailytemp.workcellid"/>',
width: 120,
attributes: {style: "text-align:center;"},//居中
headerAttributes: {style: "text-align:center"},//居中
}
1.8.1 显示template(根据内容、条件显示各种控件)
//显示文本
template: function (dataItem) {
if (ifNotNull(dataItem.workcellid)) {
return dataItem.workcellid;
}
return '';
}
//显示按钮
template:function (dataItem) {
return "<i onclick='removeRow(this)' class='fa fa-minus-square' " +
"style='font-size: 34px;cursor: pointer'></i>";
}
//显示checkbox
template:function (dataItem) {
if (!!dataItem.eoStaus && (dataItem.eoStaus == 'QUEUING'||dataItem.eoStaus == 'COMPLETED')) {
return '<span class="k-checkbox fa fa-check check-span checked-span" ' +
' data-uid="'+dataItem.uid+'" data-id="'+
dataItem.id+'"></span>';
} else if(!!dataItem.eoStaus && dataItem.eoStaus == 'HOLD') {
return '<span class="k-checkbox fa fa-times check-span unchecked-span" ' +
' data-uid="'+dataItem.uid+'" data-id="'+
dataItem.id+'"></span>';
}else{
return "";
}
}
//显示超链接
template: function (dataItem) {
if (!!dataItem.id) {
return '<a href="javascript:void(0);" onclick="assignPosition('+dataItem.id +')"><@spring.message "详细信息"/></a>'
}
return '';
}
1.8.2 editor
//追加LOV
editor:function (container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoLov({
contextPath:BaseUrl,
locale:_locale,
code:'JJCY_LOV_DEPARTMENT',
model:options.model,
textField:'positionName',
select:function(e){
options.model.set("positionName", e.item.osName);
options.model.set("positionCode", e.item.structureCode);
},
query:function(e){
e.param['structureType'] = 'S';
}
});
}
//追加数值输入框
editor: function (container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
format:'#####',
decimals: 1,
min:0
});
}
//追加下拉框
editor: function (container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "meaning",
dataValueField: "value",
valuePrimitive: true,
dataSource: HME_PRODUCTION_CODE,
change:function () {
options.model.set('calibrationEditFlag',true);
}
});
}
//追加日期控件
editor: function (container, options){
$('<input name="'
+ options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({
format:"MM-dd HH:mm",
timeFormat:'HH:mm',
dataInput:true
});
}
editor:function (container, options) {
$('<input name="'
+ options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
format:'yyyy-MM-dd'
});
}
//在dataSource设置统计列的值和方式
aggregate: [
{ field: "qualifiedCertificateCode", aggregate: "count" },
{ field: "qty", aggregate: "sum"}
]
//在columns设置表格底部统计行
{
selectable: true,
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"},
width: 80,
footerTemplate: "合计"
},
{
field: "qualifiedCertificateCode",
title: '<@spring.message "合格证个数"/>',
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"},
width: 120,
footerTemplate: "<span style='float:right'>#= count #</span>"
},
{
field: "qty",
title: '<@spring.message "总数量"/>',
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"},
width: 120,
footerTemplate: "<span style='float:right'>#= sum #</span>"
}
1. LOV
<input id="workOrderId" type="text" class="add_input_required"
style="width:150px;margin-right:5px;text-align: center;" data-bind="value:model.workOrderId,text:model.workOrderNum" />
$("#workOrderId").kendoLov({
contextPath:BaseUrl,
locale:'zh_CN',
code:'JJCY_LOV_WO_BY_DAILY_PLAN',
model:viewModel.model,
textField:'workOrderNum',
select:function(e){//选择数据出发函数
},
query:function(e){
e.param['workcellId'] = viewModel.model.workcellId;//传入条件参数
},
change:function (e) {//数据改变后触发函数
}
});
新建LOV
在系统管理进行LOV定义
根据弹出新建页面配置相应信息,Sql id为LOV所调用的SQL语句
还可以配置他的valueField以及textField,宽高等属性。
1. 下拉框
<input id="div_craftwork_type" class="" data-bind="value:model.hmdcCraftworkType,text:model.hmdcCraftworkType" />//input输入框必须绑定viewModel值
$('#div_craftwork_type').kendoDropDownList({
dataTextField: "meaning",//显示文本
dataValueField: "value",//值
valuePrimitive: true,
dataSource: viewModel.model.craftworkTypeList,//数据来源(快码、查询的集合等)
change : function(e){//下拉框值改变事件
}
});
1. 日期时间控件
//带日期时间控件html
<input type="text" id="workTimeFrom" class="add_input_required" style="width:100%;height: 34px;"
data-bind="value:model.workTimeFrom"/>
//js代码
$('#workTimeFrom').kendoDateTimePicker({
format:"yyyy-MM-dd HH:mm",//格式化日期
timeFormat:'HH:mm',//格式化时间
dataInput:true,//是否可修改
change:function (e) {//改变事件后触发的方法
}
});
//带日期控件html
<input class="form-control" size="16" type="text" placeholder="生产日期" id="calendarDay" >
//js代码
$('#calendarDay').kendoDatePicker({
format: 'yyyy-MM-dd',//格式化日期
dataInput:true
})
1. 页面弹窗
//编写div的ID与内容并隐藏
<div id='check-card-dialog' style="display: none">
<div class="" style="padding-top: 10px;background-color: #2b475b;height: 100%;">
<input id="check_card_dialog_flag" type="hidden" />
<div>
<div class="form-group">
<label class="col-sm-3 control-label">卡号:</label>
<input id="inputCardNum" type="number"
onkeypress='return( /^[0123456789]+$/.test(String.fromCharCode(event.keyCode)))'
style="width:250px;height:40px;font-size: 18px;background-color: rgb(70,112,141)!important;" placeholder="请输入卡号">
<input id="inputCardType" style="display: none;">
</div>
</div>
<div style="margin-top: 20px;">
<div class="form-group">
<div class="button-font" style="text-align: center;margin: auto; height: 60px">
<button type="button" style="border-radius: 50%; height: 50px;width:50px;"
onclick="viewModel.checkCard()">
<i class="fa fa-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
//js代码
$("#check-card-dialog").kendoWindow({
width: 400,//宽度
height: 200,//高度
title: '刷卡',//标题
modal: true,//模态框
activate: function () {//初始化执行
$("#inputCardNum").val('');
$("#inputCardType").val(e);
$("#inputCardNum").focus();
},
close: function () { // 关闭弹框触发函数
}
});
var dialog = $("#check-card-dialog").data("kendoWindow");
dialog.center().open();//打开弹窗
1. 按钮控件
//自定义图标
<button data-bind="click:workView"><img src="${base.contextPath}/resources/ipc/image/工单预览.png"><span class="ii btn_work_view"></span></button>
//Bootstra icon图标
<span class="btn btn-primary" style="float:left;margin-right:5px;" data-bind="click:resend">
<i class="fa fa-random" style="margin-right: 3px"></i>接口重传</span>
图标参考:http://localhost:8080/hmes/sys_icon.html
1. TAB标签
<div id="tabstrip">
</div>
<br/>
<div id="tabstrip2" style="width:400px;">
<ul>
<li class="k-state-active">Season</li>
<li>Weakday</li>
<li>Direction</li>
</ul>
<div>
<ul>
<li>Spring</li>
<li>Summer</li>
<li>Autumn</li>
<li>Winter</li>
</ul>
</div>
<div>
<ul>
<li> Sunday</li>
<li>Monday</li>
<li> Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
</div>
<div>
<ul>
<li>East</li>
<li>South</li>
<li>West</li>
<li>North</li>
</ul>
</div>
</div>
<div id="tabstrip3">
<ul>
<li>Tab 1</li>
<li>Ajax Tab</li>
</ul>
<div>Content 1</div>
<div></div>
</div>
//js代码
$("#tabstrip").kendoTabStrip({
value: "Tab1",
dataTextField: "Name",
dataContentField: "Content",
dataSource: [
{ Name: "Tab1", Content: "Tab1: content" },
{ Name: "Tab2", Content: "Tab2: content" }
]
});
$("#tabstrip2").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
$("#tabstrip3").kendoTabStrip({
contentUrls: [
null,
"https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html"
]
});