如何在 Kendo UI 网格中合并单元格

2024-06-25

我在 Kendo UI 的官方文档中没有看到任何内容。只是检查是否有人进行了自定义以合并 Kendo UI 网格中的单元格。

我有这样的内容:

Technology       Core Language & Communication                                15
----------------------------------------------------------------------------------
Technology       Mathematics & Application                                    20
----------------------------------------------------------------------------------
Technology       Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
---------------------------------------------------------------------------------
Communication    Using visualization for design/creating                      40

我需要得到以下输出:

Technology       Core Language & Communication                                15
                 -----------------------------------------------------------------
                 Mathematics & Application                                    20
                 -----------------------------------------------------------------
                 Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
                 -----------------------------------------------------------------
                 Using visualization for design/creating                      40

不知道如何使用模板来完成。


不支持合并 Kendo UI 网格中的单元格。

所以最后我决定在kendo ui网格渲染后合并单元格,所以我使用javascript在kendo ui Grid的DataBound事件中合并单元格。

function mergeGridRows(gridId, colTitle) {

$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {

    var dimension_col = 1;
    // First, scan first row of headers for the "Dimensions" column.
    $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
        if ($(this).text() == colTitle) {

            // first_instance holds the first instance of identical td
            var first_instance = null;

            $(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;
                } else if (dimension_td.text() == first_instance.text()) {
                    // if current td is identical to the previous
                    // then remove the current td
                    dimension_td.remove();
                    // increment the rowspan attribute of the first instance
                    first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                } else {
                    // this cell is different from the last
                    first_instance = dimension_td;
                }
            });
            return;
        }
        dimension_col++;
    });

});
}

