如何使用EasyUI Layout组件

2025-02-04 技术教程

1. 基础布局

<divid="l"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',title:'north',height:50"></div><divdata-options="region:'west',title:'west',width:100"></div><divdata-options="region:'east',title:'east',width:100"></div><divdata-options="region:'center',title:'center'"><tableid="dg"class="easyui-datagrid"data-options="fit:true,url:'/easyui/data.json',border:false,method:'get',singleSelect:true,fitColumns:true"><thead><tr><thdata-options="field:'name',width:'33%'">姓名</th><thdata-options="field:'age',width:'33%'">年龄</th><thdata-options="field:'sex',width:'34%',align:'right'">性别</th></tr></thead></table></div></div>

2. 全屏布局

<bodyclass="easyui-layout"data-options="fit:true"><divdata-options="region:'center',title:'fullscreen'"></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script></body>或<divid="l"class="easyui-layout"><divdata-options="region:'center',title:'fullscreen'"></div></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">width=$(document).width();height=$(document).height();$('#l').layout({width:width,height:height,});</script>

3. 流式布局

<divid="l"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'west',title:'west',width:'30%',content:'30%',bodyCls:'layoutPadding'"></div><divdata-options="region:'center',title:'center',bodyCls:'layoutPadding'"></div></div><styletype="text/css"scoped="scoped">.layoutPadding{padding:10px;}</style>

4. 自适应高度布局

<divid="l"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',height:50"><ahref="#"class="easyui-linkbutton"onclick="javascript:add(this);">添加</a><ahref="#"class="easyui-linkbutton"onclick="javascript:remove(this);">删除</a></div><divdata-options="region:'south',height:50">南</div><divdata-options="region:'west',width:100">西</div><divdata-options="region:'east',width:100">东</div><divdata-options="region:'center'"><p>点击上面按钮添加一行内容</p></div></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">//中间最后一行添加一行内容functionadd(that){$('#l').layout('panel','center').append('<p>点击上面按钮添加一行内容</p>');resetHeight();};//删除中间最后的一行的内容functionremove(that){$('#l').layout('panel','center').find('p:last').remove();resetHeight();};//重置整个layout的高度functionresetHeight(){//获取中间的panelJquery对象varcpanel=$('#l').layout('panel','center');//获取当前cpanel的高度varcpanelOldHeight=cpanel.outerHeight();//设置中间的panel对象的高度为自适应cpanel.panel('resize',{height:'auto'});//重新获取cpanel的高度varcpanelNewHeight=cpanel.outerHeight();//重置layout的宽度,减少两次之差即可varlayoutheight=$('#l').height()-(cpanelOldHeight-cpanelNewHeight);$('#l').layout('resize',{height:layoutheight});};</script>

5. 嵌套布局

<divid="l"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',height:50"></div><divdata-options="region:'south',height:50"></div><divdata-options="region:'west',width:50"></div><divdata-options="region:'center'"><divid="ll"class="easyui-layout"data-options="fit:true"><divdata-options="region:'west',width:100,split:true,border:false"></div><divdata-options="region:'center',border:false"></div></div></div></div>

6. 没有折叠按钮的布局

<divid="l"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',height:50"></div><divdata-options="region:'south',height:50"></div><divdata-options="region:'west',width:'70%',collapsible:false,bodyCls:'layoutPadding',title:'recruitmentnotice:',iconCls:'icon-ok'"><p>招聘运维开发工程师</p><ul><li>投简历至:xmdevops@vip.qq.com</li></ul></div><divdata-options="region:'center',width:'30%'"></div></div><styletype="text/css">.layoutPadding{padding:10px;}</style>

7. 复杂布局

<divid="lo"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',height:50"></div><divdata-options="region:'south',height:50"></div><divdata-options="title:'menu',region:'west',width:100"><divid="ac"class="easyui-accordion"data-options="fit:true,border:false"><divdata-options="title:'accordion1',bodyCls:'padding10'">accordion1</div><divdata-options="title:'accordion2',bodyCls:'padding10'">accordion2</div><divdata-options="title:'accordion3',bodyCls:'padding10'">accordion3</div></div></div><divdata-options="region:'east',width:200"><ulid="te"class="easyui-tree"data-options="fit:true,border:false"><li><span>1</span><ul><li>1-1</li><li><span>2</span><ul><li>2-1</li><li><span>3</span><ul><li>3-1</li></ul></li></ul></li></ul></li></ul></div><divdata-options="region:'center',border:false"><divid="tb"class="easyui-tabs"data-options="fit:true"><divdata-options="title:'About',bodyCls:'padding10'"><p>物联网开发公司</p><ul><li>成立于2008年.</li></ul></div><divdata-options="title:'Company',border:false"><tableid="dg"class="easyui-datagrid"data-options="url:'/easyui/data.json',method:'get',fit:true,singleSelect:true,fitColumns:true"><thead><thdata-options="field:'name',width:'33%'">名字</th><thdata-options="field:'age',width:'33%'">年龄</th><thdata-options="field:'sex',width:'34%'">性别</th></thead></table></div></div></div><styletype="text/css"scoped="scoped">.padding10{padding:10px;};</style>

8. 添加和移除布局

<divid="lo"class="easyui-layout"data-options="width:500,height:250"><divdata-options="region:'north',height:100,bodyCls:'padding10'"><fieldset><legend>操作区</legend><div><span>region:</span><selectname="region"id="regionArea"><optionvalue="south">south</option><optionvalue="west">west</option><optionvalue="east">east</option><optionvalue="center">center</option></select></div><div><ahref="#"class="easyui-linkbutton"onclick="javascript:add(this);">添加</a><ahref="#"class="easyui-linkbutton"onclick="javascript:remove(this);">删除</a></div></fieldset></div><divdata-options="region:'south',height:50"></div><divdata-options="region:'west',width:100"></div><divdata-options="region:'east',width:100"></div><divdata-options="region:'center'"></div></div><styletype="text/css"scoped="scoped">.padding10{padding:10px;}</style><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">//添加布局functionadd(that){varregion=$('#regionArea').val();varregionPanel=$('#lo').layout('panel',region);if(regionPanel.length)return;varoptions={region:region};if(['north','south'].indexOf(region))options['height']=50;if(['west','east'].indexOf(region))options['width']=100;$('#lo').layout('add',options);};//删除布局functionremove(that){varregion=$('#regionArea').val();varregionPanel=$('#lo').layout('panel',region);if(!regionPanel.length)return;$('#lo').layout('remove',region);};</script>