先看问题描述效果图片:

如上,我的查询条件是放在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. leetcode Count and Say python

    class Solution(object): def countAndSay(self, n): """ :type n: int :rtype: str " ...

  2. Linux学习awk命令

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  3. 走进C标准库(5)——"stdio.h"中的其他部分函数

    函数介绍来自:http://ganquan.info/standard-c/ 函数名: freopen 功  能: 替换一个流 用  法: FILE *freopen(char *filename, ...

  4. SQL Server 修改表

    alter table 可能用三种方式来完成. 第一种: 只修改元数据. 1.删除一个列. 2.一个行被增加而且空值被认为是所有行的新值. 3.当可变长度的列的长度增加时. 4.不允许为空的列被允许为 ...

  5. 一个SysLog实现

    http://www.ice.com/java/syslog/index.shtml http://alvinalexander.com/servlets

  6. WIN7 64位通过VPN远程登录 ASP.Net通过VPN访问Oracle服务器

    因为客户这边的服务器是64位的,所以本人手贱,把系统换成了64位的win7,以为来客户这边工作会更方便,谁知道来到客户这边,进不了他们公司的内网,然后给我一个VPN的账号,先VPN然后才能登录他们的测 ...

  7. [原]基于CAS实现单点登录(SSO):登录成功后,cas client如何返回更多用户信息

    从cas server登录成功后,默认只能从casclient得到用户名.但程序中也可能遇到需要得到更多如姓名,手机号,email等更多用户信息的情况. cas client拿到用户名后再到数据库中查 ...

  8. 一个在mac上编译c++程序的低级失误

    今天在编译hadoop的pipes的wordcount例子时,总是报错不能成功. g++ -m64 -I/Users/stephen/Downloads/hadoop-0.20.2/c++/Mac_O ...

  9. current imporant Posts

    CRUD是指在做计算处理时的增加(Create).读取(Retrieve)(重新得到数据).更新(Update)和删除(Delete) http://www.centos.org/docs/5/htm ...

  10. Matrix Swapping II(求矩阵最大面积,dp)

    Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...