在项目开始时，为了提高加载数据表时表格数据的渲染速度，设置了默认宽度。

现在需要添加一个表自适应函数，触发change函数，改变列宽，但是表没有重新呈现，也没有数据请求发生。

设计思路，遍历每一项的所有数据，比较字节串的长度，得到最大长度。然后比较最大长度和标题长度。如果标题很长，删除标题长度。如果字符串很长，则取字符串长度。

射流研究…

//表自适应方法函数变化宽度(agstr){ var DG=$(' # ' agstr)；DG . datagrid(' loading ')；//显示加载状态$ $ $ var fn=function(){ var opts=DG . datagrid(' get column field ')；//获取标题中的所有field vardata=DG . datagrid(' getdata ')；//获取数据表var role=data.rows请求的数据；//数据表请求的数据，即每行的数据为(var I=0；我选择长度；I) {//循环每个列var字段的数据内容=opts[I]；var ro _ width=0；if(field！=' '){ var col=DG . datagrid(' GetColumnOption '，字段)；var col _ title=col.titlefor(j=0；jrole.lengthj){ if(stringtool(角色[j][字段])ro _ width){ ro _ width=stringtool(角色[j][字段])；//比较当前字段列的各数据长度，取最大值} } if(ro _ width stringtool g(col _ title){//如果当前列数据长度小于当前列表表头长度，取表头长度ro _ width=stringtool g(col _ title)；} var ro _ length=ro _ width * 14 10//14是页面字体像素大小10是左右内边距大小$(' TD[field=' field ' ']div ')。宽度(ro _ length)；//设置列宽样式dg.datagrid('lockColumn '，字段)；//禁止更改列宽。} } DG . datagrid(' loaded ')；//隐藏加载状态$$$} setTimeout(fn，0)；}//字符串函数stringtolog (str)的粗略转换{ if(str==null){ return 0；} Str=Str . ToString()；//此方法将获取的数据转换为Str类型Str=Str . replace(/ s/g ' ')；//替换空格//两个字节长度为1，一个字节长度为0.5，计算出的字符串总长度为varnewstr=(str。长度字符串。替换(/[ x00- xff]/g ' ')。长度)/2str。替换(/[ x00- xf return newStr；}列宽适配可以通过调用以上两种方法来实现。

但是，实现此方法后，标题和表体的单元格宽度已经固定。如果此时触发调整列宽事件，则只能改变表头宽度，不能改变表体列宽。因此，自适应列宽后可以取消改变列宽的功能。

包裹冷冻柱法：

//冻结列，禁止调整列大小$ ('# ID ')。datagrid('锁列'，字段值)；$.extend($.fn.datagrid.methods，{ lockColumn: function(jq，field){ return jq . each(function(){ var p=$(this))。datagrid(' GetPanel ')；//获取数据表面板varcell=p . find(' div . datagrid-header TD[field=' field ']div . datagrid-cell ')；//获取节点单元格。可调整大小({disabled: true})，其中数据表监视更改列宽的事件；//禁止改变列宽})；}});当设置每列的宽度时，调用此方法

dg.datagrid('lockColumn '，字段)；变宽度法中的位置

重新定义列宽时，如果数据量太大导致页面堵塞，可以触发方法的起始位置调用datagrid的loading方法，最后调用loaded方法和changeWidth方法中的$ $ $位置。

由于datagrid的冻结列方法是在表自适应方法触发后调用的，所以在重新查询数据时不会重新呈现表头，只会显示表体，恢复表体默认宽度，导致表头和表体不对齐，表头无法改变宽度。

解决方法：数据表数据加载成功后，解冻列，清空之前计算的列宽

包解冻列方法

//取消冻结列，允许调节列尺寸$('#id ').数据网格('解锁列，字段值);$.extend($.fn.datagrid.methods，{ unlockColumn:函数(jq，field){ return jq。每个(函数(){ var p=$(this)).datagrid(' GetPanel ')；//获取数据表格面板var cell=p . find(' div。data grid-标题TD[字段=' field ']div。datagrid-cell’)；//获取数据表格监听改变列宽事件的节点细胞。可调整大小({ disabled : false })；//允许改变列宽});}});数据加载成功触发

加载成功：函数（数据){ var opts=$(this).数据网格(' GetColumnFields ')；//获取表头所有(var I=0；iopts.length我){ $(这个)。datagrid('unlockColumn '，opts[I])；//允许调整列尺寸$(' tr。data grid-header-row TD[field=' opts[I]' ']div]).宽度(' ');//清空表格自适应时计算的表头宽度} }，9502.163.com

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。