先看问题描述效果图片:

如上,我的查询条件是放在layout下面的一个可收缩层中,初始是收缩的,title显示不出来的话对使用者很不方便,代码如下:

<div id="__MODULE__PagePanel" class="easyui-layout" data-options="fit : true,border : false">
<div id="__MODULE__SearchTab" title="条件筛选卡" data-options="region:'north',border:true,collapsed:true,iconCls:'icon-search'" style="height: 165px;overflow: auto;" align="center">
<form id="__MODULE__SearchForm" onsubmit="$('#__MODULE__Search').click();return false;">
<table class="tableForm">
<tr>
<th style="width: 170px;">关键字(支持模糊查询):</th>
<td><input name="searchKeyWords" style="width: 315px;" /></td>
</tr>
</table>
<div>
<a id="__MODULE__Search" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="__MODULE__SearchFun();">过滤条件</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cross'" onclick="__MODULE__CleanFun();">清空条件</a>
</div>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="__MODULE__Datagrid"></table>
</div>
</div>

为什么显示不出title呢?查了很久也没找到原因,估计是easyui本身就有这个问题吧,目前我的临时解决方案是修改easyui源码添加一个自定义属性上去,属性名称:closedTitle,修改后的效果图片如下:

修改后的代码如下:

<div id="__MODULE__PagePanel" class="easyui-layout" data-options="fit : true,border : false">
<div id="__MODULE__SearchTab" title="条件筛选卡" data-options="closedTitle:'高级条件筛选卡(点击展开)',region:'north',border:true,collapsed:true,iconCls:'icon-search'" style="height: 165px;overflow: auto;" align="center">
<form id="__MODULE__SearchForm" onsubmit="$('#__MODULE__Search').click();return false;">
<table class="tableForm">
<tr>
<th style="width: 170px;">关键字(支持模糊查询):</th>
<td><input name="searchKeyWords" style="width: 315px;" /></td>
</tr>
</table>
<div>
<a id="__MODULE__Search" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="__MODULE__SearchFun();">过滤条件</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cross'" onclick="__MODULE__CleanFun();">清空条件</a>
</div>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="__MODULE__Datagrid"></table>
</div>
</div>

修改jquery.easyui.min.js【easyui版本为1.3.1】如下:

1.在4004行位置后添加代码如下:

4003 var _309=$.data(_306,"layout").panels;
4004 var p=_309[_307];
4005 var _Cstitle;
4006 var _closedTitle=p.panel("options").closedTitle;
4007 if(_closedTitle) _Cstitle = _closedTitle;
4008 else _Cstitle = ' ';
4009 if(p.panel("options").onBeforeCollapse.call(p)==false){
4010 return;
4011 }

2.在原来4043行的title属性修改为上面定义的_Cstitle变量,代码如下:

var p=$("<div></div>").appendTo(_306).panel({cls:"layout-expand",title:_Cstitle,closed:true,doSize:false,tools:[{iconCls:icon,handler:function(){
_30f(_306,_307);
return false;
}}]});

这样你在HTML模板文件中就可以定义closedTitle属性作为收缩后的标题了哦,效果图如下:

注意:本文由hongping626在CSDN首发,如需转载请注明出处!

easyui-layout中的收缩层无法显示标题问题解决的更多相关文章

  1. easyui layout 左右面板折叠后 显示标题

    (function($){ var buttonDir = {north:'down',south:'up',east:'left',west:'right'};    $.extend($.fn.l ...

  2. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

  3. easyUI layout 中使用tabs+iframe解决请求两次方法

    demo中的事例在加载tab页面时是 function createFrame(url) { var s = '<iframe name="iframepanel" scro ...

  4. Android 代码中文字在手机上显示乱码问题解决方法

    在学习Android过程中,用于测试时发现,代码中的中文在真机上会显示乱码, 网上查阅了些资料,参考如下: http://www.androidchina.net/3024.html http://b ...

  5. AD18 PCB中添加中文字符串显示乱码问题解决

    该问题是由于字符串的自体类型设置问题,AD默认是[stroke],我们点击[TrueType]即可正常显示.PS:AD18搞啥呢,默认显示输入内容不行吗,找半天!!!

  6. Windows“储存并显示最近在开始菜单和任务栏中打开的项目”显示灰色问题解决

    问题截图如下: 解决方法 打开"组策略",依次选择"用户配置"--"管理模板"--"开始菜单和任务栏"--"不 ...

  7. Android中不显示标题

    在网上找的用requestWindowFeature(Window.FEATURE_NO_TITLE)这一句报错. 后来找到另一种方法 1.在res/values/styles.xml中添加如下代码 ...

  8. layout折叠后显示标题

    Easyui的layout折叠后显示怎样可以显示标题 //在layout的panle全局配置中,增加一个onCollapse处理title$.extend($.fn.layout.paneldefau ...

  9. 在每页(分页)报表中重复显示标题 - SQL Server Reporting Service (SSRS)

    问题描述 TFS系统提供多种报表,有图表(Chart).Web面板(Dashboard).SharePoint面板.Excel报表,SQL Server Reporting Serivce(SSRS) ...

随机推荐

  1. Android DatePicker和TimePicker

    监测日期改变的监听器:      OnDateChangedListener和OnTimeChangedListener()           当用户改变Datepicker里的年.月.日时,将触发 ...

  2. hadoop笔记之Hive的数据类型

    Hive的数据类型 Hive的数据类型 前面说过,Hive是一个数据仓库,相当于一个数据库.既然是数据库,那么就必须能创建表,既然有表,那么当中就有列,列中就有对应的类型 总的来讲,hive的数据类型 ...

  3. c# 搭建服务端 byte[] 处理(3)

    数据的传输中,为防止数据传输过程中被获取解析 造成数据的不安全,一般都会采取各类的方式对数据进行加密.压缩等操作,在客户端或服务端以相同的算法解析即可获得数据,一定程度上减小了数据在中间过程被获取数据 ...

  4. display的table和cell外加table-layout:fixed等分布局,外加换行,word-wrap:break-word

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 在cmd中输入ls命令出现“ls不是内部或外部命令解决

    今天在学习sass查看目录遇到cmd输入ls提示不是内部命令 解决方法: 新建一个ls.bat文件 内容为: @echo off dir

  6. 游戏开场镜头拉近(Unity3D开发之四)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/? p=553 今天看了个Demo.发现 ...

  7. dataset 用法(3)

    ReadXml 提供了只将数据或同时将数据和架构从 XML 文档读入 DataSet 的方式(若要同时读数据和架构,请使用包括 mode 参数的 ReadXML 重载之一,并将其值设置为 ReadSc ...

  8. 学习ExtjsForVs(第一个案例HelloWord)

    第一个案例-Hello Word 1.本次练习以ext-4.0.7为例,首先从网上下载ext包. 2.打开包后将里面的三个文件或文件夹拷贝到项目中. resource文件夹 bootstrap.js ...

  9. Server.MapPath(string sFilePath) 报未将对象引用到实例异常

    System.Web.HttpContext.Current.Server.MapPath(string sfilePath)将虚拟路径转换成物理路径.这个必须在aspx或者MVC中Action调用才 ...

  10. c# webConfig中的session超时详细设置

    webConfig中的session超时详细设置 我们在webConfig中设置Session超时的时候,如果最后发行的地址是远程服务器,我们很多不是必须的属性并不用设置,如果设之后,倒不能让 ses ...