Jquery 插件 DataTable 单元格设为跨行遇到的问题

最新推荐文章于 2021-08-05 20:37:50 发布

Joan

最新推荐文章于 2021-08-05 20:37:50 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发记录文章标签： jquery 插件

本文链接：https://blog.youkuaiyun.com/cvsuser113/article/details/20073297

开发记录专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在使用Jquery插件DataTable时遇到的单元格跨行显示问题，特别是当数据动态加载时，如何正确设置rowspan以避免DataTable抛出未知参数警告。通过分析代码片段，展示了如何处理数据结构`data`，并提供了解决跨行显示的条件判断方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我需要使用DataTable实现某些单元格跨列，绘制如图(1-1)所示的表格，并且数据是动态加载的，在这里数据格式如data。

注意：下面片段代码的else必须添加，否则DataTable会抛出warning异常：requested unkonw parameters "2" from the data source for row 2.

@if(mark==true){

mark =false;

<tdrowspan="@item.list.Count()"id="@item.NodeItemId"class="nodeId">@item.DealStepsName</td>

}else{

<tdstyle="display:none"></td>

}

列1	列2	列3
a	a2	a3
bd	b2	b3
bd	d2	d3

图（1-1）

代码片段：

data={

[ {value1:a, list:[ { value2:a2,value3:a3 } ] },

{value1:bd, list:[ { value2:b2,value3:b3 },{ value2:d2,value3:d3 } ] } ]

}

$(document).ready(function () {

$("#tblDealList").dataTable();

}

<table id="tblDealList" class="display">
                <thead>
                    <tr>
                        <th>列1</th>
                        <th>列2</th>
                        <th>列3</th>
                    </tr>
                </thead>
                <tbody>
                    @{
                        var mark=true;
                        if (data!= null)
                        {
                            foreach (var item in data)
                            {
                                mark = true;
                                foreach(var u in item.list){
                                    <tr>
                                       @if(mark==true){
                                            mark = false;
                                        <td rowspan="@item.list.Count()">@item.value1</td>
                                        }else{
                                           <td style="display:none"></td>
                                       }
                                        <td>@u.value2</td>
                                        <td>@u.value3</td>
                                    </tr>
                                }

                            }
                        }
                    }
                </tbody>
            </table>