• EasyUI


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

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

    <!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',300">Item ID</th>
                    <th data-options="field:'productid',300">Product</th>
                    <th data-options="field:'listprice',300,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',300,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',300">Attribute</th>
                    <th data-options="field:'status',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,这样让宽度正好覆盖滚动条

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

  • 相关阅读:
    js用currentStyle和getComputedStyle获取css样式(非行间)
    XMLHttpRequest Level 2 使用指南
    image-set实现Retina屏幕下图片显示[转载]
    Png的秘密
    css清除&闭合浮动
    2016学习计划
    提高性能及操作硬件的能力
    新兵易学,老兵易用----C++(C++11的学习整理---如何减少代码量,加强代码的可读性)
    CV限制符--C++
    能ping通网络,也正常连接,就是打不开网页,无法访问网络
  • 原文地址:https://www.cnblogs.com/hantianwei/p/3440666.html
Copyright © 2020-2023  润新知