布局代码如下::
<div data-toggle="topjui-layout" data-options="fit:true">
<div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false,bodyCls:'border_left_right'">
<table id="productDg"></table>
</div>
<div data-options="region:'east',iconCls:'icon-chart_pie',title:'',split:true,border:false,width:'40%'">
<div data-toggle="topjui-tabs"
data-options="id:'eastTabs',
fit:true,
border:true,
bodyCls:'border_right_none',
parentGrid:{
type:'datagrid',
id:'userDg',
param:'puuid:uuid'
}">
<div title="Panel面板1"
data-options="id:'eastTab0',iconCls:'fa fa-th',
href:'http://www.topjui.com?uuid={uuid}'"></div>
</div>
</div>
</div>
<!-- 表格工具栏开始 -->
<div id="productDg-toolbar" class="topjui-toolbar"
data-options="grid:{
type:'datagrid',
id:'productDg'
}">
<a id="add" href="javascript:void(0)">新增</a>
<a id="edit" href="javascript:void(0)">编辑</a>
<a id="batchUpdate" href="javascript:void(0)">批量操作</a>
<a id="delete" href="javascript:void(0)">删除</a>
<a id="filter" href="javascript:void(0)">过滤</a>
<a id="search" href="javascript:void(0)">查询</a>
<a id="import" href="javascript:void(0)">导入</a>
<a id="export" href="javascript:void(0)">导出</a>
<a id="openTab" href="javascript:void(0)">标签页</a>
<a id="openWindow" href="javascript:void(0)">新窗口</a>
<a id="request" href="javascript:void(0)">普通请求</a>
<a id="myFun" href="javascript:void(0)">自定义方法</a>
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="menu:'#exportSubMenu',
btnCls:'topjui-btn-blue',
hasDownArrow:true,
iconCls:'fa fa-list'">更多</a>
<div id="exportSubMenu" class="topjui-toolbar"
data-options="grid:{
type:'datagrid',
id:'productDg'
}" style="width:150px;">
<div data-toggle="topjui-menubutton"
data-options="method:'request',
iconCls:'fa fa-file-pdf-o',
url:_ctx + '/json/response/success.json?uuid={uuid}'">导出 PDF 报表
</div>
<div data-toggle="topjui-menubutton"
data-options="method:'export',
iconCls:'fa fa-file-excel-o',
url: _ctx + '/json/response/export.html'">导出EXCEL列表
</div>
<div data-toggle="topjui-menubutton"
data-options="method:'request',
iconCls:'fa fa-file-excel-o',
url:_ctx + '/json/response/success.json?uuid={uuid}'">导出EXCEL报表
</div>
<div data-toggle="topjui-menubutton"
data-options="method:'request',
iconCls:'fa fa-file-word-o',
url:_ctx + '/json/response/success.json?uuid={uuid}'">导出WORD报表
</div>
</div>
<form id="queryForm" class="search-box">
<input type="text" name="name" data-toggle="topjui-textbox"
data-options="id:'name',prompt:'产品名称',width:100">
<input type="text" name="code" data-toggle="topjui-textbox"
data-options="id:'code',prompt:'产品型号',width:100">
<a id="queryBtn" href="javascript:void(0)">查询</a>
</form>
</div>
<!-- 表格工具栏结束 -->