EasyUISubGrid 绑定tabs效果

Posted ~哎呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUISubGrid 绑定tabs效果相关的知识,希望对你有一定的参考价值。

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="jquery-easyui-1.5/themes/material/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.5/themes/icon.css" rel="stylesheet" />
    <script src="jquery-easyui-1.5/jquery.min.js"></script>
    <script src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script src="Scripts/datagrid-detailview.js"></script>
    <script>
        $(function () { 
            $(\'#tt\').datagrid({
                title: \'列表\',
                width: 1000,
                height: 450,
                remoteSort: false,
                singleSelect: true,
                nowrap: false,
                fitColumns: true,
                url: \'datagrid_data.json\',
                columns: [[
                    { field: \'itemid\', title: \'Item ID\', width: 80 },
                    { field: \'productid\', title: \'Product ID\', width: 100, sortable: true },
                    { field: \'listprice\', title: \'List Price\', width: 80, align: \'right\', sortable: true },
                    { field: \'unitcost\', title: \'Unit Cost\', width: 80, align: \'right\', sortable: true },
                    { field: \'attr1\', title: \'Attribute\', width: 150, sortable: true },
                    { field: \'status\', title: \'Status\', width: 60, align: \'center\' }
                ]],
                view: detailview,
                detailFormatter: function (rowIndex, rowData) { 
                    return \'<div style="padding:2px;position:relative;height:110px;"><div id="div_tab"  class="easyui-tabs"  style="width: 100%; height: 100%; "> <div title="班次">  班次信息  </div><div title="班组">  班zu信息  </div></div></div>\';
                },
                onExpandRow: function (index, row) {
                    var ddv = $(this).datagrid(\'getRowDetail\', index).find(\'#div_tab\');
                    ddv.tabs({
                        width: 540,
                        height: 100
                    }
                    );
                }
            });
        });
    </script>
</head>
<body>
    <table id="tt"></table>
</body>
</html>

  

以上是关于EasyUISubGrid 绑定tabs效果的主要内容,如果未能解决你的问题,请参考以下文章

教你如何用纯CSS写Tab切换

06_滚动tab开发_02 tabbar与图文列表绑定,互联互动

一段jquery代码搞定多个tab效果

jQuery实现tab栏切换效果

Tab 切换效果

antd源码分析之——标签页(tabs 3.Tabs的滚动效果)