动态添加多tab,并初始化每个tab页面

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

html中只写了个class为easyui-tabs的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 = '
'; $('#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 }); }

 

你可能感兴趣的:(web前端,随笔记)