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

ゞ浴缸里的玫瑰 2023-10-11 18:25 69阅读 0赞

jQuery中，我们经常会遇到异步请求，那么我们应该怎么进行处理呢？今天小编就给大家分享一下整个过程，快跟着我行动起来吧。

一、html页面。

二、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、查询表格。

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、已上报表内容。

三、页面测试。

1、待上报页面。

![74b496d97c9e452499f254d527802832.png][]

2、已上报页面。

![e8f7ffd089f84d57befb68720096e5f7.png][]

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

[74b496d97c9e452499f254d527802832.png]: https://img-blog.csdnimg.cn/74b496d97c9e452499f254d527802832.png
[e8f7ffd089f84d57befb68720096e5f7.png]: https://img-blog.csdnimg.cn/e8f7ffd089f84d57befb68720096e5f7.png