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

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

EasyUI - DataGrid 去右边空白滚动条列的更多相关文章

EasyUI - DataGrid 去右边空白滚动条列分类： JavaScript 2014-09-03 10:46 1090人阅读评论(2) 收藏
熟悉 EasyUI - DataGrid 的童鞋应该会注意到这样一个情景: 想去掉这块,找了下资料,发现也有人同样纠结:http://www.cnblogs.com/hantianwei/p/3440 ...
（轉）EasyUI - DataGrid 去右边空白滚动条列
熟悉 EasyUI - DataGrid 的童鞋应该会注意到这样一个情景: 想去掉这块,找了下资料,发现也有人同样纠结:http://www.cnblogs.com/hantianwei/p/3440 ...
初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页
系列目录前言为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台实 ...
jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
easyui datagrid的列编辑
[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联第 ...
(转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
EasyUI datagrid checkbox数据设定与取值（转自http://blog.csdn.net/baronyang/article/dnetails/9323463，感谢分享，谢谢）
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...
EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定在解决方案中新建两个文件FormMain.aspx(html也可以 ...

随机推荐

BZOJ5047 空间传送装置 2017年9月月赛最短路 SPFA
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解题目传送门 - BZOJ5047 题意概括概括??~别为难语文做一题错两题的我了…… 题解我们发现,对于某一种装置,有c种 ...
CSS 2. 盒模型|浮动
1.盒模型盒模型: 在网页中基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型.重要的属性: width,height,padding,border, margin 盒子模型通过四个边界 ...
AndroidStudio 之 Inter x86 Emulator Accelerator(Haxm installer) - not compatible with windows
中间人攻击工具mitmf（另类的XSS注入攻击）
中间人攻击工具mitmf(另类的XSS注入攻击) (一)简介 (二)安装 (三)结合beef使用 (一)简介 Mitmf 是一款用来进行中间人攻击的工具.它可以结合 beef 一起来使用,并利用 be ...
centos 支持复制与粘贴
centos 要支持与主机的交互,vmtools 必不可少. 为了方便虚拟机和主机之间复制粘贴文件,拖拽文件,需要安装VMwareTools.下面将我的安装步骤记录如下:第一步:打开虚拟机后,在VM的 ...
李宏毅机器学习笔记2：Gradient Descent(附带详细的原理推导过程）
李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...
AngularJS之双向数据绑定,class绑定
之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...
【RAY TRACING THE REST OF YOUR LIFE 超详解】光线追踪 3-7 混合概率密度
Preface 注:鉴于很多网站随意爬取数据,可能导致内容残缺以及引用失效等问题,影响阅读,请认准原创网址: https://www.cnblogs.com/lv-anchoret/category ...
Mac电脑阿里云ECS（ContentOS） Apache+vsftpd+nodejs+mongodb建站过程总结
简介:我这里采用的阿里云免费提供的6个月ECS服务器:制作了一个简单的爬虫程序:里面很多功能还么做:搜索里面功能回去的数据未做处理会崩溃(大家不要点搜索功能):地址:http://loldragon. ...
基于zepto的移动端轻量级日期插件
前言做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

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

EasyUI - DataGrid 去右边空白滚动条列的更多相关文章

随机推荐

热门专题