【开发笔记】使用easyUI DataGrid绑定本地数据，并合并列相同行的字段

easyUI DataGrid绑定本地数据及表格列合并实战

最新推荐文章于 2023-12-01 08:36:26 发布

原创

最新推荐文章于 2023-12-01 08:36:26 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JS #easyUI #表格合并

这篇开发笔记详细介绍了如何使用easyUI的DataGrid组件绑定本地数据，并实现表格中相同行字段的合并。通过HTML和JS代码示例，展示了从数据绑定到列合并的完整过程，特别强调了mergeCellsByField()函数在数据绑定后调用以完成表格的动态合并效果。

看标题有点绕，好吧，那就先上结果图

这就是最终的结果图，那我们一步一步来

先实现绑定数据

HTLM

<table id="WJDCReport" class="easyui-datagrid" style="width:auto;" toolbar="#toolbar" data-options="nowrap: false">
                    <thead>
                        <tr>
                            <th data-options="field:'Title', width:100">问卷问题</th>
                            <th data-options="field:'OptionValue', width:100">问卷选项</th>
                            <th data-options="field:'Answer', width:100">文本内容</th>
                            <th data-options="field:'NickName', width:100">微信昵称</th>
                            <th data-options="field:'CommunityName', width:100">小区</th>
                            <th data-options="field:'BuildName', width:100">