`
zqb666kkk
  • 浏览: 725989 次
  • 性别: 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 冻结右侧列插件

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

    easyui datagrid默认序号列是冻结在左侧的。我们通过改底层代码,实现支持使序号列不冻结,跟随表格左右拖动

    右冻结引用资源

    easyui-datagrid 右冻结资源

    右冻结引用js资源

    easyui-datagrid 右冻结 js引用

    EasyUI tutorial 中文版 chm

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

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

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

    jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid。 jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以...

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

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

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

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

    SYPRO示例项目源码和EasyUI入门视频教程

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

    Jquery_EasyUI教程

    o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 o 6.10 自定义DataGrid分页 37 o 6.11使DataGrid能编辑 38 o ...

    jQuery_EasyUI教程

    o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 o 6.10 自定义DataGrid分页 37 o 6.11使DataGrid能编辑 38 o 6.12 ...

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

    而“完整”的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构。 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个“基础完整DOM结构”是什么样子的: &lt;...

    jQuery EasyUI 1.3 API 中文教程

    数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格行内编辑器 扩展数据表格行内编辑器 数据...

Global site tag (gtag.js) - Google Analytics