Easyui的datagrid组件，销复杂的合并单元格的实现方法

最新推荐文章于 2020-12-19 14:26:34 发布
最新推荐文章于 2020-12-19 14:26:34 发布
阅读量273 收藏
点赞数
分类专栏： easyui 文章标签： easyui datagrid jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qbqdjj/article/details/106146986
版权
本文介绍如何在Easyui的datagrid组件中实现复杂的合并单元格操作，包括复选框的向下合并和‘说明’列的横向合并，以达到两行显示一条内容的效果。同时提醒读者，为获取最新文档，应查阅Easyui英文官网。
摘要由CSDN通过智能技术生成

效果如下图：
如图：主要有两处合并，一是复选框向下合并，二是
主要有两处合并，一是复选框向下合并，二是第2行“说明”向右合并，简而言之就是两行显示一条内容。

              // easyui版本1.8.1              
              $(selector).datagrid({
   
                  url:url,
                  //......
                  //其他属性设置略过
                  //......
                  ,columns : [[  // 列设置
                      {
   field:'id',checkbox:true}   //这一列需要向下合并
                      ,{
   field:'title',title:'规则',width:200,formatter:
最低0.47元/天 解锁文章
qbqdjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DataGridView合并单元格（纵向合并及横向合并）
04-12
DataGridView合并单元格（纵向合并及横向合并） 京华志&精华志出品 分享资源 C# ASP.NET SQL DBA 源码
JQuery EasyUI datagrid 复杂表头处理
weixin_33801856的博客
01-19 259
下面是我项目中和网上收集的EasyUI的表头处理的,合适的拿去用吧.例子1:$('#day_health').datagrid({                url: "sqb_bweb_day_health.aspx?mode=day_health",                pagination: true,                total: 2000,          ...
easyui datagrid 实现行合并
博客
12-27 3571
点击打开链接 $("#yqsxmwh").datagrid({ 　　onLoadSuccess: function(data){                      //data是默认的表格加载数据，包括rows和Total 　　　　var mark=1;                                                 //这里涉及到简单的运算，
JQuery easyUI DataGrid 创建复杂列表头
blog's Anly
08-10 6107
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the following example shows: View Demo In this example, we use flat data to populate the DataGrid data,
EasyUI：中datagrid数据表格的删除、编辑、保存、撤销功能实现
KaiSarH
06-23 1857
easyUI中datagrid数据表格的删除、编辑、保存、撤销功能实现
DataGrid表头合并和单元格内容合并-升级版
03-21
这通常是通过自定义DataTemplate实现的，特别是在WPF中，我们可以利用DataTemplate的逻辑来决定何时合并单元格内容。例如，如果同一组数据的某字段值相同，那么可以合并这些单元格，只显示一次该值。 在"headerSpan...
easyui的datagrid生成合并行,合计计算价格
08-08
在描述中提到的"easyui的datagrid生成合并行,合计计算价格"，指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释： 1. EasyUI DataGrid组件： EasyUI的...
jquery easyui datagrid demo 详解
12-16
在实际应用中，Datagrid 还有很多高级功能，如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等，可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用，可以大大提高开发效率，为用户提供更加友好的...
datagrid-export.zip
01-22
这个“datagrid-export.zip”文件提供了一种解决方案，使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式，包括合并的单元格、复杂的表头、背景色和文字颜色等，方便地导出到Excel中，实现“所见即所得...
EasyUI表格合并，及echarts折线图，导出折线图为图片
最新发布
01-23
在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid组件来实现表格的行或列合并。在EasyUI的datagrid中，通过设置特定的属性，比如`colspan`和`rowspan`，可以实现单元格的跨行或跨列。这在...
Easyui datagrid数据清空
三斗的博客
11-11 1983
/*将datagrid赋值空数据，实现如下：*/ $("#dg").datagrid("loadData", { total: 0, rows: [] }); /*或者*/ $("#dg").datagrid("loadData", []);
easyui datagrid做复杂表
whaleluo的博客
11-06 1847
<table class="easyui-datagrid" name="goodslist" style="width: auto; height: auto;" title="" id="tjList"                data-options="url:'goodReportController.do?findGoods'"                
easyui datagrid清空数据和去除表头
小老弟的博客
07-22 7853
清空数据： [javascript] view plain copy $('#domainlist').datagrid('loadData',{total:0,rows:[]});   去除表头： [javascript] view plain copy $('#domain
easyui DataGrid根据相同数据合并单元格方法
weixin_30872733的博客
06-03 212
可以再onLoadSuccess的方法里处理下 var rows=$('#tbList').datagrid("getRows");//获取行的数据 for(var i=0;i<rows.length;i++){ 　　　　　　　//根据情况判断相同的数据，我这里是根据ID var id=rows[i].ID...
Jquery easyUI-DataGrid 复杂表头设计方法
Qin_Shuai_Shuai的博客
11-16 774
Jquery easyUI-DataGrid 复杂表头设计方法
miniJquery-datagrid-合并单元格
qq_38708506的博客
08-17 1285
官方的文档有demo,我们就不说官方的：参考http://www.miniui.com/docs/api/index.html#ui=datagrid 这里的rowIndex,columnIndex分别代表行和列索引，均是从0开始算，rowSpan和colSpan分别代表要合并的行和列的宽度。  项目中需把相同的商品把它的出库及入库及结存库位进行合并单元格处理效果如下： &lt;div ...
邪魔歪道用js系列（1）datagrid编辑器销毁
YrI/OG
04-28 1884
今儿在修改公司项目时，经理告诉我要将easyui的datagrid在编辑器情况下直接提交 说是用户那边需要这么做，愉快的接手后发现没这么简单 首先，datagrid编辑完后若不点击其他行不会触发任何方法*注意，是任何方法 也就是说 这些都不可用*当然，如果你的项目里使用了复选框或者自定义添加了按钮什么的无视这条吧 这下可难办了，因为需求那边说是编辑完列里内容直接提交的，这些方法用不了只能
Jquery EasyUI Dialog close和destroy方法
NIITYZU的专栏
05-04 9656
在使用JQuery EasyUI做项目的时候，经常需要使用Dialog实现弹出框效果，但是在“查看日常活动链接”的时候，有两个模块调用的是同一个Dialog页面，这个时候就出现页面混乱情况，要么就是Dialog内容无法打开，其实这是Dialog的close和destroy用法的问题。       解决办法：         使用close的方法来关闭dialog时，此dialog并不是完全消失
easyui 合并列_easyUI合并DataGrid单元格 | 学步园
weixin_39610678的博客
12-19 258
@author YHCdatagrid经常需要合并一些单元格,这个教程将向你展示如何在datagrid合并单元格.合并你的datagrid 单元格,简单的调用'mergeCells' 方法和传入合并信息参数告诉datagrid如何合并单元格,在所有合并单元格中,除了第一个单元格,将会隐藏当单元格合并.创建DataGridurl="data/datagrid_data.json"singleSele...
easyui 修改单元格内容_EasyUI DataGrid刷新需要修改的单元格/整行数据的方法
05-24
如果想要修改 EasyUI DataGrid 中的单元格内容，可以使用以下方法： 1. 获取 DataGrid 对象中的指定单元格：可以使用 `datagrid('getEditor', {index: rowIndex, field: fieldName})` 方法获取到指定单元格的编辑器对象。 2. 修改单元格内容：可以使用 `textbox('setValue', value)` 等方法来修改单元格的值。 3. 刷新 DataGrid：使用 `datagrid('refreshRow', rowIndex)` 方法刷新指定行数据。 下面是一个示例代码： ```javascript // 获取指定单元格编辑器对象 var editor = $('#datagrid').datagrid('getEditor', {index: 0, field: 'columnName'}); // 修改单元格内容 $(editor.target).textbox('setValue', 'new value'); // 刷新指定行数据 $('#datagrid').datagrid('refreshRow', 0); ``` 如果需要修改整行数据，可以使用 `datagrid('updateRow', {index: rowIndex, row: newData})` 方法来更新整行数据。其中 `newData` 是一个对象，包含了需要更新的行数据。 ```javascript // 获取需要更新的行数据 var row = $('#datagrid').datagrid('getRows')[0]; // 修改行数据 row.columnName = 'new value'; // 更新整行数据 $('#datagrid').datagrid('updateRow', {index: 0, row: row}); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值