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也可以 ...
随机推荐
- 6-2 铁轨 uva 514
较为简单的stack题目 但是还是犯了一些错误: 1. 要想清空栈,直接重新定义较为方便! 2.在if(s.top()==x)时 加上 !s.empty() 否则程序会崩溃 3. 必须要加上i- ...
- 在python3下使用requests,xpath,urllib爬取不得姐网站相关视频爬虫源代码
#coding=utf-8 from lxml import etreeimport requestsimport urllibimport os # 获取url的html等内容def getHtml ...
- hdu1873 看病要排队【优先队列】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1873 看病要排队 Time Limit: 3000/1000 MS (Java/Others) ...
- uva1354 天平难题 【位枚举子集】||【huffman树】
题目链接:https://vjudge.net/contest/210334#problem/G 转载于:https://blog.csdn.net/todobe/article/details/54 ...
- 002.Heartbeat部署及httpd高可用
一 前期准备 1.1 依赖准备 编译安装需要依赖的包,如gcc等: yum -y install gcc gcc-c++ make glibc kernel-devel kernel-headers ...
- Fibonacci Modified
题目来源:Fibonacci Modified We define a modified Fibonacci sequence using the following definition: Give ...
- Mac电脑 阿里云ECS(ContentOS) Apache+vsftpd+nodejs+mongodb建站过程总结
简介:我这里采用的阿里云免费提供的6个月ECS服务器:制作了一个简单的爬虫程序:里面很多功能还么做:搜索里面功能回去的数据未做处理会崩溃(大家不要点搜索功能):地址:http://loldragon. ...
- Javascript中call,apply,bind的区别
一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...
- 洛谷.T22136.最长不下降子序列(01归并排序 分治)
题目链接 \(Description\) 给定一个长为n的序列,每次可以反转 \([l,r]\) 区间,代价为 \(r-l+1\).要求在\(4*10^6\)代价内使其LIS长度最长,并输出需要操作的 ...
- 潭州课堂25班:Ph201805201 并发(通信) 第十三课 (课堂笔记)
from multiprocessing import Process # 有个 url 列表 ,有5个 url ,一次请求是1秒,5个5秒 # 要求1秒把 url 请求完, a = [] # 在进程 ...