一、kendo grid
1、grid设置复选框列
dataSource= new kendo.data.DataSource({
schema: {
model: {
fields: {
checkboxCol: {defaultValue: 'N', type: 'boolean', checkedValue: 'Y', uncheckedValue: 'N'}
}
}
}
});
2、grid LOV
columns: [
{
field: "entityId",
title: '<@spring.message "entity.entityCode"/>',
headerAttributes: { style: "text-align: center" },//标题样式
attributes: {style: "text-align:center"},//单元格样式
width: 120,//宽度可以为数字或者百分比,百分比要加引号
//编辑完成事件
template: function(item){
return item['entityCode']||''
},
//编辑事件
editor: function (container, options) {
$('<input name="' + options.field + '" required="required" />')
.appendTo(container)
.kendoLov($.extend(<@lov "PSPC_PSPC_ENTITY_SAMPLE"/>, {
textField: 'entityCode',//指定显示值
valueField: 'entityId',//指定真实值
model: options.model
},{
query: function (e) {
//查询事件
e.param['tenantId'] = '-1';
e.param['siteId'] = '-1';
},
select: function (e) {
//选择LOV事件,同时填充其他列的值
options.model.set('description', e.item.description);
options.model.set('entityVersion', e.item.entityVersion);
options.model.set('ceGroup', e.item.ceGroup);
options.model.set('ceParameter', e.item.ceParameter);
options.model.set('attachmentGroupDescription', e.item.attachmentGroupDescription);
}
}));
}
}
]
3、grid fasecode
<script src="${base.contextPath}/common/code?PSPC_TICK_LABEL=PSPC.TICK.LABEL" type="text/javascript"></script>
columns: [
{
field: "coordinateAxis",
title: '<@spring.message "entitychart.coordinateAxis"/>',
attributes: {style: "text-align:center"},
headerAttributes: { style: "text-align: center" },
width: 120,
template: function (dataItem) {
//对比快码集合获取含义
var v = dataItem.coordinateAxis ? dataItem.coordinateAxis : "";
$.each(PSPC_TICK_LABEL, function (i, n) {
if ((n.value || '').toLowerCase() == (v || '').toLowerCase()) {
v = n.meaning;
return false;
}
})
return v;
},
editor: function (container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "meaning",
dataValueField: "value",
valuePrimitive: true,
dataSource: PSPC_TICK_LABEL
});
}
}
]
4、grid 只读列
columns: [
{
field: "description",
title: '<@spring.message "entity.description"/>',
headerAttributes: { style: "text-align: center" },
width: 120,
editor: function (container, options) {
//编辑事件返回一个span
var val = options.model.description == null ? '' : options.model.description;
$('<span>' + val + '</span>').appendTo(container);
}
}
]
schema: {
model: {
editable: function (col) {
//站点只有新增可以修改,审核状态/有效性不允许修改
if ('siteId' === col) {//站点只有新增可以修改
return this.isNew();
} else {//审核状态/有效性不允许修改
return !('checkStatus' === col || 'enableFlag' === col);
}
}
}
}
5、grid 时间列
columns: [
{
field: "startDate",
title: '<@spring.message "entity.startdate"/>',
width: 150,
attributes: {style: "text-align:center"},
headerAttributes: {style: "text-align:center"},
format:"{0:yyyy-MM-dd HH:mm:ss}",
editor: function (container, options) {
//获得结束时间
var end = options.model.endDate;
var opts = {
format: "yyyy-MM-dd HH:mm:ss"
}
if (end) {
opts.max = end;
}
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker(opts);
}
},
{
field: "endDate",
title: '<@spring.message "entity.enddate"/>',
width: 150,
attributes: {style: "text-align:center"},
headerAttributes: {style: "text-align:center"},
format:"{0:yyyy-MM-dd HH:mm:ss}",
editor: function (container, options) {
//获得开始时间
var start = options.model.startDate;
var opts = {
format: "yyyy-MM-dd HH:mm:ss"
}
if (start) {
opts.min = start;
}
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker(opts);
}
}
]
6、grid bind
$("#grid").kendoGrid({
autoBind: false,//是否自动绑定
dataSource: dataSource,
resizable: true,
scrollable: true,//是否可滚动
navigatable: false,
rownumber: true,//显示行号
selectable: 'multiple, rowbox',//复选框列 去掉multiple为单选框列
dataBound: function () {
if (parent.autoResizeIframe) {
parent.autoResizeIframe('${RequestParameters.functionCode!}')
}
},
columns:[],
editable: {
createAt: "bottom"//新增行位于最下方,默认上方
}
});
7、grid 冻结列
columns = [
{
field: "oocId",
title: '<@spring.message "ooc.oocid"/>',
width: 120,
hidden: true,
locked:true,//是否冻结 true:是 false:否
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"}
},
{
field: "entityCode",
title: '<@spring.message "ooc.entitycode"/>',
width: 120,
locked:true,
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"}
},
{
field: "entityDesc",
title: '<@spring.message "ooc.entitydesc"/>',
width: 120,
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"}
},
]
8、grid 操作列
<style>
.button-action {
color: #758697;
cursor: pointer;
}
</style>
{
field: "",
title: '<@spring.message "hap.action"/>',
width: 120,
attributes: {style: "text-align:center;"},
headerAttributes: {style: "text-align:center"},
template:function (dataItem) {
return '<label>' +
'<span class="button-action" onclick="editOoc(\'' + dataItem.oocId + '\')">编辑</span>' +
' ' +
'<span class="button-action" onclick="showChart(\'' + dataItem.entityId + '\', \'' + dataItem.entityCode + '\', \'' + dataItem.chartId + '\')">展示图</span></label>';
}
}
9、grid前台分页
后台:
查询全部数据,不进行分页
前台:
dataSource = new kendo.data.DataSource({
serverPaging: false,
});
数据查询:
var viewModel = kendo.observable({
model: {},
query:function () {
//必输校验
if(!viewModel.model.startDate || !viewModel.model.endDate){
kendo.ui.showInfoDialog({
message: '请选择开始时间和结束时间'
});
return;
}
//查询,如果只用page(1)不会查询数据库,只会加载当前查询结果
$("#grid").data('kendoGrid').dataSource.read();//重新查询数据库
$("#grid").data('kendoGrid').dataSource.page(1);//加载第一页
}
});
数据捞取:
var allDatas = dataSource.data();//获取所有数据
var gridItems = $("#grid").data("kendoGrid").items();//获取当前页的数据
var checked = $("#grid").data("kendoGrid").selectedDataItems();//获取勾选的数据
二、kendo excel
//创建工作册
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
name: 'sheetName1',//sheet页名称
frozenRows: 2,//行冻结 索引从1开始
frozenColumns: 1,//列冻结 索引从1开始
mergedCells: ["A1:G1","C15:E15"],//单元格合并
filter: { from: 0, to: 18 },//筛选列 索引从0开始
columns: [
{width: 120},
{width: 120}
],
rows: [
{
cells: [
{textAlign: "center", value: 'code1', background: '#7A7A7A', color: '#FFF'},
{textAlign: "center", value: 'desc1'}
]
},
{
cells: [
{textAlign: "center", value: 'code2'},
{textAlign: "center", value: 'desc2'}
]
}
]
},
{
name: 'sheetName2',//sheet页名称
frozenRows: 1,//行冻结 索引从1开始
frozenColumns: 2,//列冻结 索引从1开始
mergedCells: ["A1:G1","C15:E15"],//单元格合并
filter: { from: 0, to: 18 },//筛选列 索引从0开始
columns: [
{width: 120},
{width: 120}
],
rows: []
}
]
});
//保存为excel文件
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: 'Excel导出.xlsx' });