更多细节 http://www.arsnova.cc/web-development-articles/2013-08-26/merging-table-cells-jquery-javascript

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Kendo UI 网格中合并单元格 的相关文章

  • 如何使用 jQuery 在输入元素上实现占位符文本?

    我如何在输入上实现 jquery 提示文本
  • 有没有办法让div在通过jquerydraggable[或等等]拖动时不互相重叠?

    有没有办法让div在通过jquerydraggable 拖动时不互相重叠 我有一堆 div 用户可以拖动它们 但我不能让它们彼此重叠 基本上 我正在创建一个画布 用户可以在其中自由移动网站内容 但在移动它们时不需要与其他内容重叠 有任何想法
  • 捕获客户端验证失败

    我有一个基于 div 点击提交的表单 我还让它在单击时启动等待指示器 我试图找出是否有一种方法可以检测客户端验证是否失败 以便我可以删除等待指示器 在提交尝试后不再显示它 或者我可以手动调用客户端验证在我尝试提交之前 你可以试试 div c
  • jQuery 拖动并跟随鼠标

    我正在尝试创建一个两列的可滑动区域 中间有一个拖动栏 请参阅这个小提琴 http jsfiddle net W7tGj 2 http jsfiddle net W7tGj 2 我试图避免将 jQ UI 添加到其中 因此任何帮助将不胜感激 我
  • jQuery:“$(this).next().next()”有效,但“$(this).next('.div')”无效

    好吧 我正在尝试将这组信息单独隐藏 这有效 arrow click function this next next slideToggle img class arrow src https via placeholder com 40 h
  • a:not(a:not([href])) 选择器

    我希望无论何时 某个操作都与锚标记的点击事件相关联href属性 不开始于mailto and 不以 and 存在任何值 包括空 所以我正在尝试这段代码 a href example com example com a a href Some
  • 通过 jQuery ajax 将 JSON 对象数组发送到 MVC3 操作方法

    模型绑定器不支持 JSON 对象数组吗 下面的代码在发送单个 JSON 域对象作为 ajax post 的一部分时起作用 但是 当发送 JSON 域对象数组时 action 参数为 null var domains DomainName t
  • execCommand 的替代品

    我希望创建一个所见即所得编辑器 使用 jQuery 作为框架 我可以使用不同的方法来简化生产 我现在确实有一个正在工作的编辑 而且运作良好 我使用 iFrame 并将其设计模式设置为打开并从那里开始 然而 有一些事情困扰着我 以更改所选文本
  • 多个引导模式的滚动问题

    我有一个带有大量信息的模态页面 因此您需要滚动 该模式包含指向第二个模式的链接 When I 打开模态 1 单击链接打开模式 2 模式 1 保持在后台 然后关闭模式 2 以便我回到模式 1 modal 1 失去滚动 仍然有一个滚动条 但它不
  • 如何使用 JQuery 创建新的 img 标签,并使用 JavaScript 对象中的 src 和 id?

    我从基本意义上了解 JQuery 但对它绝对是新手 并且怀疑这很容易 我在 JSON 响应中获得了图像 src 和 id 转换为对象 因此在 responseObject imgurl 和 responseObject imgid 中获得了
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属
  • 如何使用本地存储进行活动类?

    如何使用本地存储保存所选菜单项的 cookie Menu ul class nav nav pills li class active a href Customers a li li a href Statics a li li a hr
  • jQuery淡入淡出重复

    我有一个图像 它希望在加载文档时自动淡入淡出 并且应该完成直到文档关闭 请帮帮我 这会做到这一点 function fader fadeIn slow function fadeItOut function fadeItIn fader f
  • 范围滑块 javascript 以小时和分钟为单位

    我试图分别以小时和分钟为单位显示滑块的值 我对 JS 还很陌生 并且仍在尝试了解它是如何工作的 到目前为止 我所拥有的是一个工作滑块 其最大值为 1440 24 小时内的分钟 在 JS 中 我尝试将其划分为小时和分钟 并使用 innerHt
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • jQuery 分钟和秒倒计时器

    我想创建一个 jquery 倒计时器 我尝试了以下代码 但它不起作用 我该怎么办 DEMO https jsfiddle net tbosn210 https jsfiddle net tbosn210 var interval setIn
  • 如何在从数据库异步加载中用占位符替换不存在的图像

    我有一个包含图像的数据库 我需要根据用户的请求即时加载这些图像 这些图像将作为包含 div 容器中的单独 s 的背景图像 类似于图像滚动条 该数据库当前是本地数据库 但这不是我的问题 问题是数据库可能没有我请求的所有图像 并且我可能会得到一
  • 检测滚动到 DIV 底部

    我想检测我是否到达了 div 的底部 我的 div 高度为 400px 溢出隐藏 我不知道正常高度但超过400px 我正在使用这段代码 但它不起作用 任何想法 if article txt scrollTop article txt hei
  • CORS:为什么我的浏览器不发送 OPTIONS 预检请求?

    从我读到的内容来看CORS https en wikipedia org wiki Cross origin resource sharing 我理解它应该按如下方式工作 客户端的脚本尝试获取资源从服务器不同的起源 浏览器拦截这个请求并首先
  • JQuery 循环遍历动态元素并获取数据值

    我正在尝试使用可折叠面板来完成我的要求 sport on click function var thisId this attr id var thisChildren this sportlist thisChildren each fu

