先看问题描述效果图片:
如上,我的查询条件是放在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" οnsubmit="$('#__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'" οnclick="__MODULE__SearchFun();">过滤条件</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cross'" οnclick="__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" οnsubmit="$('#__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'" οnclick="__MODULE__SearchFun();">过滤条件</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cross'" οnclick="__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首发,如需转载请注明出处!