需求如下

现有数据列三列

Name,Age,CreateDate

数据

张三,18,2000-12-09 :12:34:56

李四,28,2000-12-09 :12:34:56

王麻子,38,2000-12-09 :12:34:56

Jquery Easyui DataGrid中列设置

{ field: 'Name', title: '名称', width: 120 ,align:left},
{field: 'Age', title: '年龄', width: 120 ,align:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center},

以上的align属性对列表名和数据都有效,就是列名和数据对齐方式是一样的,

--------------------- --------------------- ---------------------

要想不一样,必须能够单独设置列名或者数据行,对column增加一个字段,

第一种方式,假设align针对列名有效,可以增加一个dataalign针对数据列有效

{ field: 'Name', title: '名称', width: 120 ,align:center,dataalign:left},
{field: 'Age', title: '年龄', width: 120 ,align:center,dataalign:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center,dataalign:left},

在onLoadSuccess添加如下代码,针对每个数据列重新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
onLoadSuccess: function (data) {
  var fields=$("#tt").datagrid('getColumnFields',false);
  //获取数据表的每一行,注意如果不加.datagrid-view2限制,则含有行号表
  var bodyTts = $(".datagrid-view2 .datagrid-body table tr.datagrid-row");
  bodyTts.each(function (ii, objj) {
    //datagrid主体 table 的每一个tr 的td们
    var bodyTds = $(objj).children();
    bodyTds.each(function (i, obj) {
      //获取当前列的信息
      var col = $("#tt").datagrid('getColumnOption',fields[i]);
      if (!col.hidden && !col.checkbox)
      {
        var dataalign=col.dataalign||col.align||'left';
        $("div:first-child", obj).css("text-align", dataalign);
      }
    })
  })
}

这种方式的坏处在于数据一般很多,所以遍历这些数据需要花比较多时间

--------------------- --------------------- ---------------------

第二种方式,假设column里面的align是针对数据有效的,另外增加一个headalign来设置表头列对齐

{ field: 'Name', title: '名称', width: 120 ,align:center,headalign:left},
{field: 'Age', title: '年龄', width: 120 ,align:center,headalign:right},
{ field: 'CreateDate', title: '创建日期', width: 120,align:center,headalign:left},

 1 onLoadSuccess: function (data) {
2 var fields=$("#tt").datagrid('getColumnFields',false);
3 //datagrid头部 table 的第一个tr 的td们,即columns的集合
4 var panel = $("#tt").datagrid("getPanel");
5 var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();
6
7 //重新设置列表头的对齐方式
8 headerTds.each(function (i, obj) {
9 var col = $("#tt").datagrid('getColumnOption',fields[i]);
10 if (!col.hidden && !col.checkbox)
11 {
12 var headalign=col.headalign||col.align||'left';
13 $("div:first-child", obj).css("text-align", headalign);
14 }
15 })
16 }

其实上述两段代码可以看出,第二种方式开销比第一种小很多,所以推荐第二种

红色的#tt是我datagrid的id,请用的时候改成你自己的

上述两种使用方法都是直接配置+代码方式

--------------------- --------------------- ---------------------

第三种方式其实就是第二种 只不过算是扩展,使用起来更简单

 1 /**
2 * 扩展表格列对齐属性:
3 * 自定义一个列字段属性:
4 * headalign :原始align属性针对数据有效, headalign针对列名有效
5 *
6 */
7 $.extend($.fn.datagrid.defaults,{
8 onLoadSuccess : function() {
9 var target = $(this);
10 var opts = $.data(this, "datagrid").options;
11 var panel = $(this).datagrid("getPanel");
12 //获取列
13 var fields=$(this).datagrid('getColumnFields',false);
14 //datagrid头部 table 的第一个tr 的td们,即columns的集合
15 var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();
16 //重新设置列表头的对齐方式
17 headerTds.each(function (i, obj) {
18 var col = target.datagrid('getColumnOption',fields[i]);
19 if (!col.hidden && !col.checkbox)
20 {
21 var headalign=col.headalign||col.align||'left';
22 $("div:first-child", obj).css("text-align", headalign);
23 }
24 })
25 }
26 });

使用方法:

保存为jquery.easyui.datagrid2.js文件,引用

添加<script src="jquery.easyui.datagrid2.js" type="text/javascript"></script>

增加headalign属性

{ field: 'Name', title: '名称', width: 120 ,align:center,headalign:left}

-------------------------------------------------

第四种方式,源码修改,终极大法

我是用Jquery Easyui  1.2.4的源码(未经加密的)来说明的,其它版本大致应该不会相差很远

其实主要就是text-align这个属性上面

在源码搜索text-align,第7929行有如下代码(buildGridHeader方法内)

cell.css('text-align', (col.align || 'left'));

这句话就是修改列表头的对齐方式.默认是left,也就是说不用设置,就是left

很明显,还是套用第二种方式的,列增加headalign属性,7929行改成

cell.css('text-align', (col.headalign||col.align||'left'));

然后,就结束了,哈哈

其实你要是喜欢针对数据列dataalign,9496行也有text-align(renderRow方法内)

style += 'text-align:' + (col.align || 'left') + ';';

可以用来等同第一种方式

style += 'text-align:' + (col.dataalign||col.align||'left') + ';';

如果你喜欢折腾源代码,请使用第四种,最简单,哈哈

如果你喜欢干净的源码,且配置少,代码少,可以用第三种方式

如果你喜欢麻烦,可以用第二或者第一种方式

JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)的更多相关文章

  1. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  2. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

  3. 修改easyui中datagrid表头和数据不能分开对齐的BUG。

    easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...

  4. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  5. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  6. easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

    EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...

  7. 运用EasyUI中datagrid读取数据库数据实现分页

    1dao层 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate ...

  8. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  9. jQuery EasyUI之DataGrid使用示例

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...

随机推荐

  1. linux服务端的网络编程

    常见的Linux服务端的开发模型有多进程.多线程和IO复用,即select.poll和epoll三种方式,其中现在广泛使用的IO模型主要epoll,关于该模型的性能相较于select和poll要好不少 ...

  2. mysql5.7.14安装与配置

    参考文章链接: http://jingyan.baidu.com/article/afd8f4de9006d934e286e9fd.html http://www.cnblogs.com/wenthi ...

  3. JavaScript学习总结【1】、初识JS

    1.什么是 JavaScript? JavaScript 是一门跨平台.面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.应用于 HTML 文档能够在 ...

  4. mysql基本介绍和优化技巧

    一. mysql框架和基本介绍 1. 框架图 更详细: 2. 存储引擎 MYISAM与INNODB对比: MYISAM:mysql5.1及以前版本的默认存储引擎.支持全文检索,压缩,表级锁等,但不支持 ...

  5. Win7 下,离线安装 Android Studio 1.0.1 的方法

    此教程没有亲自动手试过,先保存在这里 http://download.csdn.net/detail/tuobaxiao2008/8268281

  6. Python【第十篇】协程、异步IO

    大纲 Gevent协程 阻塞IO和非阻塞IO.同步IO和异步IO的区别 事件驱动.IO多路复用(select/poll/epoll) 1.协程 1.1协程的概念 协程,又称微线程,纤程.英文名Coro ...

  7. 实用lsof常用命令行

    1, 使用 lsof 命令行列出所有打开的文件 # lsof 这可是一个很长的列表,包括打开的文件和网络 上述屏幕截图中包含很多列,例如 PID.user.FD 和 TYPE 等等. FD - Fil ...

  8. IIs工作原理

    http://www.cnblogs.com/szhy222/archive/2008/07/14/1242576.html 问题: HTTP.SYS 的内置驱动程序 IIS 工作者进程

  9. .NET framework Chart组件SeriesChartType 枚举

      成员名称 说明   Area 面积图类型.   Bar 条形图类型.   BoxPlot 盒须图类型.   Bubble 气泡图类型.   Candlestick K 线图类型.   Column ...

  10. 最牛「CSRF防护」,带你进入大虾们的圈子!

    简单理解 CSRF 什么是 CSRF? CSRF,通常称为跨站请求伪造,英文名 Cross-site request forgery 缩写 CSRF,是一种对网站的恶意攻击.一个跨站请求伪造攻击迫使登 ...