随机推荐

  • Symfony2 的 mongoDB 返回一个可记录游标而不是我的实体

    我目前使用 DoctrineMongoDbBundle 向我的 mongodb 数据库发出请求 这是我的控制器中的调用 dm this gt get doctrine odm mongodb document manager entitie
  • 为什么 Google 集合中没有 SortedMultiset?

    谷歌收藏 http code google com p google collections 包含Multiset接口和TreeMultiset类 但是我惊讶的发现没有对应的SortedMultiset界面 类似的东西对于离散概率分布建模非
  • bluimp 的 jQuery 文件上传,如何替换而不是重命名

    首先 可以在这里找到 jQuery 插件 https github com blueimp jQuery File Upload https github com blueimp jQuery File Upload 我正在使用 PHP 版
  • 会话未设置,还是session_destroy? [复制]

    这个问题在这里已经有答案了 可能的重复 PHP 中的 session unset 和 session destroy 有什么区别 https stackoverflow com questions 4303311 what is the d
  • 错误 1066:无法打开别名 - Pig 的迭代器

    刚开始养猪 尝试从文件加载数据并转储它 加载似乎正确 没有抛出任何错误 下面是查询 NYSE 使用 LOAD root Desktop Works NYSE 2000 2001 tsv PigStorage AS 交换 chararray
  • 如何让EF全局记录sql查询?

    我该如何 告诉 EF全局记录查询 我正在读这篇博文 EF 日志记录 http blog oneunicorn com 2013 05 08 ef6 sql logging part 1 simple logging 它一般告诉我们如何记录s
  • 按 SKU 对购物车 WooCommerce 中产品列表底部的产品进行排序

    在 WooCommerce 中 我使用一个代码来显示牛排重量选择表单 保存选择数据并在编辑订单和电子邮件通知时在购物车 结账页面上显示此数据 我的代码还与在将任何产品添加到购物车时自动添加包装的代码相结合 添加包装发生在 SKU 上 Dis
  • 将 UIWebView 标题发送到 UINavigationBar

    我正在尝试将 UIWebView 页面标题发送到 UINavigationBar 如果用户单击链接 UINavigationBar 显示后退按钮 但如果在主页上隐藏后退按钮 我也希望如此 要将标题页检索到 UIWebView 中 您可以使用
  • 了解参考处理程序线程

    我正在继续深入了解 Java 线程 不幸的是我的 Java 认证没有涵盖这一部分 所以唯一的学习方法就是发布一系列愚蠢的问题 经过这么多年的 Java 开发 我有时想知道我还需要学习多少 我现在特别关注引用处理程序线程 Reference
  • 打字。任何 vs 对象?

    使用之间有什么区别吗typing Any相对于object在打字 例如 def get item L list i int gt typing Any return L i 相比 def get item L list i int gt o
  • 如何快速将 void 块传递给 objc_setAssociatedObject

    我正在尝试通过扩展向 UIView 添加点击手势支持 使用 Objective C 非常简单 但是当我尝试在运行时属性上设置 void 返回块时 出现以下错误 错误 类型 gt Void 不符合协议 AnyObject 这是计算的属性 va
  • 如何计算整数中零位的数量?

    我将如何找到 C 中 零 位的数量 假设我有一个整数 int value 276 我有位 100010100 但是如何计算零呢 如果你想要效率 那么 Hackers Delight 一书中有一个很好的实现 22条指令无分支 unsigned
  • 如何使用javascript计算另一个div内的div总数

    如何计算总数div包含在另一个元素中的元素div使用JavaScript The getElementsByTagName 不仅是一个document方法 但可以在任何 DOM 元素上运行 element 按标签名称获取元素是 如同docu
  • 生成多边形内的坐标

    我想将多边形的值分组到一个精细的规则网格中 例如 我有以下坐标 data 2 353 data lats np array 57 81000137 58 15999985 58 13000107 57 77999878 data lons
  • 通过 Javascript 在聚合物元素模板内添加或附加 HTML

    为了使轮播功能在 Polymer 元素内部工作 我以编程方式在元素脚本内部创建 Slick 轮播所需的标记 假设在此代码片段中 this videos 已作为包含 youtube 视频信息的对象数组加载 特别是 id 和 name 属性 C
  • 如何在每次输入退出或取消时中断表单流程?

    我正在使用 BotFramework 在 Net C 中创建一个聊天机器人 在我的一个对话框中 当我开始填写表单流程时 我无法退出流程 直到我填写所有流程为止 是否存在退出和离开表格的可能性 这是我的代码 路易斯对话框 cs LuisInt
  • 注销不会在 FOSUserBundle 中正确销毁/清除会话

    我遇到了一些问题 不知道为什么 当我从由 FOSUserBundle 处理的应用程序注销时 因为当前会话永远不会被破坏 甚至不清楚当我重新登录时会导致问题 因为我在会话上存储了一些数据 这就是我的security yml好像 securit
  • Windows / Powershell 将程序版本获取到变量中

    我很接近 但不在那儿 我可以通过 powershell 获取应用程序的版本 但它附带一堆文本 这个命令 powershell NoLogo NoProfile Command get item Path c myapp exe Versio
  • Material UI + 酶测组件

    我在 React 中有一个组件 我正在尝试用 Jest 测试它 不幸的是测试没有通过 组件代码 import React Component from react import ProductItem from ProductItem Pr
  • 如何在 Kendo UI 网格中合并单元格

    我在 Kendo UI 的官方文档中没有看到任何内容 只是检查是否有人进行了自定义以合并 Kendo UI 网格中的单元格 我有这样的内容 Technology Core Language Communication 15 Technolo