`
zqb666kkk
  • 浏览: 732619 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

easyui datagrid 右冻结

阅读更多



 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;
}

 

 

现在效果就变成了

 

  • 大小: 73.8 KB
  • 大小: 74.4 KB
0
4
分享到:
评论
1 楼 氵每市蜃木娄 2019-04-17  
使用过后,移动滚动条,非冻结的列,表头不见了。

相关推荐

    easyui-treegrid冻结右侧列插件.zip

    "easyui-treegrid冻结右侧列插件.zip" 是一个专门针对 EasyUI TreeGrid 设计的插件,它的目标是实现 TreeGrid 中右侧列的冻结效果。这个插件的名称表明它能够帮助用户在 TreeGrid 中固定右侧的部分列,即使滚动表格...

    jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示

    http://blog.csdn.net/tianxiawudi0720/article/details/47401399

    easyui datagrid支持设置非冻结的序号列

    在本文中,我们将深入探讨如何在EasyUI Datagrid中实现非冻结的序号列,以及这一功能对数据展示和交互性的影响。EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如分页、排序、过滤等,...

    easyui的datagrid数据excel导出

    DataGrid 支持冻结列、自定义列宽等多种特性,使得数据展示更加灵活和强大。 #### 四、DataGrid的列配置 DataGrid 中的列配置是通过 `frozenColumns` 和 `columns` 两个属性来实现的: - **frozenColumns**:指定...

    右冻结引用js资源

    easyui-datagrid 右冻结 js引用

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    EasyUI的datagrid组件是它的一个重要组成部分,用于展示和管理数据表格。然而,为了更好地满足用户界面设计需求,有时候我们需要让数据表格的列宽能够根据内容自动调整,以提供更好的用户体验。 在数据表格中实现...

    easyui 各种导出

    在EasyUI中,数据导出通常与表格组件(datagrid)紧密关联,因为表格通常承载着大量的数据。以下是一些关于EasyUI导出功能的关键知识点: 1. **导出类型**:EasyUI支持多种导出格式,如CSV(逗号分隔值)、Excel、...

    EasyUI tutorial 中文版 chm

    使用easyUI 为datagrid冻结列 使用easyUI 动态改变datagrid的columns 使用easyUI 格式化datagrid列 easyUI 添加排序到datagrid easyUI 自定义排序datagrid easyUI 添加CheckBox选择到DataGrid easyUI...

    右冻结引用资源

    easyui-datagrid 右冻结资源

    jquery easyui DataGrid简单示例

    DataGrid组件是jQuery EasyUI框架中的一个插件,主要用于显示和操作表格数据。DataGrid插件提供了一系列功能,如分页、排序、搜索、固定列和复选框等,使得开发者能够轻松地在网页中实现复杂的数据网格界面。 本篇...

    Jquery-easyui的datagrid中文文档

    ### JQuery-easyui的datagrid中文文档解析 #### 核心概念与功能介绍 JQuery-easyui中的`datagrid`组件是一种强大的数据展示工具,它能够高效地处理和展示大量数据,支持分页、排序、搜索等多种功能。此文档旨在...

    jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    6. **分冻结列部分和普通列部分**:在`datagrid-view`内部,有两个子容器,分别用于显示冻结列(`datagrid-view1`)和非冻结列(`datagrid-view2`)。冻结列部分通常包含行号或冻结列,而普通列部分则显示其他未冻结...

    EasyUI入门教程--第01课_EasyUI简介.avi

    datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...

    jQuery EasyUI之DataGrid使用实例详解

    DataGrid是jQuery EasyUI中的一个核心组件,常用于展示和管理表格数据,具有分页、排序、筛选等功能,极大地提高了用户体验。 在使用jQuery EasyUI的DataGrid时,首先需要在HTML页面中引入相关的CSS和JavaScript...

    jeasyui的dataGrid的打印和导出,jeasyui报表 table转成excel 实例下载

    //冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#...

    jQuery_EasyUI

    ##### 知识点5:DataGrid冻结列 - **概念**:将某一列固定在左侧或右侧,即使在滚动其他列时该列也保持不动。 - **实现方法**:设置`.datagrid()`方法中的`frozenColumns`选项。 ##### 知识点6:动态改变DataGrid列...

    easyui用户手册

    ##### DataGrid冻结列 冻结列可以使某些列始终保持可见状态,这对于观察数据来说非常有用。 ```javascript $('#dg').datagrid({ frozenColumns: [[{ field: 'ck', checkbox: true }]], columns: [[{ field: 'name'...

    Jquery easyui 网络教程

    6. DataGrid 数据表格是 easyui 中非常强大的组件,教程详细介绍了如何从 HTML 表格转换为 easyui 的 DataGrid,如何为 DataGrid 添加分页、选择行、添加工具栏、冻结列、动态改变列、格式化数据、添加排序、在 ...

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi

    datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...

Global site tag (gtag.js) - Google Analytics