`

easyui datagrid合并单元格

阅读更多
<div class="iteye-blog-content-contain" style="font-size: 14px;">
<pre name="code" class="js">$('#listTable').datagrid({
queryParams:map,
        border : true,
        nowrap : true,
        striped : true,
        fit:true,
        fitColumns:true,
        enableHeaderClickMenu:false,
        enableHeaderContextMenu:false,
        singleSelect: false,
        rownumbers:true,
        idField: 'id',
        url:'schoolsReport/schools_report_info_list.action',
        onLoadSuccess: function (data) {
$(this).datagrid("fixRownumber");
$(this).datagrid('clearSelections');
$(this).datagrid('clearChecked');
},
        columns:[[
        {
            title:'&lt;b&gt;表2:全国旅游业职工教育培训情况年报表&lt;/b&gt;',
            halign:'center',
            colspan:30
            }
        ],[{
        title:'项目',
            align:'left',
            colspan:2,
            rowspan:2
            },
            {
            title:'总计(人次)',
            align:'left',
            width:50,
            halign:'center',
            rowspan:2
            },
            {
            title:'旅游饭店(人次)',
            width:600,
colspan:6
            },
            {
            title:'旅行社(人次)',
            width:500,
colspan:5
            },
            {
            title:'旅游区(点)(人次)',
            width:600,
colspan:6
            },
            {
            title:'旅游车船公司(人次)',
            width:600,
colspan:5
            },
            {
            title:'旅游政部门(人次)',
            width:400,
colspan:4
            },
            {
            title:'其他人员',
            width:100,
rowspan:2
            }
            ],[{
            title:'小计',
            width:50,
            },
            {
            title:'正副总经理',
            width:50,
            },
            {
            title:'部门经理',
            width:50,
            },
            {
            title:'主管',
            width:50,
            },
            {
            title:'服务员',
            width:50,
            },
            {
            title:'其他人员',
            width:50,
            },
            {
            title:'小计',
            width:50, 
            },
            {
            title:'正副总经理',
            width:50, 
            },
            {
            title:'部门经理',
            width:50, 
            },
            {
            title:'导游',
            width:50, 
            },
            {
            title:'其他人员',
            width:50, 
            },
            {
            title:'小计',
            width:50, 
            },
            {
            title:'正副总经理',
            width:50, 
            },
            {
            title:'部门经理',
            width:50, 
            },
            {
            title:'讲解员',
            width:50, 
            },
            {
            title:'服务员',
            width:50, 
            },
            {
            title:'其他人员',
            width:50, 
            },
            {
            title:'小计',
            width:50, 
            },
            {
            title:'正副总经理',
            width:50, 
            },
            {
            title:'部门经理',
            width:50, 
            },
            {
            title:'司机',
            width:50, 
            },
            {
            title:'其他人员',
            width:50, 
            },
            {
            title:'小计',
            width:50, 
            },
            {
            title:'局处级干部',
            width:50, 
            },
            {
            title:'科级干部',
            width:50, 
            },
            {
            title:'其他人员',
            width:50, 
            }
        ],[{
            field:'name1',
            title:'甲',
            width:50,
            align:'left',
            halign:'center'
            },
            {
            field:'name2',
            title:'乙',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff01',
            title:'1',
            width:50,
            halign:'center'
            },{
            field:'ff02',
            title:'2',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff03',
            title:'3',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff04',
            title:'4',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff05',
            title:'5',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff06',
            title:'6',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff07',
            title:'7',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff08',
            title:'8',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff09',
            title:'9',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff10',
            title:'10',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff11',
            title:'11',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff12',
            title:'12',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff13',
            title:'13',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff14',
            title:'14',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff15',
            title:'15',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff16',
            title:'16',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff17',
            title:'17',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff18',
            title:'18',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff19',
            title:'19',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff20',
            title:'20',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff21',
            title:'21',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff22',
            title:'22',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff23',
            title:'23',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff24',
            title:'24',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff25',
            title:'25',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff26',
            title:'26',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff27',
            title:'27',
            width:50,
            align:'right',
            halign:'center'
            },{
            field:'ff28',
            title:'28',
            width:50,
            align:'right',
            halign:'center'
            }]]
    });</pre>
<p> </p>
<p>效果图:</p>
<p><br><img src="http://dl2.iteye.com/upload/attachment/0114/4522/fc6d26ba-b754-30bf-8ba5-5a8d983a8a25.png" alt=""><br> </p>
<p> </p>
</div>
  • 大小: 7.7 KB
分享到:
评论

相关推荐

    easyUI datagrid合并单元格(支持子对象的属性)

    easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);

    DataGrid表头合并和单元格内容合并-升级版

    这通常是通过自定义DataTemplate实现的,特别是在WPF中,我们可以利用DataTemplate的逻辑来决定何时合并单元格内容。例如,如果同一组数据的某字段值相同,那么可以合并这些单元格,只显示一次该值。 在"headerSpan...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    easyui datagrid

    easyui datagrid 单元格合并及合并单元格的背景设置

    datagrid 4种解决table对齐

    通过`align-items`和`justify-items`可以控制单元格内容的对齐方式,进一步确保表头和列的对齐一致性。 4. JavaScript或jQuery插件: 对于更复杂的需求,如动态对齐或响应式设计,可以借助JavaScript或jQuery插件...

    jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示

    http://blog.csdn.net/tianxiawudi0720/article/details/47401399

    EasyUI指定列-合并相同数据行

    // 调用mergeCellsByField()合并单元格,传datagrid的id和列名,多列用逗号隔开 extendgrid.mergeCellsByField("coal_arrive","VoyageName"); } }, }); ``` 这里使用`#coal_arrive`作为数据网格的标识,并设置...

    jquery easyui datagrid demo 详解

    在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...

    EasyUI tutorial 中文版 chm

    easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的...

    datagrid-export.js

    该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    在EasyUI中,可以使用appendRow方法添加一个新行,并通过mergeCells方法来合并这一行的多个单元格。这样做可以创建一个具有视觉效果的提示信息单元格,让其覆盖整个行空间。同时,如果不希望显示分页导航条,可以...

    EasyUI表格合并,及echarts折线图,导出折线图为图片

    在EasyUI的datagrid中,通过设置特定的属性,比如`colspan`和`rowspan`,可以实现单元格的跨行或跨列。这在显示复杂的数据结构或者需要自定义布局时非常有用。例如,当需要在一个表格中合并某些具有关联性的数据时,...

    datagrid-export.zip

    这个“datagrid-export.zip”文件提供了一种解决方案,使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式,包括合并的单元格、复杂的表头、背景色和文字颜色等,方便地导出到Excel中,实现“所见即所得...

    easyui structs java环境下多级单元格合并及完美导出excel

    easyui structs java环境下多列单元格合并及完美导出excel,合并采用递归方式,例如第一列相同的合并,第二列的合并依据第一列确定,以此类推。网上的资料只能合并一列。完美导出到excel,保留了多列合并的结果,一...

    基于easyui checkbox 的一些操作处理方法

    1、获取已勾选的行: var rows = $(‘#datagrid’).datagrid(‘getChecked’); 2、判断checkbox是否全选: ...以上这篇基于easyui checkbox 的一些操作处理方法就是小编分享给大家的全部内容了,希望能给大家一个参

    easyui合并相同行

    1. **EasyUI基础**:首先,你需要了解EasyUI的基本用法,包括如何创建表格(`datagrid`)、定义列(`columns`)以及数据绑定(`data`)。 2. **数据处理**:在合并相同行之前,可能需要对后端返回的数据进行预处理...

    Easyui指定列合并.rar_源码

    在"Easyui指定列合并"的源码中,开发者可能已经实现了这样一个功能,通过遍历数据并比较同一列的值,确定哪些单元格需要合并,并使用CSS样式来实现视觉上的合并效果。这个过程可能包括以下几个步骤: 1. **数据...

    easyui学习笔记(九)源码

    - 行渲染:`datagrid.bodyCell` 负责行数据的显示,包括单元格的合并、编辑模式的切换等。源码中还包含了对数据格式化和模板支持的处理。 4. **自定义扩展**: - 通过源码,我们可以学习如何扩展 `datagrid` 的...

    easyui-bufferview.js(修改后)

    bufferview滚动时,滚动前后合并单元格修改, 要在自己的文件中,加入单元格合并方法: function _setDefaultMearge(rows) { var rows = $("#tt").datagrid('getRows'); var len = rows.length; var preIndex = 0...

    jQuery EasyUI API 中文文档 - DataGrid数据表格

    4. 列的特性:DataGrid的Column特性中包含了colspan和rowspan属性,允许合并单元格,创建更复杂的表格布局。同时,columns中每个元素的配置对象可以定义标题、宽度、对齐方式、是否可排序等。 通过上述的知识点,...

Global site tag (gtag.js) - Google Analytics