http://www.easyui.info/archives/470.html
今天有朋友问到：“如果设置列标题居中而列内容居右显示？”，仔细查了一下api，目前版本提供了两个相关的列属性，align和styler。align属性设置后会让列标题和列内容的对齐方式一致，而styler是作用于列内容上的，只是可惜了，styler只能定位到td元素，而真正决定列内容样式的是td下的div元素。
对于这种问题，我们应该也经常遇到。其实利用jQuery的强大选择器，要操作到每个单元格都很容易，所以解决这个问题的思路也很简单，在数据加载完以后(这时候内容单元格才形成)，我们查找具体的列或者单元格，然后定义每个单元格的样式，所以定义一下align属性和onLoadSuccess事件就可以了：
实现代码：
- $('#tt').datagrid({
- url: 'datagrid_data2.json',
- title: 'DataGrid - ContextMenu',
- width: 700,
- height: 'auto',
- fitColumns: true,
- columns: [[
- {field: 'itemid',title: 'Item ID',width: 80},
- {field: 'productid',title: 'Product ID',width: 120},
- {field: 'listprice',title: 'List Price',width: 80,align: 'right'},
- {field: 'unitcost',title: 'Unit Cost',width: 80,align: 'center'},
- {field: 'attr1',title: 'Attribute',width: 250},
- {field: 'status',title: 'Status',width: 60,align: 'center'}
- ]],
- onLoadSuccess: function(data){
- var panel = $(this).datagrid('getPanel');
- var tr = panel.find('div.datagrid-body tr');
- tr.each(function(){
- var td = $(this).children('td[field="unitcost"]');
- td.children("div").css({
- "text-align": "right"
- });
- ;
- });
- }
- });
onLoadSuccess事件里面我们操作了内容单元格，标题单元格也很容易操作，只要将tr的查找方式变为以下形式即可：
- var tr = panel.find('div.datagrid-header tr');
能找到具体单元格，所有问题也就迎刃而解了，我们甚至可以做出跟精细的排版，比如说根据列值定义跟具体的样式，大于10的左对齐，小于10的右对齐等等，都很容易实现。