easyui中datagrid标题居中内容居左实现方式
2014-03-26 15:02
239 查看
easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好。这个时候就需要我们自己动手来修改easyui的源码了。easyui的源码我也稍有阅读,其中的设计方式确实是相当巧妙,但是给人最大的感受是源码中的变量方法名都是用的没有意义的数字和字母,这对于阅读源码确实比较的麻烦。
说了这么多,直入主题吧,我们最近在给某保险公司做一个财务系统,因为是财务系统,就得经常用到列表,而且财务会计他们要求的列表格式又是相当的苛刻。前不久,客户就发现我们开发的列表,内容和标题要么都居中,要么都居左居右,这让客户觉得十分的不爽。因为他们用Excel标题都是居中的,文字内容可能居左,数字一般居右。
这个需求,一提出来,我们试着到网上去查,但是查到这方面的解决方案基本上也不能解决问题。于是组长就让我放下手头的工作,着手解决这个问题。没有办法,只能硬着头皮去读easyui的源码。经过一个下午的研究,发现之所以datagrid标题和内容对齐方式一样,肯定有个地方来设置标题或者内容的对齐方式。功夫不负有心人,终于找到了设置对齐方式的代码。
// 因为默认的标题对齐方式是跟内容对齐方式是一样的,因为代码写在这里
cell.css("text-align",(col.halign||col.align||""));
从上面的代码可以看出标题的居中方式,跟内容的对齐方式是一样的,如何解决呢。我们不能将对齐方式写死在源码中,必须要能在column中设置。相当于给columns中加上一个属性,这就好办了。
就这样,我们就给field加上了一个属性,并且用这个属性来控制datagrid按照我们的想法工作,这给了我们一个修改easyui源码的思路。
下一篇:datagird数字排序问题
说了这么多,直入主题吧,我们最近在给某保险公司做一个财务系统,因为是财务系统,就得经常用到列表,而且财务会计他们要求的列表格式又是相当的苛刻。前不久,客户就发现我们开发的列表,内容和标题要么都居中,要么都居左居右,这让客户觉得十分的不爽。因为他们用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标题居中内容居左实现方式
- EasyUI datagrid 实现标题居中,内容居左的方法
- EasyUI datagrid 实现标题居中,内容居左的方法
- easyui 实现标题居中内容居左
- easyUI datagrid每行数据添加操作按钮的方法(实现方式二)
- 实现对easyui-datagrid的数据行批量修改(包括修改内容和删除)
- Easyui 表格datagrid 的单元格内容显示方式扩展
- easyui datagrid 工具栏实现方式
- silverlight 4中datagrid列标题和列内容居中问题,增加自增长列
- silverlight 4中datagrid列标题和列内容居中问题
- 实现easyui datagrid在没有数据时显示相关提示内容
- easyui datagrid 动态表头 动态columns 的一种实现方式
- datagrid详细操作单元格样式 设置列标题居中而列内容居右显示
- 设置easyui-datagrid标题及内容的位置
- 完美解决在wpf datagrid让列标题居中以及列内容居中
- EasyUI - 实现DataGrid 主从表显示 DetailView实现方式
- easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现
- easyui扩展datagrid-groupview实现支持全选及点击标题收缩
- EasyUI中Grid标题居中方法(jquery实现方法)
- easyui datagrid 设置列名居中 内容靠左并自动换行