easyUI 表格显示frozen属性使用
Posted 心和梦的方向
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 客户编号： <input type="text" id="s_khno" size="20" onkeydown="if(event.keyCode==13) searchCustomer()"/> 64 客户名称： <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>
以上是关于easyUI 表格显示frozen属性使用的主要内容，如果未能解决你的问题，请参考以下文章