easyUI datagrid 列宽自适应(简单 图解)
来源:互联网 发布:手机声卡软件下载 编辑:程序博客网 时间:2024/04/28 04:35
响应数据格式:
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 panel的列宽自适应浏览器大小
- jquery easyui datagrid 列自适应窗口宽度
- jquery easyui datagrid 列自适应窗口宽度
- EasyUI Datagrid 行号自适应
- EasyUI datagrid cell自适应
- 【easyui】datagrid高度自适应
- easyui-datagrid自适应宽度
- easyui-datagrid自适应
- easyui datagrid 动态列
- easyui datagrid动态列
- Easyui - datagrid 列编辑
- EasyUI datagrid列排序
- easyui datagrid 宽度高度自适应
- easyui datagrid 宽度高度自适应
- easyui datagrid自适应浏览器宽度
- easyui datagrid表格自适应大小
- linux 比较实用的应用和命令
- sizeof和strlen的区别
- Css 100句
- 在C++中实现四种进程或线程同步互斥的控制
- git常用命令,协同开发
- easyUI datagrid 列宽自适应(简单 图解)
- python 日志
- 官员廉洁奉公是香港的核心价值
- 关于createFromAsset
- Drupal 7无法上传文件?图片?
- libevent源码深度剖析一
- Java SE1.6中的Synchronized
- sqlserver2008中cast和convert函数的使用
- Nginx permanent重定向参数问题