0

我正在尝试从页面顶部的 db 调用数据，然后使用 foreach 中的数组信息来填充选项卡中的表。目前我正在使用选项卡 2 进行测试，但我希望它最初显示在选项卡中1 除非用户移动。我不确定在哪里或如何包含数据库查询和结果，以便正确填充。这是我到目前为止所拥有的。

{source 0}
<?php
$user =& JFactory::getUser();
    if (!$user->guest)
$name = $user->username;
$db =& JFactory::getDbo();
$query = $db->getQuery(true);
    $query = "
         SELECT image_url, name_test, image_date
         FROM #__image_data
         WHERE user_name = '$name'";
$db->setQuery($query);
echo $name."'s Pets" . "<br/>";

$list = $db->loadObjectList();
    foreach ($list as $item){
}
?>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Simple manipulation</title>
    <link rel="stylesheet" href="/Joomla3/jquery/themes/base/jquery.ui.all.css">
    <script src="/Joomla3/jquery/jquery-1.8.3.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.position.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.core.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.widget.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.mouse.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.sortable.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.button.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.tabs.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.dialog.js"></script>
    <script src="/Joomla3/jquery/ui/jquery.ui.droppable.js"></script>
    <link rel="stylesheet" href="/Joomla3/jquery/demos/demos.css">
    <style>
    #dialog label, #dialog input { display:block; }
    #dialog label { margin-top: 0.5em; }
    #dialog input, #dialog textarea { width: 95%; }
    #tabs { margin-top: 1em; }
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    #add_tab { cursor: pointer; }
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>

    <script>
    $(function() {
        $( "#sortable1, #sortable2" ).sortable().disableSelection();

        var $tabs = $( "#tabs" ).tabs();

        var $tab_items = $( "ul:first li", $tabs ).droppable({
            accept: ".connectedSortable li",
            hoverClass: "ui-state-hover",
            drop: function( event, ui ) {
                var $item = $( this );
                var $list = $( $item.find( "a" ).attr( "href" ) )
                    .find( ".connectedSortable" );

                ui.draggable.hide( "slow", function() {
                    $tabs.tabs( "select", $tab_items.index( $item ) );
                    $( this ).appendTo( $list ).show( "slow" );
                });
            }
        });
    });
    </script>

    <script>
    $(function() {
        var tabTitle = $( "#tab_title" ),
            tabContent = $( "#tab_content" ),
            tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            tabCounter = 2;

        var tabs = $( "#tabs" ).tabs();

        // modal dialog init: custom buttons and a "close" callback reseting the form inside
        var dialog = $( "#dialog" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Add: function() {
                    addTab();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
            }
        });

        // addTab form: calls addTab function on submit and closes the dialog
        var form = dialog.find( "form" ).submit(function( event ) {
            addTab();
            dialog.dialog( "close" );
            event.preventDefault();
        });

        // actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var label = tabTitle.val() || "Tab " + tabCounter,
                id = "tabs-" + tabCounter,
                li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
                tabContentHtml = tabContent.val() || "Tab " + tabCounter;

            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        }

        // addTab button: just opens the dialog
        $( "#add_tab" )
            .button()
            .click(function() {
                dialog.dialog( "open" );
            });

        // close icon: removing the tab on click
        $( "#tabs span.ui-icon-close" ).live( "click", function() {
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });
    });
    </script>

    <script>
    $(function() {
        var tabs = $( "#tabs" ).tabs();
        tabs.find( ".ui-tabs-nav" ).sortable({
            axis: "x",
            stop: function() {
                tabs.tabs( "refresh" );
            }
        });
    });
    </script>

</head>
<body>
<div id="main_container">
<div id="dialog" title="Tab data">
    <form>
        <fieldset class="ui-helper-reset">
            <label for="tab_title">Title</label>
            <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />

        </fieldset>
    </form>
</div>

<button id="add_tab">Add Tab</button>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Main</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <!--<li><a href="#tabs-3">Tab 3</a></li>  // Additional tabs added to the main-->
    </ul>
    <div id="tabs-1">
        <p>Test information.</p>
    </div>
    <div id="tabs-2">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
            <li class="ui-state-highlight"><img src="http://localhost/Joomla3/myimage.png"></li>
            <li class="ui-state-highlight">
                        <?php"<tr><td>"."<img src='$item->image_url'>" . "<td>" . $item->name_test . "<td>" . $item->image_date ."</td></tr>"?></li>
                    <li class="ui-state-highlight">Item 2</li>
            <li class="ui-state-highlight">Item 3</li> 
            <li class="ui-state-highlight">Item 4</li>
            <li class="ui-state-highlight">Item 5</li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

{/source}
4

1 回答 1

0

由于您已经foreach为您的数据库数据设置了一个循环，因此可以创建存储在如下变量中的所有 html：

$tableHtml='<table id="foo">';
foreach ($list as $item){
   $tableHtml.="<tr><td><img src='".$item->image_url."'><td>" . $item->name_test . "</td><td>" . $item->image_date ."</td></tr>";   

}
$tableHtml='</table';

然后在你想要表格的页面部分：

<?php echo $tableHtml; ?>
于 2013-01-07T05:39:09.883 回答