浅析Easyui Datagrid的Rownumber行号显示
2015-10-17 14:30
561 查看
easyui datagrid 如何获取行号 getRowIndex方法$(选择器).datagrid("getRowIndex",row) +1 其中row可以是一行也可以是这一行的id值,获取选择行可以用getselected或getselections方法,行索引从0开始,所以要加1,具体可以参照easyUI的API。
Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字,
这一点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"); } }); } });
[/code]将上述代码添加到easyui源码当中即可
然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件
$("#dg").datagrid({ onLoadSuccess : function () { $(this).datagrid("fixRownumber"); } });
[/code]作者:itmyhome
相关文章推荐
- easyui------显示隐藏列功能
- jQuery寻找n以内完全数的方法
- 推荐10个2014年最佳的jQuery视频插件
- jquery+CSS3实现淘宝移动网页菜单效果
- 采用easyui tree编写简单角色权限代码的方法
- 基于jquery中children()与find()的区别介绍
- 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
- 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
- JQuery打造PHP的AJAX表单提交实例
- jquery easyui使用心得
- 初试jQuery EasyUI 使用介绍
- easyui Droppable组件实现放置特效
- jQuery实现的fixedMenu下拉菜单效果代码
- jQuery EasyUI Dialog拖不下来如何解决
- jQuery EasyUI实现右键菜单变灰不可用效果
- 浅谈jQuery构造函数分析
- 在VS2008中使用jQuery智能感应的方法
- 从Ajax到JQuery Ajax学习
- jQuery仿gmail实现fixed布局的方法
- jQuery判断当前点击的是第几个li的代码