easyui框架实现datagrid多表头设置

本文介绍了如何使用EasyUI框架为Datagrid组件设置多表头,包括单元格的行和列合并,以满足更复杂的数据显示需求。

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

多表头

      通常遇到的都是单表头,也就是表头只有一行,如下图所示:

单表头

      但在实际中我们遇到的不仅仅是单表头,可能遇到多表头,也就是要进行单元格的行和列进行合并,如下图所示:

这里写图片描述

多表头代码设置

      多表头设置代码如下

<div style="width:100%;" data-options="region:'center',title:'入职培训信息',iconCls:'icon-ok'">
        <table id="ddg1" class="easyui-datagrid"
               data-options="
               url:'/entrytrain_info',
               method:'get',
               border:false,
               singleSelect:true,
               fit:true,
               collapsible:false,
               pagination:true,
               pageSize:25,
               pageList:[25,15,10],
               fitColumns:true">
            <thead>
            <tr>

                <th data-options="rowspan:2,field:'tno',align:'center',width:'7%'">工号</th>
                <th data-options="rowspan:2,field:'tname',align:'center'">姓名</th>
                <th data-options="rowspan:2,field:'gender',align:'center',width:'4%'">性别</th>
                <th data-options="rowspan:2,field:'age',align:'center'">年龄</th>
                <th data-options="rowspan:2,field:'work_unit',align:'center'">工作单位</th>
                <th data-options="colspan:3,align:'center'">校本文化</th>
                <th data-options="colspan:3,align:'center'">素质拓展</th>
                <th data-options="colspan:3,align:'center'">师德师风</th>
                <th data-options="colspan:3,align:'center'">教学实务理论</th>
                <th data-options="colspan:3,align:'center'">教学实务实训</th>
                <th data-options="colspan:3,align:'center'">高校教师基础教育理论培训</th>
                <th data-options="colspan:4,align:'center'">资格考试理论成绩</th>
                <th data-options="rowspan:2,field:'professionalskill_grade',align:'center'">专业技能成绩</th>
            </tr>
            <tr>
                <th data-options="field:'campus_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'campus_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'campus_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'quality_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'quality_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'quality_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'morality_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'morality_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'morality_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'teachtheory_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'teachtheory_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'teachtheory_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'teachpractice_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'teachpractice_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'teachpractice_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'educationtheory_start',align:'center',width:'7%'">开始时间</th>
                <th data-options="field:'educationtheory_end',align:'center',width:'7%'">结束时间</th>
                <th data-options="field:'educationtheory_grade',align:'center',width:'4%'">成绩</th>
                <th data-options="field:'educationpolicy_grade',align:'center'">教育政策法规</th>
                <th data-options="field:'educationmorality_grade',align:'center'">教师职业道德</th>
                <th data-options="field:'higheducation_grade',align:'center'">高等教育学</th>
                <th data-options="field:'educationpsychology_grade',align:'center'">教育心理学</th>
            </tr>
            </thead>
        </table>

    </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值