首先配置好easyui环境
1.ACCORDION(手风琴)
class:class=easyui-accordion,
事件:
查找:
function selectPanel(){ //会弹出输入框 s为自动获取输入的值
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
if (s){
$('#aa').accordion('select',s); //#aa要操作的大容器
}
});
}
添加:
var idx = 1;
function addPanel(){
$('#aa').accordion('add',{ //#aa要操作的大容器
title:'Title'+idx,
content:'<div style="padding:10px">Content'+idx+'</div>' //content添加的内容,title标题
});
idx++;
}
删除:
function removePanel(){
var pp = $('#aa').accordion('getSelected'); //pp获取当前选中对象
if (pp){
var index = $('#aa').accordion('getPanelIndex',pp); //index获取当前选中对象的索引
$('#aa').accordion('remove',index);
}
}
Ajax嵌套页面:data-options="href:'ajax.html'" //ajax.html页面路径
树状图:
<ul class="easyui-tree">
这里面写ul---li
</ul>
内部 data-options="collapsed:false" //防止折叠
2.例子：
<div style="margin:20px 0 10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
</div>
<div id="aa" data-options="multiple:true" class="easyui-accordion" style="500px;height:500px;"><!--data-options="multiple:true"启用多个面板-->
<div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;"><!--collapsed:false不可折叠-->
<input class="easyui-searchbox" prompt="Enter something here" style="300px;height:25px;">
</div>
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" >
<h3>Accordion for jQuery>sd</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
<div>
</div>
</div>
<div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
</div>
<div title="树">
<ul class="easyui-tree">
<li>
<ul>
<li>666</li>
</ul>
</li>
<li>132</li>
<li>132</li>
</ul>
</div>
<div title="数据" data-options="
selected:true,
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#dg').datagrid('reload');
}
}]">
<table id="dg" class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'itemid',80">Item ID</th>
<th data-options="field:'productid',100">Product ID</th>
<th data-options="field:'listprice',80,align:'right'">List Price</th>
<th data-options="field:'unitcost',80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',150">Attribute</th>
<th data-options="field:'status',50,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
function selectPanel(){
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
if (s){
$('#aa').accordion('select',s);
}
});
}
var idx = 1;
function addPanel(){
$('#aa').accordion('add',{
title:'Title'+idx,
content:'<div style="padding:10px">Content'+idx+'</div>'
});
idx++;
}
function removePanel(){
var pp = $('#aa').accordion('getSelected');
if (pp){
var index = $('#aa').accordion('getPanelIndex',pp);
$('#aa').accordion('remove',index);
}
}
</script>
启用可多个面板:data-options="multiple:true"
效果图:
