zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    LeetCode 382. Linked List Random Node
    LeetCode 398. Random Pick Index
    LeetCode 1002. Find Common Characters
    LeetCode 498. Diagonal Traverse
    LeetCode 825. Friends Of Appropriate Ages
    LeetCode 824. Goat Latin
    LeetCode 896. Monotonic Array
    LeetCode 987. Vertical Order Traversal of a Binary Tree
    LeetCode 689. Maximum Sum of 3 Non-Overlapping Subarrays
    LeetCode 636. Exclusive Time of Functions
  • 原文地址:https://www.cnblogs.com/jedjia/p/forzen.html
Copyright © 2011-2022 走看看