Easyui DataGrid RowNumber Line number display problem

When your row data exceeds 9999 in the DataGrid, the row number RowNumber of the first column will not display all the numbers because the table contents are too long.
This Easyui cannot be adaptive so it needs to be modified, and here's a way to extend a method.

$.extend ($.fn.datagrid.methods, {fixrownumber: function (JQ) {        returnJq.each ( function () {            varPanel = $ ( This). DataGrid ("Getpanel");//Gets the number container for the last row and copies a copy of the            varClone = $ (". Datagrid-cell-rownumber", panel). Last (). Clone ();//Because in some browsers, it is not supported to get the width of hidden elements, so trickery a bitClone.css ({"Position":"Absolute", left:- +}). AppendTo ("Body");varwidth = clone.width ("Auto"). width ();//The default width is 25, so fix is only available when it is greater than 25            if(Width > -) {//Add 5 pixels and keep a little margin$(". Datagrid-header-rownumber,.datagrid-cell-rownumber", panel). Width (width +5);//After modifying the width, the container needs to be recalculated, so call resize$( This). DataGrid ("Resize");//Some cleanup workClone.remove (); Clone =NULL; }Else{//revert to default state$(". Datagrid-header-rownumber,.datagrid-cell-rownumber", panel). Removeattr ("Style");    }        }); }});

Add the above code to the Easyui source

Then add the Onloadsuccess event in your $ ("#dg"). DataGrid ()

$("#dg").datagrid({    function () {        $(this).datagrid("fixRownumber");    }});

Easyui DataGrid RowNumber Line number display problem