jQuery中,我们经常会遇到异步请求,那么我们应该怎么进行处理呢?今天小编就给大家分享一下整个过程,快跟着我行动起来吧。
一、html页面。
<div class="content-box table-top-tab">
<ul class="tab-panel clearfix">
<li class="active">待上报</li>
<li>已上报</li>
</ul>
<div class="tabpanel-content">
<div>
<!--未上报表格-->
<div class="jqGrid_wrapper">
<table id="ds-up-list"></table>
</div>
</div>
<div class="view-hide">
<!--已上报表格-->
<div class="jqGrid_wrapper">
<table id="ds-upok-list"></table>
</div>
</div>
</div>
</div>
二、js页面。
1、初始化两个表格。
$(function () {
loadList("ds-up-list");
loadListOk("ds-upok-list");
});
2、表格切换。
//点击tab切换
$(".tab-panel li").on("click", function () {
var index = $(this).index();
$(".tab-panel li").removeClass("active");
$(this).addClass("active");
$(".tabpanel-content").children().addClass("view-hide");
$(".tabpanel-content").children().eq(index).removeClass("view-hide");
dataTableQuery(index);
});
3、查询表格。
function dataTableQuery(index){
// 查询列表
var objs = fromToJson("searchForm"); // 定义一个对象 存放保存对象
if(index == 0){
$("#addBtnDiv").show();
$JQGrid.search("ds-up-list", objs);
}else{
$("#addBtnDiv").hide();
$JQGrid.search("ds-upok-list", objs);
}
}
4、条件查询。
//条件查询
function queryList(){
// 查询列表
var objs = fromToJson("searchForm"); // 定义一个对象 存放保存对象
$JQGrid.search("ds-up-list", objs);
$JQGrid.search("ds-upok-list", objs);
}
5、待上报表内容。
//初始化待上报表
function loadList(tableId) {
loadMask();
var objs = {reportStatus:"0"};
$JQGrid.init({
"id": tableId,
"useCheckAll": true,
colNames: ['dsDetailId', '责任人', '国家', '开始时间', '索赔性质', '原告', '被告', '减免额', '创建时间'],// jqGrid的列显示名字
colModel: [ //jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式.....
{
name: 'dsDetailId',
index: 'dsDetailId',
hidden: true,
},
{
name: 'lawyerNames',
index: 'lawyerNames',
width: 100,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue) {
return cellvalue;
} else {
return "-";
}
}
}
],
"dataUrl": "/ds/dsDetail/queryDsDetailList",
"data": objs,
"jqObj": {
"jsonReader": {
"root": "data.list",
page: "data.pageNum",
total: "data.pages",
records: "data.total",
repeatitems: false,
id: "dsDetailId"
},//设置返回数据格式
}
6、已上报表内容。
function loadListOk(tableId) {
loadMask();
var objs = {reportStatus:"1"};
$JQGrid.init({
"id": tableId,
"useCheckAll": true,
colNames: ['dsDetailId', '责任人', '国家', '开始时间', '索赔性质', '原告', '被告', '减免额', '创建时间'],// jqGrid的列显示名字
colModel: [ //jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式.....
{
name: 'dsDetailId',
index: 'dsDetailId',
hidden: true,
},
{
name: 'lawyerNames',
index: 'lawyerNames',
width: 100
}
],
"dataUrl": "/ds/dsDetail/queryDsDetailList",
"data": objs,
"jqObj": {
"jsonReader": {
"root": "data.list",
page: "data.pageNum",
total: "data.pages",
records: "data.total",
repeatitems: false,
id: "dsDetailId"
},//设置返回数据格式
}
});
closeMask();
}
三、页面测试。
1、待上报页面。
2、已上报页面。
如此,便可以实现只切换表格,不切换页面的功能啦!