• easyUI 表格显示frozen属性使用


          项目中有时候前台表格显示字段过多,就好出现有些字段被隐藏,看不到的情况。easyUI就有个非常有用的属性forzen,定义某些字段frozen为true时,

    则这些字段被冻结,其他的则可以拖动。页面会出现滚动条(不被冻结的字段),推动滚动条则可查看其他字段。

      例子:

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     4 <html>
     5 <head>
     6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     7 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
     8 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
     9 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.3.3/demo/demo.css">
    10 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
    11 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    12 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    13 <script type="text/javascript">
    14  
    15  
    16  function searchCustomer(){
    17      $("#dg").datagrid('load',{
    18         "khno":$("#s_khno").val(),
    19         "name":$("#s_name").val()
    20      });
    21  }
    22  
    23 </script>
    24 <title>Insert title here</title>
    25 </head>
    26 <body style="margin: 1px">
    27  <table id="dg" title="客户信息查询" class="easyui-datagrid"
    28     pagination="true" rownumbers="true"
    29    url="${pageContext.request.contextPath}/customer/list.do" fit="true" toolbar="#tb">
    30    <thead data-options="frozen:true"><!--以下七个被固定,其他的可拖动  -->
    31         <tr>
    32             <th field="cb" checkbox="true" align="center"></th>
    33              <th field="id" width="50" align="center" hidden="true">编号</th>
    34              <th field="khno" width="150" align="center">客户编号</th>
    35              <th field="name" width="200" align="center">客户名称</th>
    36              <th field="cusManager" width="100" align="center">客户经理</th>
    37              <th field="level" width="100" align="center">客户等级</th>
    38              <th field="phone" width="100" align="center">联系电话</th>
    39         </tr>
    40     </thead>
    41     <thead>
    42         <tr>
    43             <th field="area" width="80" align="center">客户地区</th>    
    44              <th field="myd" width="80" align="center">客户满意度</th>
    45              <th field="xyd" width="80" align="center">客户信用度</th>
    46              <th field="address" width="200" align="center" >客户地址</th>
    47              <th field="postCode" width="100" align="center" >邮政编码</th>
    48              <th field="fax" width="100" align="center" >传真</th>
    49              <th field="webSite" width="100" align="center" >网址</th>
    50              <th field="yyzzzch" width="100" align="center" >营业执照注册号</th>
    51              <th field="fr" width="100" align="center" >法人</th>
    52              <th field="zczj" width="100" align="center" >注册资金(万元)</th>
    53              <th field="nyye" width="100" align="center" >年营业额(万元)</th>
    54              <th field="khyh" width="100" align="center" >开户银行</th>
    55              <th field="khzh" width="100" align="center" >开户帐号</th>
    56              <th field="dsdjh" width="100" align="center" >地税登记号</th>
    57              <th field="gsdjh" width="100" align="center" >国税登记号</th>
    58         </tr>
    59     </thead>
    60  </table>
    61  <div id="tb">
    62      <div>
    63          &nbsp;客户编号:&nbsp;<input type="text" id="s_khno" size="20" onkeydown="if(event.keyCode==13) searchCustomer()"/>
    64          &nbsp;客户名称:&nbsp;<input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchCustomer()"/>
    65          <a href="javascript:searchCustomer()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    66      </div>
    67  </div>
    68  
    69 </body>
    70 </html>
    View Code
  • 相关阅读:
    leaflet antvPath示例
    mysql根据属性分组找最值
    java stream流中的collect()方法详解
    Stream使用Collector.tomap方法value值为null时报空指针异常 解决方案
    mysql自定义函数计算时间段内的工作日(支持跨年)
    经典面试题:ES如何做到亿级数据查询毫秒级返回?
    一口气说出 4 种分布式一致性 Session 实现方式,面试杠杠的~
    使用Docker+nginx部署Vue项目
    linux重定向及/dev/null 2>&1详解
    Linux文件目录变只读(Read-only file system)导致mysql启动失败
  • 原文地址:https://www.cnblogs.com/jedjia/p/forzen.html
Copyright © 2020-2023  润新知