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

全栈程序员-站长 • 2022年5月24日下午3:20 • 未分类 • 阅读 118

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

    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
                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/142054.html原文链接：https://javaforall.net