前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅析Easyui Datagrid的Rownumber行号显示「建议收藏」

浅析Easyui Datagrid的Rownumber行号显示「建议收藏」

作者头像
全栈程序员站长
发布2022-09-01 08:23:55
1.3K0
发布2022-09-01 08:23:55
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

代码语言:javascript
复制
    easyui datagrid 如何获取行号
    getRowIndex方法$(选择器).datagrid("getRowIndex",row) +1 其中row可以是一行也可以是这一行的id值,获取选择行可以用getselected或getselections方法,行索引从0开始,所以要加1,具体可以参照easyUI的API。

Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字, 这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了。

代码语言:javascript
复制
$.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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档