easyUI datagrid 列宽自适应(简单 图解)
2012-06-05 10:43
197 查看
响应数据格式:
easyUI在html代码中结构:
发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了;
以下就是自适应代码:
下面在看如何调用:传入的参数的那一列需要自适应宽度:
对以上代码的解释:
如果当前的s的长度比之前的该列的字符数大,那么直接设置当前字符数为最大值
转载注明请地址
easyUI版本:jquery-easyui-1.2.5
如果大家发现其中不足,请指出,谢谢!
自适应之后效果图:
自适应之前效果图:
easyUI在html代码中结构:
发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了;
以下就是自适应代码:
//添加事件 function columnWidthAutoResize(){ var cls=arguments[0];//需要自适应的列的名称 $('#grid').datagrid({ onLoadSuccess:function(data){ var rows=data.rows;//得到行数据 var columnMaxCharacter=new Array();//该列最大字符数 //遍历所有行数据,获得该列数据的最大字符数 for(var i=0;i<rows.length;i++){ for(var j=0;j<cls.length;j++){//遍历需要设置的列 var s=eval("rows["+i+"]."+cls[j]); //屏蔽html标签 s=s.replace("<center>",""); s=s.replace("</center>",""); if((typeof columnMaxCharacter[cls[j]])=='undefined'){ columnMaxCharacter[cls[j]]=0; } if(s.length>columnMaxCharacter[cls[j]]){ columnMaxCharacter[cls[j]]=s.length; } } } //设置列宽度和字体 for(var j=0;j<cls.length;j++){ //得到该列的字体 // alert($("td[field='"+cls[j]+"'] div").get(0).currentStyle); // var fontSize=$("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize;//获得字体大小 // fontSize= fontSize.replace("px","");//去掉px方便运算 var fontSize=12; var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度 //设定该列的宽度 $("td[field='"+cls[j]+"'] div").width(w); } } }); }
下面在看如何调用:传入的参数的那一列需要自适应宽度:
columnWidthAutoResize(new Array("orgname","showtime"));
对以上代码的解释:
var cls=arguments[0];//需要自适应的列的名称接受传入的需要自适应的列的名称数组;
var rows=data.rows;//得到行数据得到从服务器端响应的数据行集合
var columnMaxCharacter=new Array();//该列最大字符数记录需要设定列的字符最大数 (只是对中文考虑了,没有考虑英文) 最后的格式键值的形式 数组名['需要设定列名']=循环后最大字符
for(var i=0;i<rows.length;i++){遍历所有的数据行,
for(var j=0;j<cls.length;j++){//遍历需要设置的列
var s=eval("rows["+i+"]."+cls[j]);动态脚本 执行取出该行对应属性的字符串 rows[1].orgname 等效
//屏蔽html标签 s=s.replace("<center>",""); s=s.replace("</center>","");html标签不是显示值,所以不能当作字符算;
if((typeof columnMaxCharacter[cls[j]])=='undefined'){ columnMaxCharacter[cls[j]]=0; }如果第一次 没有给该列设置最大字符数是undefined 给默认值0 方便后面的对比
if(s.length>columnMaxCharacter[cls[j]]){ columnMaxCharacter[cls[j]]=s.length; } //alert(columnMaxCharacter[cls[j]]); }
如果当前的s的长度比之前的该列的字符数大,那么直接设置当前字符数为最大值
for(var j=0;j<cls.length;j++){这个循环遍历的是得到每一列最大字符数之后的数组,cls对应columnMaxCharacter的键值的形式
var fontSize=12;这个是默认字体的大小,为什么写死值,是因为暂时没有找到在火狐下得到默认字体大小的方法 $("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize(火狐不支持)
var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度这里是用 字体大小 * 该列最大字符数 + 1 得到列的宽度
$("td[field='"+cls[j]+"'] div").width(w);得到表头设置宽度,这里得到的就是表头,看上面第二张图片
转载注明请地址
easyUI版本:jquery-easyui-1.2.5
如果大家发现其中不足,请指出,谢谢!
自适应之后效果图:
自适应之前效果图:
相关文章推荐
- easyUI datagrid 列宽自适应(简单 图解)
- easyUI datagrid 列宽自适应(简单 图解)
- easyUI datagrid 列宽自适应(简单 图解)(转)
- easyui datagrid panel的列宽自适应浏览器大小
- easyui表格datagrid列宽自适应
- easyui 之 datagrid动态列与列宽自适应
- EasyUI datagrid cell自适应
- easyui 关于收缩面板引起的datagrid自适应宽度 fix
- easyui datagrid标题列宽度自适应
- Easyui设置datagrid自适应屏幕宽度的方法
- Spring Data Jpa - EasyUi Datagrid 分页简单实现(二)
- easyui datagrid 浏览器像素及改变表、列宽问题
- Asp.net简单代码设置GridView自适应列宽不变形实现思路与代码
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
- bootstrap结合easyui-datagrid列宽不自动适应问题
- easyui datagrid 宽度高度自适应
- easyUI 的datagrid的自适应布局(一)
- easyui datagrid自适应浏览器宽度
- 简单总结easyUI中datagrid的用法
- easyui datagrid 列的内容超出所定义的列宽时,自动换行