现在的位置: 首页 > easyui > Grid > datagrid > 正文
浅谈datagrid详细操作单元格样式
2012年09月10日 datagrid ⁄ 共 1496字 评论数 10 ⁄ 被围观 28,700 views+
文章目录
[隐藏]

今天有朋友问到:“如果设置列标题居中而列内容居右显示?”,仔细查了一下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的右对齐等等,都很容易实现。

效果演示:

http://www.easyui.info/easyui/demo/datagrid/062.html

目前有 10 条留言 其中:访客:6 条, 博主:4 条

  1. 就是哈哈 : 2012年09月11日10:07:50  -49楼 @回复 回复

    只有更新速度够快,俺们这些粉丝才能更忠实!

  2. 小安 : 2013年03月01日16:53:32  -48楼 @回复 回复

    这个东西我还是偏向于后台处理,毕竟后台的速度要远超前台,数据越多越明显,缺点就是不够灵活。基本上功能定了,一般不怎么修改

  3. 小明 : 2013年03月08日17:33:49  -47楼 @回复 回复

    我的datagrid中有一个footer(即showFooter:true).
    在这个footer中,显示了一些摘要信息,比如金额总计什么的.
    现在我想设置这个footer的颜色什么的,比如字体显示成粗体,红色.
    我怎么才能得到这个footer的引用呀.


    • 管理员
      世纪之光 : 2013年03月08日18:42:02  地下1层 @回复 回复

      这个问题呢,其实你要触类旁通呀,用chrome 火狐等浏览器均可分析出datagrid的结构,分析出结构也就很容易用jQuery获得了啊。以下代码就能得到footer的各行tr:
      var tr = panel.find(‘div.datagrid-footer tr’);

      • 小明 : 2013年03月09日11:47:13  地下2层 @回复 回复

        前端不熟啊,刚接触,平时一直写后台代码的.js,jquery基本没碰过,现在自己在一边做东西,一边学,感觉easyui是个很好的切入点,入门很容易,现在开始慢慢往里深入了,开始吃力了.
        关键时间不够用,主要精力还是集中在后台代码上.前端自己想搞搞看,把几个系统的页面想做的漂亮点.


        • 管理员
          世纪之光 : 2013年03月09日19:42:10  地下3层 @回复 回复

          你的思路很好,不过最好是把javascript基础打牢靠点,否则你jquery和easyui你都无法真正的切入。

  4. Andy : 2015年01月29日17:56:50  -46楼 @回复 回复

    如果有固定列的情况,这么查找可能就不好使了。
    请教世纪之光,如果我想单元格也有焦点,比如键盘上下控制行焦点移动,左右控制单元格焦点移动,有没有好的方案?


    • 管理员
      世纪之光 : 2015年01月29日21:44:28  地下1层 @回复 回复

      所谓的焦点应该只是指hover时候给单元格一个“特殊样式”,上下左右移动焦点这个思路就很明显了,将keyup事件委托在整个panel上,然后维护这个“特殊样式”就可以了。

  5. novice : 2016年06月15日16:41:37  -45楼 @回复 回复

    关于这个在java页面上面用table写好了一个框架用这个datagrid写好之后,我用的页面时,分为左右两个部分的,左边的这个是一个可以折叠的菜单栏,不折叠的时候,右边的表格或是通过echart导入的图表都是 居中或是两边的留白都是很少的,但是一旦,左边的这个菜单栏折叠了的时候右边的那个表格就会有很大的一片空白,求大神指教


    • 管理员
      世纪之光 : 2016年06月23日14:13:24  地下1层 @回复 回复

      神也不是万能的啊,无法根据描述就能想到原因。

给我留言

留言无头像?


×