EasyUi 并列显示两个DataGrid

最新推荐文章于 2023-12-31 17:07:40 发布

_长银_

最新推荐文章于 2023-12-31 17:07:40 发布

阅读量931

点赞数

分类专栏：前端知识文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/zcy_wxy/article/details/125727256

版权

前端知识专栏收录该内容

23 篇文章 0 订阅

订阅专栏

涉及知识点： easy-ui layout布局。

代码如下：

north区域是按钮等的显示

west和center分别是两个datagrid，其中title属性设置标题。

<body>
	<div class="easyui-layout" fit="true">
		<div data-options="region:'north'" style="height:0px">
			<table>
				<tr>
					<td style="width: 80px;" align="right">
						<b>xxx：</b>
					</td>
					<td style="width: 160px;" align="left">
						<input id="xxx" style="width: 150px;"/>
					</td>
					<td style="width: 80px;" align="right">
						<b>xxx：</b>
					</td>
					<td style="width: 160px;" align="left">
						<input id="xxx" style="width: 150px;"/>
					</td>
					<td style="width: 120px;" align="left">
						<a href="javascript:void(0)" class="easyui-linkbutton"
						   data-options="iconCls:'icon-search',plain:true"
						   onclick="searchData()">查找</a>
						<a href="javascript:void(0)" class="easyui-linkbutton"
						   data-options="iconCls:'icon-clear',plain:true"
						   onclick="clearSearch()">清空</a>
					</td>
				</tr>
			</table>
		</div>
		<div data-options="region:'west',split:true,title:'xxx',collapsible:false" style="width:50%;">
			<table id="xxx" data-options="fit:true,border:false"></table>
		</div>

		<div data-options="region:'center',title:'xxx',collapsible:false" style="width: 50%;">
			<table id="xxx" data-options="fit:true,border:false"></table>
		</div>
	</div>
</body>