一、我们先让表格自适应宽度
<!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();
}
可以看到我在 5 行处加上了一个+20，这样让宽度正好覆盖滚动条
相关推荐
UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
"easyui-datagrid2-demo.zip" 文件包含了使用 EasyUI Datagrid 的一个示例，帮助开发者了解如何实现数据的加载、分页、排序等基本操作。 在这个 demo 中，我们可以从以下几个方面学习 EasyUI Datagrid 的使用： 1....
"easyui-datagrid 之间拖拽效果 demo" 重点展示了如何在两个 EasyUI Datagrid 之间实现数据的拖放功能，这对于提升用户体验，尤其是处理大量数据时的交互性至关重要。 首先，Datagrid 是 EasyUI 提供的一种表格控件...
在本压缩包 "easyui-datagrid21-demo.zip" 中，我们找到了一个关于 EasyUI Datagrid21 的演示实例，该实例包含了一个 HTML 页面、一个 PHP 后端接口以及相关的图片和数据资源。下面将对这个演示实例进行详细的解析。...
easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip easyui\easyui-datagrid15-demo....
easyui-datagrid导出至Excel插件，中文没有乱码问题。
在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件，它扩展了原生 HTML 的 `input` 元素...
easyui-datagrid是基于jQuery EasyUI框架的一个组件，它可以用来在前端页面上展示表格形式的数据。其特点包括支持分页、排序、远程数据加载等功能。文件描述中提到的easyui-datagrid组件能够左侧显示简略信息，右侧...
本文将深入探讨“easyui-datagrid可编辑可过滤的DEMO”，这是一个结合了EasyUI DataGrid组件的编辑和过滤功能的示例项目。 首先，DataGrid是EasyUI中的一个核心组件，它是一个数据展示表格，可以处理大量的数据并...
4. **处理滚动事件**：监听datagrid的滚动事件，根据滚动条的位置更新固定列的CSS属性，确保它们始终可见。 5. **兼容RTL布局**：如果需要，使用`easyui-rtl.css`和`easyui-rtl.js`提供的样式和函数，确保在RTL环境...
**Spring Boot 系列教程 EasyUI-datagrid** 在IT领域，Spring Boot是一个极其流行的Java框架，它简化了基于Spring的应用程序开发，通过自动配置和起步依赖使得开发者可以快速上手。EasyUI则是一个轻量级的前端框架...
"easyui-datagrid-rowediting"是一个关于EasyUI Datagrid组件的特定功能，允许用户在表格行内进行编辑，实现多行数据的增删改查。本文将详细探讨这个功能的实现原理和应用场景。 一、EasyUI Datagrid简介 EasyUI的...
数据表" class="easyui-datagrid"> ``` 2. **数据源配置**: EasyUI datagrid可以通过Ajax获取数据，我们可以使用ASP.NET来处理请求并返回JSON格式的数据。在服务器端，创建一个ASP.NET MVC控制器或WebAPI方法，查询...
标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性，它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架，提供了一系列易于使用的UI组件，包括datagrid，...
用于myeclipse软件下ssm框架 easyUIdatagrid增删改查
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui-datagrid官方demo，包含datagrid中combobox的使用方法，以及选择行，删除行，编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据，可以将datagrid_data.json里的数据放到...
在标题 "jquery-easyui-datagrid" 中，我们关注的是 `datagrid` 这个组件，它是 jQuery EasyUI 库中的一个核心元素。`datagrid` 提供了类似于电子表格的视图，用于展示和操作数据库或其他数据源中的表格数据。 **一...
jquery.easyui.datagrid自动合并列扩展，支持多列合并。 用法：加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
标签中的"easyui-java"表示项目使用了EasyUI与Java的结合，"easyui-datagrid"是EasyUI中的一个关键组件，用于展示表格数据。"jeasyui"可能指的是jQuery-EasyUI，它是EasyUI的一个扩展，提供了更多的jQuery插件和组件...