Kendo UI Grid 样式改变&控制

最新推荐文章于 2023-08-30 17:53:45 发布

琳妹妹的辉哥哥

最新推荐文章于 2023-08-30 17:53:45 发布

阅读量3.2k

点赞数 4

本文链接：https://blog.csdn.net/qwerdfcv/article/details/111123169

版权

Kendo UI 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

Grid

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

一. 单元格颜色控制

此文仅对表格样式&部分特殊效果做讲解，如果想要知道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;
}