The row number of the Easyui Datagrid is displayed. easyuirownumber

The row number of the Easyui Datagrid is displayed. easyuirownumber

When your row data exceeds 9999 in the Datagrid, the row number rownumber In the first column cannot be displayed because the table content is too long,
This Easyui cannot be adaptive, so you need to modify it. here you just need to extend a method.

$. Extend ($. fn. datagrid. methods, {fixRownumber: function (jq) {return jq. each (function () {var panel = $ (this ). datagrid ("getPanel"); // obtain the number container of the last row and copy a copy of var clone =$ (". datagrid-cell-rownumber ", panel ). last (). clone (); // because some Browsers Do not support obtaining the width of hidden elements, it is a coincidence that clone.css ({"position": "absolute", left: -1000 }). appendTo ("body"); var width = clone. width ("auto "). width (); // The default width is 25, so fix if (width> 25) only when the value is greater than 25 {// Add 5 more pixels, keep a margin $ (". datagrid-header-rownumber ,. datagrid-cell-rownumber ", panel ). width (width + 5); // After modifying the width, You need to recalculate the container, so call resize $ (this ). datagrid ("resize"); // some cleanup tasks clone. remove (); clone = null;} else {// restore to the default status $ (". datagrid-header-rownumber ,. datagrid-cell-rownumber ", panel ). removeAttr ("style ");}});}});

Add the above Code to the easyui source code.

Then add the onLoadSuccess event in your $ ("# dg"). datagrid ().

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