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也可以 ...

随机推荐

Python yaml模块
引用自:https://www.cnblogs.com/shaosks/p/7344771.html 一.简介 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读写.它实质上是一种通 ...
cookie和session、
https://my.oschina.net/yoyo1987/blog/156117 Session会在浏览器关闭后消失吗? 通常情况下,当我们关闭浏览器再重新打开后,我们就需要再次进行登陆(如果没 ...
hdu 5748 Bellovin【最长上升子序列】
题目链接:https://vjudge.net/contest/148584#problem/A 题目大意: 解题思路:题目要求为:输出与已知序列的每一个元素的f(i)(f(i)的定义如题)相同的字典 ...
SQL HAVING 子句使用
HAVING 对由sum或其它集合函数运算结果的输出进行限制. 比如,我们可能只希望看到Store_Information数据表中销售总额超过1500美圆的商店的信息,这时我们就需要使用HAVING从 ...
grpc 使用总结
1.grpc支持多种语言,需要根据pb文件创建出相应java文件. 2.构建服务端. 3.构建客户端. 4.grpc对象基于创建者模式.
[Agc005D]K Perm Counting
[Agc005D] K Perm Counting Description 糟糕爷特别喜爱排列.他正在构造一个长度为N的排列.但是他特别讨厌正整数K.因此他认为一个排列很糟糕,当且仅当存在至少一个i( ...
Angular features and services overview
模块(Modules) 组件(Components) 模板(Templates) 元数据(Metadata) 数据绑定(Data binding) 指令(Directives) 服务(Services ...
图的基本操作（基于邻接矩阵）：图的构造，深搜（DFS），广搜（BFS）
#include <iostream> #include <stdio.h> #include <cstdlib> #include <cstring> ...
通过Microsoft.AspNetCore.App元包简化程序集的引用
Asp.net core下提供默认提供了一些在.net core不能直接使用的库,如日志.依赖注入.选项.通用主机.EntityFramework等,虽然我们可以通过Nuget的方式手动加载这些包,但 ...
SVN Error：请求的名称有效并且在数据库中找到，但是它没有相关的正确的数据来被解析
同事安装配置完Svn后一直down不下来文件,报错内容如下: Administrator 18:07:27 Checkout from https:/svn/web, revision HEAD, ...

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

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

随机推荐

热门专题