easyui 官网有一个例子是 左冻结的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/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-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Frozen Columns in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can freeze some columns that can't scroll out of view.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'../datagrid/datagrid_data1.json'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
可能部分 开发人员在实际需求中要求 右列冻结 左边 可以有拖动框
官网有一个 RTL操作 但是 没有提供 代码示例 ,经过直接查看网页源代码 稍微研究了下
发现只要引入 <link rel="stylesheet" type="text/css" href="easyui-rtl.css">
<script type="text/javascript" src="easyui-rtl.js"></script>这两个文件就好了
这时候 页面 单冻结效果就相反了 ,但是有一个问题 表头会消失
后来通过火狐调试发现 得改下 easyui-rtl.css文件里的 .datagrid-header-inner的属性
改成这样就好了
/**原先是这个 如果这样的话会导致 表头显示不了
.datagrid-header-inner{
float:right;
}
**/
.datagrid-header-inner{
float:left;
}
现在效果就变成了
相关推荐
"easyui-treegrid冻结右侧列插件.zip" 是一个专门针对 EasyUI TreeGrid 设计的插件,它的目标是实现 TreeGrid 中右侧列的冻结效果。这个插件的名称表明它能够帮助用户在 TreeGrid 中固定右侧的部分列,即使滚动表格...
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
在本文中,我们将深入探讨如何在EasyUI Datagrid中实现非冻结的序号列,以及这一功能对数据展示和交互性的影响。EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如分页、排序、过滤等,...
DataGrid 支持冻结列、自定义列宽等多种特性,使得数据展示更加灵活和强大。 #### 四、DataGrid的列配置 DataGrid 中的列配置是通过 `frozenColumns` 和 `columns` 两个属性来实现的: - **frozenColumns**:指定...
easyui-datagrid 右冻结 js引用
EasyUI的datagrid组件是它的一个重要组成部分,用于展示和管理数据表格。然而,为了更好地满足用户界面设计需求,有时候我们需要让数据表格的列宽能够根据内容自动调整,以提供更好的用户体验。 在数据表格中实现...
在EasyUI中,数据导出通常与表格组件(datagrid)紧密关联,因为表格通常承载着大量的数据。以下是一些关于EasyUI导出功能的关键知识点: 1. **导出类型**:EasyUI支持多种导出格式,如CSV(逗号分隔值)、Excel、...
使用easyUI 为datagrid冻结列 使用easyUI 动态改变datagrid的columns 使用easyUI 格式化datagrid列 easyUI 添加排序到datagrid easyUI 自定义排序datagrid easyUI 添加CheckBox选择到DataGrid easyUI...
easyui-datagrid 右冻结资源
DataGrid组件是jQuery EasyUI框架中的一个插件,主要用于显示和操作表格数据。DataGrid插件提供了一系列功能,如分页、排序、搜索、固定列和复选框等,使得开发者能够轻松地在网页中实现复杂的数据网格界面。 本篇...
### JQuery-easyui的datagrid中文文档解析 #### 核心概念与功能介绍 JQuery-easyui中的`datagrid`组件是一种强大的数据展示工具,它能够高效地处理和展示大量数据,支持分页、排序、搜索等多种功能。此文档旨在...
6. **分冻结列部分和普通列部分**:在`datagrid-view`内部,有两个子容器,分别用于显示冻结列(`datagrid-view1`)和非冻结列(`datagrid-view2`)。冻结列部分通常包含行号或冻结列,而普通列部分则显示其他未冻结...
datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...
DataGrid是jQuery EasyUI中的一个核心组件,常用于展示和管理表格数据,具有分页、排序、筛选等功能,极大地提高了用户体验。 在使用jQuery EasyUI的DataGrid时,首先需要在HTML页面中引入相关的CSS和JavaScript...
//冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#...
##### 知识点5:DataGrid冻结列 - **概念**:将某一列固定在左侧或右侧,即使在滚动其他列时该列也保持不动。 - **实现方法**:设置`.datagrid()`方法中的`frozenColumns`选项。 ##### 知识点6:动态改变DataGrid列...
##### DataGrid冻结列 冻结列可以使某些列始终保持可见状态,这对于观察数据来说非常有用。 ```javascript $('#dg').datagrid({ frozenColumns: [[{ field: 'ck', checkbox: true }]], columns: [[{ field: 'name'...
6. DataGrid 数据表格是 easyui 中非常强大的组件,教程详细介绍了如何从 HTML 表格转换为 easyui 的 DataGrid,如何为 DataGrid 添加分页、选择行、添加工具栏、冻结列、动态改变列、格式化数据、添加排序、在 ...
datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...