DataGrid合并单元格(wpf)

在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了。其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图

代码如下

首先定义两个模板,一个用于合并的Header显示

<DataTemplate x:Key="MergeHeader">
            <DataGrid HorizontalAlignment="Stretch" HorizontalGridLinesBrush="Transparent" BorderThickness="0" Margin="0" CanUserReorderColumns="False" CanUserSortColumns="False" CanUserResizeColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="产品批号" Width="*" IsReadOnly="True" />
                    <DataGridTextColumn Header="生产日期" IsReadOnly="True" Width="100" />
                    <DataGridTextColumn Header="有效期至" IsReadOnly="True"  Width="102" />
                    <DataGridTextColumn Header="tedsd" Width="126" IsReadOnly="True" />
                    <DataGridTextColumn Header="tesddff" Width="125"  IsReadOnly="True"/>
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="DataGridColumnHeader">
                        <Setter Property="Template" Value="{StaticResource styleMergeHeader}"/>
                    </Style>
                </DataGrid.Resources>
            </DataGrid>
        </DataTemplate>另外一个模板用于显示合并明细信息,ItemsSource要绑定到你数据源的一个List属性,意思就是你把合并的明细信息放入到主DataGrid数据源的子List属性中,因为明细中不要显示Header所以把Header隐藏

<DataTemplate x:Key="MergeColumn">
            <DataGrid Name="dgMergeGrid" ItemsSource="{Binding MerageData}" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Loaded="dgMergeGrid_Loaded" BorderThickness="0,0,0,0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" HeadersVisibility="None"  AutoGenerateColumns="False" IsReadOnly="True">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="产品批号" Width="*" IsReadOnly="True" Binding="{Binding produceBatchNo}">

                    </DataGridTextColumn>
                    <DataGridTextColumn Header="生产日期"  IsReadOnly="True" Width="100" Binding="{Binding produceDate}" />
                    <DataGridTextColumn Header="有效期至"  IsReadOnly="True"  Width="102" Binding="{Binding exprieDate}" />
                    <DataGridTextColumn Header="dfafa"  Width="126" IsReadOnly="True" Binding="{Binding smallNum}" />
                    <DataGridTextColumn Header="fafsfdfd"  Width="125"  IsReadOnly="True" Binding="{Binding packUnit}" />
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="DataGrid">
                        <!--网格线颜色-->
                        <Setter Property="HorizontalGridLinesBrush">
                            <Setter.Value>
                                <SolidColorBrush Color="Transparent"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="VerticalGridLinesBrush">
                            <Setter.Value>
                                <SolidColorBrush Color="LightBlue"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </DataGrid.Resources>
            </DataGrid>
        </DataTemplate>

然后在你的主DataGrid中的显示明细信息的列设置模板就可以了
<DataGridTemplateColumn  Header="批次信息" Width="580" HeaderTemplate="{StaticResource MergeHeader}" CellTemplate="{StaticResource MergeColumn}">
                    <DataGridTemplateColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Background" Value="LightBlue"></Setter>
                        </Style>
                    </DataGridTemplateColumn.HeaderStyle>
                </DataGridTemplateColumn>

原文链接:http://www.cnblogs.com/renzhendewo/p/4238757.html

时间: 2024-11-09 07:26:17

DataGrid合并单元格(wpf)的相关文章

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

WPF DataGrid 合并单元格

在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图 代码如下 首先定义两个模板,一个用于合并的Header显示 <DataTemplate x:Key="MergeHeader">             <DataGrid Horizo

jQuery_easyUI 合并单元格 (DataGrid 数据表格)

<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagrid" rownumbers="true" data-options="fitColumns: true, iconCls: 'icon-edit', scrollbarSize:0, multiSort:true, remoteSort:true, paginatio

EasyUI DataGrid根据字段动态合并单元格

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri=&

JQuery EasyUI DataGrid动态合并单元格

/**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");        */        function MergeCells(tableID, fldList) {            var Arr = fldList.split(",&quo

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" +

WPF 导出Excel(合并单元格)

DataTable 导出Excel(导出想要的列,不想要的去掉) enum Columns{A1=1,B1,B2,B3,B4,B5} MisroSoft.Office.Interop.Excel.Application excelApp=MisroSoft.Office.Interop.Excel.Application excelApp(); Workbook wb=excelApp.Workboype.Missing);//创建工作薄 Worksheet ws=(Worksheet )wb.

easyui 自动动态合并单元格

.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("grid","supply_fullname,in_supply,in_no,in_sales"); } } function mergeCellsByField(tableID, colList) { //alert(tableI

easyUI---datagrid合并单元格代码实现

1.html部分: <div id="table1"></div> 2.js部分: $('#table1').datagrid({ data : data, loadFilter: pagerFilter, height: $(document).height()*0.87, striped: true, selectOnCheck: true, pagination: true, pageSize:10, pageList:[10,20,30,40,50],