EasyUI - tab动态加载datagrid

最新推荐文章于 2022-04-06 20:17:17 发布

转载最新推荐文章于 2022-04-06 20:17:17 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/KTblog/p/5023388.html

文章标签：

#javascript #ViewUI

本文介绍如何使用EasyUI库实现动态表格(datagrid)组件的创建与选项卡(tabs)的添加。主要内容包括：利用JavaScript函数动态生成带有刷新功能的选项卡，并将带有特定字段的表格内容加载到该选项卡中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addTab: function() {
    $("#myTabs").tabs('add', {
        title: 'my title',
        closable: true,
        tools: [{
            iconCls: 'icon-mini-refresh',
            handler: function() {
                alert('refresh');
            }
        }]
    });
     
    var currentTabPanel = $("#tabsMain").tabs('getSelected');
    var dynamicTable = $('<table id="tbTest"></table>');
    //这里一定要先添加到currentTabPanel中，因为dynamicTable.datagrid()函数需要调用到parent函数
    currentTabPanel.html(dynamicTable);
    dynamicTable.datagrid({
            url:'datagrid_data.json',
            columns:[[
            {field:'code',title:'Code',width:100},
            {field:'name',title:'Name',width:100},
            {field:'price',title:'Price',width:100,align:'right'}
            ]]
        });
}

转载于:https://www.cnblogs.com/KTblog/p/5023388.html