EasyUI - DataGrid 去右边空白滚动条列

在网上查了很长时间没有找到解决方法,干脆自已查看一下代码来解决吧,随是压缩过的,不过也还是好查的,工夫不负有心人,终于解决了,方法如下:

一、我们先让表格自适应宽度

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The DataGrid is created from markup, no JavaScript code needed.</div>
    </div>
    <div style="margin:10px 0;"></div>

    <table class="easyui-datagrid"
           data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get',fitColumns:'true'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:300">Item ID</th>
                <th data-options="field:'productid',width:300">Product</th>
                <th data-options="field:'listprice',width:300,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:300,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:300">Attribute</th>
                <th data-options="field:'status',width:300,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <script>
        $(window).resize(function () {
            $('#tt').datagrid('resize');
        });
    </script>
</body>
</html>
复制代码

二、修改jquery.easyui.min.js这个文件来解决滚动条问题

复制代码
function _4bf(_4c0){
var opts=$.data(_4c0,"datagrid").options;
var dc=$.data(_4c0,"datagrid").dc;
var wrap=$.data(_4c0,"datagrid").panel;
var _4c1=wrap.width()+20;
var _4c2=wrap.height();
var view=dc.view;
var _4c3=dc.view1;
var _4c4=dc.view2;
var _4c5=_4c3.children("div.datagrid-header");
var _4c6=_4c4.children("div.datagrid-header");
var _4c7=_4c5.find("table");
var _4c8=_4c6.find("table");
view.width(_4c1);
var _4c9=_4c5.children("div.datagrid-header-inner").show();
_4c3.width(_4c9.find("table").width());
if(!opts.showHeader){
_4c9.hide();
}
复制代码

可以看到我在 7001 行处加上了一个+20,这样让宽度正好覆盖滚动条

大家如果有更好的方法留言给我呀

posted @   韩天伟  阅读(22791)  评论(7编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
历史上的今天:
2010-11-24 ASP.net获取当前url各种属性(文件名、参数、域名 等)的方法
2010-11-24 C#中cookie读写加密中文字符
2010-11-24 SQL SERVER常用取重复记录的SQL语句
2010-11-24 SQL Server 2005中返回修改后的数据
2010-11-24 Sql字符串分组Split函数的两种实现方法
点击右上角即可分享
微信分享提示