un9.14:前端页面中实现只切换表格不切换页面功能。

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、已上报页面。

如此，便可以实现只切换表格，不切换页面的功能啦！