一. 单元格颜色控制

1. 改变单元格背景颜色

2. 改变单元格边框

3. 改变行背景色

二. 单元格内容控制

1. 单元格换行控制

a. css控制不换行

b. JS控制指定换行

2. 表格以文本内容展示

三. 表格头控制

1. 表格头隐藏

2. 合并表头

a. 分组合并表头

b. 分组合并表头

四. 滚动条控制

grid滚动条样式

一. 单元格颜色控制

此文仅对表格样式&部分特殊效果做讲解，如果想要知道kendo UI grid的详细用法，可见我整理的另一篇文章：

KendoUI Grid 用法详细整理：https://blog.csdn.net/qwerdfcv/article/details/103479584?spm=1001.2014.3001.5502

1. 改变单元格背景颜色

//改变表格指定单元格背景色
Emt.changeGridCellBackColor = function (grid, num) {$.each(grid.dataSource.data(), function (i, v) {if (v.status == 'RELEASED') {//可设定条件改变$('tbody > tr[data-uid="' + v.uid + '"] > td:eq(' + num + ')').css("background-color", releasedColor);}});
}//控制单元格内容样式
{field: "status",title: '状态',attributes: {style: "text-align:center"},headerAttributes: {style: "text-align:center"},width: 100,template: function (dataItem) {var v = dataItem.status || "";$.each(ORDER_STATUS, function (i, n) {if ((n.status || '').toLowerCase() == (v || '').toLowerCase()) {v = n.statusDes;return false;}})if (dataItem.status == 'RELEASED') {return '<div style="width: 100%;height:100%;background-color: skyblue">' + v + '</div>'} else if (dataItem.status == 'HOLD') {return '<div style="width: 100%;height:100%;background-color: khaki">' + v + '</div>'} else if (dataItem.status == 'CANCEL') {return '<div style="width: 100%;height:100%;background-color: darkgrey">' + v + '</div>'} else if (dataItem.status == 'COMPLETED') {return '<div style="width: 100%;height:100%;background-color: palegreen">' + v + '</div>'} else {return v || "";}}
}

2. 改变单元格边框

{field: "productionLot",title: '生产批次',width: 220,attributes: {style: "text-align: center;border-style: solid;border-width: 0 1px 1px 0px;border-color: red"},//边框样式headerAttributes: {style: "text-align: center;"}
}

3. 改变行背景色

$('tbody > tr[data-uid="' + v.uid + '"]').css("background-color", "#b0d74d");

二. 单元格内容控制

attributes: {style: "text-align:center;"},//列数据居中，在属性对象中可以为列添加class 和 style。

headerAttributes: {style: "text-align:center"},//列头文本居中，在属性对象中可以为列头添加class 和 style。

1. 单元格换行控制

a. css控制不换行

{field: "costCenterDesc",title: '成本中心',width: 120,attributes: {style: "text-align:center;white-space:nowrap;text-overflow:ellipsis;"},//内容不换行 text-overflow:ellipsis;：超出部分省略号显示headerAttributes: {style: "text-align:center"}
}

b. JS控制指定换行

//不做设置，内容会自动换行
{field: "productionCode",title: '产品编码',width: 160,attributes: {style: "text-align: center;"},headerAttributes: {style: "text-align: center;"},template: function (dateItem) {var v = dateItem.productionCode.replace(/,/g, '<br/>');//逗号分隔内容换行return v || '';},
}

2. 表格以文本内容展示

$("#grid").find(".k-grid-content").html("不展示数据，展示固定文本，并设置文本样式").css({"color": "#169bd5","font-size": "20px","white-space": "nowrap","text-align": "center","line-height": "124px"
});

三. 表格头控制

1. 表格头隐藏

{field: "value",width: 120,attributes: "text-align: center;",headerAttributes: {hidden: true} //隐藏头
}

2. 合并表头

a. 分组合并表头

{title: '分组头',headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},width: 200,columns : [{title: "分组行1",field: "line1",width: 80,headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},},{title: "分组行2",field: "line2",width: 120,headerAttributes: {style: "text-align:center"},attributes: {style: "white-space:nowrap;text-overflow:ellipsis;text-align:center;"},editor: function (container, options) {//单元格只读$('<span data-bind="text:line2"></span>').appendTo(container);}}]
}

b. 分组合并表头

/*** 合并表头* @param titleName 合并列名* @param colSpanCount 合并数* @constructor*/
function GridHeaderSpan(titleName, colSpanCount) {var index = 1$('#grid thead th').each(function (i, v) {if ($(v).attr('data-title') == titleName) {if (index == 1) {$(v).attr('colspan', colSpanCount);$(v).css('text-align', 'center');} else {$(v).hide();}index++;}});
}

四. 滚动条控制

grid滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {width: 8px;height: 8px;
}/* 滚动槽 */
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 8px grey;
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: #CCCCCC;-webkit-box-shadow: inset 0 0 8px grey;
}

Kendo UI Grid 样式改变控制相关推荐

Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width
Width 默认情况下,Grid没有设置宽度,其操作类似于块级元素,并扩展为100%的宽度(父元素的宽度). 入门指南要控制Grid的宽度,请将CSS width属性设置为Grid本身或其某些父类, ...
在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...
Kendo UI grid 表格数据更新
1.整行数据更新 //获取grid表格var table0 = $(updateTableID).data("kendoGrid");//删除第一条 var lastTableDa ...
集成 Kendo UI for Angular 2 控件
伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...
实例：用户界面控件Kendo UI vs DevExpress对比评测一
在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂,我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用 ...
用户界面控件的王者之争：Kendo UI vs DevExpress（一）
2019独角兽企业重金招聘Python工程师标准>>> 在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂, ...

Kendo UI Grid 样式改变控制

一. 单元格颜色控制

1. 改变单元格背景颜色

2. 改变单元格边框

3. 改变行背景色

二. 单元格内容控制

1. 单元格换行控制

a. css控制不换行

b. JS控制指定换行

2. 表格以文本内容展示

三. 表格头控制

1. 表格头隐藏

2. 合并表头

a. 分组合并表头

b. 分组合并表头

四. 滚动条控制

grid滚动条样式

Kendo UI Grid 样式改变控制相关推荐

最新文章

热门文章