Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示

再前台发送一个请求(利用的Ajax),再后台中找到两个表的数据。分别返回list。

再封装一个实体类,实体类中放两个元素,list<表1对象>,list<表2对象>。

再把查询出来的表list分别放到实体类中。返回,然后在前台分别创建两个tab标签,每个tab标签显示一个表格的数据

上代码:

1.前台显示。用的easy UI的tab

2.访问该链接的函数,把tab标签添加出来,并把每个tab中的table表格渲染出来,在触发Ajax请求

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第1张图片

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第2张图片

3.触发Ajax的请求

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第3张图片

4.添加实体类,其中每一个list<>每个表返回的集合

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第4张图片

5.开发controller层的方法。其中查找数据的service、dao层自行创建

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第5张图片

6.回去修改Ajax返回的数据

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第6张图片

可以看到返回数据的格式。

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第7张图片

$('#tableId').datagrid('loadData',数据);

在这个easy UI中的datagrid('loadData',数据)的方法中。“数据”可以是list集合,也可以是{rows:list集合,count:条数}

最后放上成功显示的页面:

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第8张图片

补充:这是表格渲染的函数样式;可根据自己需要修改其中的columns

Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示_第9张图片

总结:在分两个tab标签,分别显示两个表格数据,也可以用datagrid的url访问。如果这样的话即使发送了两个请求。

在返回数据的时候,返回该实体类的对象应该是可行的。

其中在Ajax中可以添加自己要查询的条件。先获得第一个表的list。根据第一个表中的id值作为条件,查询第二张表的数据。

你可能感兴趣的:(tab)