Kendo ui 使用总结----Kendo UI Grid
代码中理解比较好。
代码
数据获取：
var melDataSource = new kendo.data.DataSource({
transport: {
read: {
type: "post",
url: '/controller/method',
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation == "read") {
//拼接参数
var parameter = {
page: options.page,
pageSize: options.pageSize,
searchDay: $("#weatherDate").val(),
eAirportCode: $("#txtAirportName").data("kendoComboBox").value()
return kendo.stringify(parameter);
}
}
},
// 设置页面大小
pageSize: 15,
schema: {
// 回调方法
data: function (d) {
return d.Data;
},
total: function (d) {
return d.Total;
}
},
serverPaging: true
});
$("#grid").kendoGrid({
dataSource: melDataSource,
sortable: true,
reorderable: true,
//分组
//groupable: true,
//可调节页面大小
//resizable: true,
//过滤
//filterable: true,
// 列按钮开关
//columnMenu: true,
// 滚动条
scrollable: true,
// 分页设置
pageable: {
// 页面大小选项
pageSizes: [15, 25, 35],
// 页数按钮显示个数
buttonCount: 5,
// 显示信息
messages: {
display: "显示{0}-{1}条，共{2}条",
empty: "没有数据",
page: "页",
of: "/ {0}",
itemsPerPage: "条/页",
first: "第一页",
previous: "前一页",
next: "下一页",
last: "最后一页",
refresh: "刷新"
}
},
columns: [
{
field: "Code",
title: "编号",
width: "100px",
//冻结列 太低版本不支持
locked: true,
//locked: true
lockable: false,
},
{
field: "Name",
title: "名称",
width: "120px",
locked: true,
lockable: false,
},
{
field: "element",
title: "维度",
width: "120px",
locked: true,
lockable: false,
},
{
field: "Hour01",
title: "1H",
width: "120px",
// 设置样式
attributes: {
// 可以加类名
"class":"classnmae"
style: "color:black;background-color: #if(Hour_01==null) {# #}else if(Hour_01==0.1) {# rgb(146, 208, 80) #}else if(Hour_01==0.2){# rgb(0, 176, 80) #}else if(Hour_01==1.1){# rgb(255, 255, 0) #}else if(Hour_01==1.2){# rgb(255, 192, 0) #}else if(Hour_01==1.3){# rgb(102, 153, 255) #}else if(Hour_01==1.4){# rgb(209, 160, 199) #}else if(Hour_01==2.1){# rgb(255, 0, 0) #}else if(Hour_01==2.2){# rgb(192, 0, 0) #}else if(Hour_01==2.3){# rgb(122, 48, 160) #}else if(Hour_01.indexOf('<<') >= 0){# rgb(255, 235, 156) #}else if(Hour_01.indexOf('>') >= 0){# rgb(198,239,206) #}else if(Hour_01.indexOf('<500') >= 0||Hour_01.indexOf('<30') >= 0){# rgb(255,199,206) #}#"
},
// 模板
template: function (d) {
//逻辑处理
var content = "";
return content;
}
}],
// 事件
dataBound: function () {
// 实现功能：行合并
$('#grid>.k-grid-content-locked>table').each(function (index, item) {
var dimension_col = 1;
var dimension_col2 = 2;
// First, scan first row of headers for the "Dimensions" column.
$('#grid>.k-grid-header>.k-grid-header-locked>table').find('th').each(function () {
if ($(this).text() == '列名') {
// first_instance holds the first instance of identical td
var first_instance = null;
var rowspan = 0;
$(item).find('tr').each(function () {
// find the td of the correct column (determined by the colTitle)
var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
if (first_instance == null) {
first_instance = dimension_td;
rowspan = 0;
//$(first_instance).css('border-top', 'solid 1px #000000');
} else if (dimension_td.text() == first_instance.text()) {
// if current td is identical to the previous
// then remove the current td
//rowspan++;
$(item).find('tr').each(function () {
if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
rowspan++;
}
});
dimension_td.hide();
first_instance.attr('rowspan', rowspan);
rowspan = 0;
// increment the rowspan attribute of the first instance
//$(item).find('tr').each(function () {
// if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
// rowspan++;
// }
//});
//first_instance.attr('rowspan', first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
//first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
} else {
rowspan = 0;
// this cell is different from the last
first_instance = dimension_td;
$(first_instance).css('border-top', 'solid 1px #000000');
}
});
return;
}
if ($(this).text() == '列名') {
// first_instance holds the first instance of identical td
var first_instance = null;
var rowspan = 0;
$(item).find('tr').each(function () {
// find the td of the correct column (determined by the colTitle)
var dimension_td = $(this).find('td:nth-child(' + dimension_col2 + ')');
if (first_instance == null) {
first_instance = dimension_td;
rowspan = 0;
//$(first_instance).css('border-top', 'solid 1px #000000');
} else if (dimension_td.text() == first_instance.text()) {
// if current td is identical to the previous
// then remove the current td
//rowspan++;
$(item).find('tr').each(function () {
if ($(this).find('td:nth-child(' + dimension_col2 + ')').text() == first_instance.text()) {
rowspan++;
}
});
dimension_td.hide();
first_instance.attr('rowspan', rowspan);
rowspan = 0;
// increment the rowspan attribute of the first instance
//$(item).find('tr').each(function () {
// if ($(this).find('td:nth-child(' + dimension_col + ')').text() == first_instance.text()) {
// rowspan++;
// }
//});
//first_instance.attr('rowspan', first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
//first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
} else {
rowspan = 0;
// this cell is different from the last
first_instance = dimension_td;
$(first_instance).css('border-top', 'solid 1px #000000');
}
});
return;
}
dimension_col++;
dimension_col2++;
});
});
}
});