easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好。这个时候就需要我们自己动手来修改easyui的源码了。easyui的源码我也稍有阅读,其中的设计方式确实是相当巧妙,但是给人最大的感受是源码中的变量方法名都是用的没有意义的数字和字母,这对于阅读源码确实比较的麻烦。

  说了这么多,直入主题吧,我们最近在给某保险公司做一个财务系统,因为是财务系统,就得经常用到列表,而且财务会计他们要求的列表格式又是相当的苛刻。前不久,客户就发现我们开发的列表,内容和标题要么都居中,要么都居左居右,这让客户觉得十分的不爽。因为他们用Excel标题都是居中的,文字内容可能居左,数字一般居右。

  这个需求,一提出来,我们试着到网上去查,但是查到这方面的解决方案基本上也不能解决问题。于是组长就让我放下手头的工作,着手解决这个问题。没有办法,只能硬着头皮去读easyui的源码。经过一个下午的研究,发现之所以datagrid标题和内容对齐方式一样,肯定有个地方来设置标题或者内容的对齐方式。功夫不负有心人,终于找到了设置对齐方式的代码。

// 因为默认的标题对齐方式是跟内容对齐方式是一样的,因为代码写在这里

cell.css("text-align",(col.halign||col.align||""));

  从上面的代码可以看出标题的居中方式,跟内容的对齐方式是一样的,如何解决呢。我们不能将对齐方式写死在源码中,必须要能在column中设置。相当于给columns中加上一个属性,这就好办了。

 // 标题居中字段
cell.css("text-align",col.titleAlign||"center");
//在field中设置
{field:'SUBJECT_ID',title:'科目代码',width:100,align:'center',col.titleAlign: true,sortable:true}

  就这样,我们就给field加上了一个属性,并且用这个属性来控制datagrid按照我们的想法工作,这给了我们一个修改easyui源码的思路。

  下一篇:datagird数字排序问题

easyui中datagrid标题居中内容居左实现方式的更多相关文章

  1. EasyUI中Grid标题居中方法(jquery实现方法)

    $(".panel-title").css("text-align", "center"); 一句话搞定,就是这么随意

  2. easyui中datagrid空数据集不刷新的解决方式

    datagrid空间可以异步请求json数据,并将新数据覆盖原有数据,重绘数据表. 但是当回来空数据集的时候,js会产生这样一条错误: TypeError: rows is null for(var ...

  3. dojo表格内容居左、居中和居右

    1.常规表格内容居左.居中和居右 style="text-align:left;" style="text-align:center;" style=" ...

  4. 2016word多级列表 一级标题居中后偏左

    一.如下图所示,定义好多级列表之后设置标题,但是发现标题居中后偏左. 二.选择多级列表,设置居左对齐

  5. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  6. EasyUI中datagrid的基本用法

    EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图

  7. EasyUI中datagrid双击事件

    EasyUI中datagrid双击事件 在jsp文件底部增加代码: <script type="text/javascript"> //数据表双击事件 $('#tabl ...

  8. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  9. easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)

    easyUI中datagrid展示对象下属性以及显示多个子属性 显示对象单个属性值 添加formatter属性 <th field="decidedzone" width=& ...

随机推荐

  1. Selenium WebDriver + Grid2 + RSpec之旅(二)----Grid2的配置

    Selenium WebDriver + Grid2 + RSpec之旅(二) ----Grid2的配置 为什么要使用Selenium-Grid 分布式运行大规模的TestCase 能够通过一个中央节 ...

  2. JS实现表单输入Enter键转换焦点框

    <form> <input type="text" onkeypress="return handleEnter(this, event)"& ...

  3. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  4. Bzoj 3505: [Cqoi2014]数三角形 数论

    3505: [Cqoi2014]数三角形 Time Limits: 1000 ms  Memory Limits: 524288 KB  Detailed Limits   Description

  5. 问题-[Delphi]SendMessageTimeout调用后卡住点击任务栏还会出现窗体处理

    问题现象:在使用SendMessageTimeout函数后,5秒后WIN把进程挂在起.这时把程序最小化(原因就是不想让用户看到卡的界面),但点击任务栏按钮界面还原了,拦截消息失败(原因是挂起后消息都放 ...

  6. zoj 3819 Average Score

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...

  7. 微信小程序资料集合

    一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...

  8. Mina学习之IoHandler

    IoHandler处理事件在Filter Chain 之后进行.IoHandler包含处理以下几个事件的功能: 1. sessionCreated event: session创建事件,对于Tcp而言 ...

  9. MVVM架构的一次实践,重写iOS头条客户端

    前言: 一个iOS头条APP,使用MVVM架构实现,代码中有注释,封装了AFN网络请求,解媾代码,使用起来非常方便.用最经典的TableView展示,后续不断更新,喜欢就star或fork一下,有问题 ...

  10. C#将DataTable导出Execl、Word、Xml

        /// <summary>     /// 将DT转换为Execl的方法     /// </summary>     /// <param name=" ...