datagrid详细操作单元格样式 设置列标题居中而列内容居右显示

原创 2013年12月05日 22:11:21
仔细查了一下api,目前版本提供了两个相关的列属性,align和styler。align属性设置后会让列标题和列内容的对齐方式一致,而styler是作用于列内容上的,只是可惜了,styler只能定位到td元素,而真正决定列内容样式的是td下的div元素。

对于这种问题,我们应该也经常遇到。其实利用jQuery的强大选择器,要操作到每个单元格都很容易,所以解决这个问题的思路也很简单,在数据加载完以后(这时候内容单元格才形成),我们查找具体的列或者单元格,然后定义每个单元格的样式,所以定义一下align属性和onLoadSuccess事件就可以了:

实现代码:

  1. $('#tt').datagrid({   
  2.     url: 'datagrid_data2.json',   
  3.     title: 'DataGrid - ContextMenu',   
  4.     width: 700,   
  5.     height: 'auto',   
  6.     fitColumns: true,   
  7.     columns: [[   
  8.         {field: 'itemid',title: 'Item ID',width: 80},   
  9.         {field: 'productid',title: 'Product ID',width: 120},    
  10.         {field: 'listprice',title: 'List Price',width: 80,align: 'right'},    
  11.         {field: 'unitcost',title: 'Unit Cost',width: 80,align: 'center'},    
  12.         {field: 'attr1',title: 'Attribute',width: 250},    
  13.         {field: 'status',title: 'Status',width: 60,align: 'center'}   
  14.     ]],   
  15.     onLoadSuccess: function(data){   
  16.         var panel = $(this).datagrid('getPanel');   
  17.         var tr = panel.find('div.datagrid-body tr');   
  18.         tr.each(function(){   
  19.             var td = $(this).children('td[field="unitcost"]');   
  20.             td.children("div").css({   
  21.                 "text-align""right"  
  22.             });   
  23.             ;   
  24.         });   
  25.     }   
  26. });  

onLoadSuccess事件里面我们操作了内容单元格,标题单元格也很容易操作,只要将tr的查找方式变为以下形式即可:

  1. var tr = panel.find('div.datagrid-header tr');  

能找到具体单元格,所有问题也就迎刃而解了,我们甚至可以做出跟精细的排版,比如说根据列值定义跟具体的样式,大于10的左对齐,小于10的右对齐等等,都很容易实现。

完美解决在wpf datagrid让列标题居中以及列内容居中

一般我们要实现居中设置 HorizontalContentAlignment="Center" VerticalContentAlignment="Center"就可以了, 但是datagrid的Da...

WPF 如何让DataGrid中的列标题居中

POI中设置Excel单元格格式样式(居中,字体,边框,背景色、列宽、合并单元格等)

HSSFSheet sheet = workbook.createSheet("sheet1");//新建sheet页 HSSFCellStyle cellStyle = wb.createCellS...
  • tolcf
  • tolcf
  • 2015年09月10日 17:53
  • 10290

POI中设置Excel单元格格式样式(居中,字体,边框等)

创建sheet什么的就不多说了,直接进入正题      HSSFCellStyle cellStyle = wb.createCellStyle();     一、设置背景色:      cellSt...

POI中设置Excel单元格格式样式(居中,字体,边框等)

创建sheet什么的就不多说了,直接进入正题 HSSFCellStyle cellStyle = wb.createCellStyle(); 一、设置背景色:cellStyle.setFillFor...

POI中设置Excel单元格格式样式(居中,字体,边框等)

创建sheet什么的就不多说了,直接进入正题 [java] view plaincopyprint? HSSFCellStyle cellStyle = wb.createCell...
  • spp_1987
  • spp_1987
  • 2013年10月31日 11:32
  • 66098

POI中设置Excel单元格格式(背景色,居中,字体,边框,列宽,行高,自动换行等)

EXCEL相关的常规内容,注释比较详细,希望对读者有一定的帮助 HSSFWorkbook wb = new HSSFWorkbook(); //创建HSSFWorkbook 对象 HSSFSheet...

QT调用Excel时,设置自动调整列宽和所有单元格居中

楼主最近公司项目需要利用QT条用
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:datagrid详细操作单元格样式 设置列标题居中而列内容居右显示
举报原因:
原因补充:

(最多只允许输入30个字)