Easyui Datagrid的Rownumber行号显示问题
2015-05-06 21:41
477 查看
Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字,
这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了。
将上述代码添加到easyui源码当中即可
然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件
作者:itmyhome
这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了。
$.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function () { var panel = $(this).datagrid("getPanel"); //获取最后一行的number容器,并拷贝一份 var clone = $(".datagrid-cell-rownumber", panel).last().clone(); //由于在某些浏览器里面,是不支持获取隐藏元素的宽度,所以取巧一下 clone.css({ "position" : "absolute", left : -1000 }).appendTo("body"); var width = clone.width("auto").width(); //默认宽度是25,所以只有大于25的时候才进行fix if (width > 25) { //多加5个像素,保持一点边距 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5); //修改了宽度之后,需要对容器进行重新计算,所以调用resize $(this).datagrid("resize"); //一些清理工作 clone.remove(); clone = null; } else { //还原成默认状态 $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style"); } }); } });
将上述代码添加到easyui源码当中即可
然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件
$("#dg").datagrid({ onLoadSuccess : function () { $(this).datagrid("fixRownumber"); } });
作者:itmyhome
相关文章推荐
- Easyui Datagrid的Rownumber行号显示问题
- Easyui Datagrid的Rownumber行号显示问题
- Easyui Datagrid的Rownumber行号显示问题
- Easyui Datagrid的Rownumber行号显示问题
- 浅析Easyui Datagrid的Rownumber行号显示
- easyui datagrid Rownumber只显示三位数
- Flex中显示DataGrid行号(row number)
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
- easyui datagrid 诡异的无法显示问题
- easyui datagrid格式化列后行号无法对齐问题
- easyui datagrid 行号超过三位数显示不全
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
- 【解决方法】EasyUI DataGrid不显示滚动条时,没有数据的问题
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
- 关于EASYUI使用dataGrid加载本地JSON文件浏览器不显示问题
- Row_Number()显示行号
- easyui 的Datagrid 表头显示不全问题解决
- Easyui Datagrid扩展fixRownumber方法
- 如何解决easyui-datagrid分页组件中文显示的问题
- 解决easyUI-datagrid不显示的问题