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

来源：互联网发布：射频开关矩阵编辑：程序博客网时间：2024/06/05 18:26

转自：http://www.cnblogs.com/hantianwei/p/3440666.html

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

<!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，这样让宽度正好覆盖滚动条.

ps:

版本不一样，但是有些代码都是一样. 参考改文章后，我查找自己的js 搜索 "datagrid" 查找到类似的方法，虽然压缩后方法名不一样。但是很容易知道是同一个东西

0 0