html页面动态添加多个tab，并给每个tab进行初始化数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhang_kang_user/article/details/81118115

这里演示的只是我在项目中遇到的，根据自己的实际情况，自己修改。

html中只写了个class为easyui-tabs的div

<div id="center" data-options="region:'center'">
        <!--这个定义div的id，后面需要用到-->
        <div id="tabs_D" class="easyui-tabs" >
           
        </div>
    </div>

当页面加载的时候根据自己的情况进行动态的加载tab页面；

//其中的addTabw为添加tab的方法
function initTableTabs(){ 
    $.post('../../../BaseMessage/PUSH/XSJHService.ashx?m=SelectFDMBByCXHDBH', { "CXHDBH":                 C_CXHDBH }, function (res) {
                var _Data = JSON.parse(res);
                var _RowsFD = _Data.INFOFD;
                var _RowsRQ  = _Data.INFORQ;
                if (_RowsFD != null) {
                    for (var k in _RowsFD) {
                        addTabw(_RowsFD[k].FDMC, 'DGY_Detail_Mode_dg_' + _RowsFD[k].FDBH);
                        window["FDRQData_"+ _RowsFD[k].FDBH]=[];
                        if (_RowsRQ != null) {
                            for (var i in _RowsRQ) {
                                if( _RowsRQ[i].FDBH == _RowsFD[k].FDBH){
                                    window["FDRQData_"+ _RowsFD[k].FDBH].push(_RowsRQ[i]);
                                }
                            }
                        }
                    //在这里给datagrid赋值
                        $("#DGY_Detail_Mode_dg_" + _RowsFD[k].FDBH).datagrid('loadData', window["FDRQData_" + _RowsFD[k].FDBH]);
                        }
                    }
                }
            });    
}       

//添加tab，初始化tab，给tab上的table赋值

//选中一个tab，输入title
function selectTabw(title) {
        if ($('#tabs_D').tabs('exists', title)) {
                $('#tabs_D').tabs('select', title);//如果存在当前页面，则跳转到页面
            }
        }
//添加tab，tab的content为一个table，且tab为不可关闭，如果要改为可关闭的，false改为true，
//其实这两个为一个方法，要先判断是否存在这个页面，存在则不用再加入了，不过，我这里调用时，肯定传入的title不同，所以没有加判断
        function addTabw(title, table_id) {
            var content = '<table id='+table_id+'></table>';
            $('#tabs_D').tabs('add', {//不存在，则添加一个
                title: title,
                content: content,
                closable: false
            });
            tableToInit(table_id);
        }

//初始化tableById
function tableToInit(table_id) {
            $("#"+table_id).datagrid({
                title: '',
                loadMsg: '正在加载数据...',
                rownumbers: true,
                singleSelect: true,
                multiSort: false,
                remoteSort: true,
                columns: [[
                    { title: '销售计划ID', field: 'CXHDBH', align: 'center', sortable: true, wdith: 120  },
                    { title: '分店名称', field: 'FDMC', align: 'center', sortable: true, wdith: 200 },
                    { title: '日期', field: 'RQ', align: 'center', sortable: true, wdith: 200 },
                    {
                        title: '目标（万元）', field: 'XSMB', align: 'center', width: 100, sortable: true,
                        formatter: function (value, row, index) {
                            return value == null ? '' : value;
                        }
                    },
                    { title: '登记人', field: 'DJRMC', align: 'center', width: 100, sortable: true },
                    {
                        title: '登记时间', field: 'DJSJ', align: 'center', width: 120, sortable: true,
                        formatter: function (value, row, index) {
                            return value != null ? value.replace("T", " ") : "";
                        }
                    }
                ]],
                pageSize: 1000
            });

        }