javascript - 从 PHP 到 Javascript 的数组处理

Question

我有一个在 PHP 中生成的数组，并将其存储到名为“$auction_additionalrevenues”的变量中。使用我生成的所述数组，使用 Bootstrap 生成了一个非常好的数据表。

我的最终目标是允许用户单击所述数据表中的一行，然后使用模式允许他们进行编辑(然后在表中创建一行)。

我已经使用 FileMaker 作为数据库源多次执行此操作，其中表中的行是“相关数据”或用户正在查看的父记录的子记录。这一次，数据不相关，而是在父记录本身的“重复字段”中，我从中创建了一个多维数组。

在这个特定实例中，我似乎无法正确理解如何向用户显示模型中他们单击的特定行的数据。这很令人沮丧，因为我将多维(或嵌套？)PHP 数组中的所有数据存储在全局变量中。换句话说，我不必返回数据库来获取该数据，因为它已经在数组/变量中。

如何在渲染页面/Javascript/PHP 之间传递所有这些数据？我可以通过“onclick”轻松地将记录/行回显到 JS 中，如下所示。

onClick=showadrev()

当我这样做时，我可以将 $mkey ($mkey = index/row) 写入控制台日志或警告它没有问题。

接下来，我希望模式弹出窗口显示嵌套在该索引/行处的数组。

这是我的数组:

Array
(
    [0] => Array
        (
        [0] => Raffle
        [1] => Pick of Live
        [2] => 
        [3] => 100
        [4] => 150
        [5] => Cocktail Only
        [6] => Struggled a bit, offered some from the stage to hit the minimum
    )

    [1] => Array
    (
        [0] => Raffle
        [1] => Ticket/Tangible
        [2] => $1000 gift certificate to Canlis
        [3] => 25
        [4] => Unlimited
        [5] => Cocktail Only
        [6] => Really don't know how this did, but the box was pretty full of tickets
    )

[2] => Array
    (
        [0] => Game
        [1] => Ticket/Tangible
        [2] => The Horse Race. Everyone is a winner. Receive a gift certificate ranging from $25 to $99.
        [3] => 25
        [4] => Unlimited
        [5] => Cocktail Only
        [6] => Great participation
    )

[3] => Array
    (
        [0] => Other
        [1] => Mystery/ Blind Pull
        [2] => Wine Pull
        [3] => 25
        [4] => 50
        [5] => cocktail only
        [6] => There was about a dozen or so left
    )

[4] => Array
    (
        [0] => Other
        [1] => Ticket/Tangible
        [2] => Centerpiece sales
        [3] => 25
        [4] => 35
        [5] => Pre & During
        [6] => Unknown
    )

)

这是我正在渲染的数据表:

<div class="wizard-step-3">
    <fieldset>
        <legend class="pull-left width-full">Aditional Revenue</legend>
        <!-- <div class="table-responsive"> -->
        <table id="data-table" class="table table-bordered table-striped" width="100%">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Type</th>
                    <th>Title</th>
                    <th>Price</th>
                    <th>Total Available</th>
                    <th>Sold By</th>
                    <th>Description</th>
                    <th>How did it Go?</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($auction_additionalrevenues as $mkey => $adrevitems){
                    $no = $mkey + 1;
                    ?><tr style="cursor:pointer;" onClick=showadrev(<?php echo $mkey ; ?>)><?php;
                    echo '<td>'.$no.'</td>';
                    echo '<td>'.$adrevitems[0].'</td>';
                    echo '<td>'.$adrevitems[1].'</td>';
                    echo '<td>'.$adrevitems[3].'</td>';
                    echo '<td>'.$adrevitems[4].'</td>';
                    echo '<td>'.$adrevitems[5].'</td>';
                    echo '<td>'.$adrevitems[2].'</td>';
                    echo '<td>'.$adrevitems[6].'</td>';
                    echo '</tr>';

            } ?>
            </tbody>
        </table>
        <!-- </div> -->
    </fieldset>
</div>

Answer 1

你可以做这样的事情

<script type="text/javascript" >
     var data = <?php echo json_encode( $array ); ?>;
</script>

json 数据将如下所示

  [["Raffle","Pick of Live","",100,150,"Cocktail Only", "Struggled a bit, offered some from the stage to hit the minimum"], .... ]

只要其中没有行返回，这将/应该是一个有效的 Javascript 数组。如果您从数据库 json_encode(false) 而不是实际的数组中提取它，您将需要确保您的 json 编码不是类似 false 的内容。

因此，如果您将其插入页面中，您基本上会得到类似这样的内容。

<script type="text/javascript" >
     var data = [["Raffle","Pick of Live","",100,150,"Cocktail Only", "Struggled a bit, offered some from the stage to hit the minimum"], .... ];
</script>

我不确定这是否是您想要的，您也可以使用这样的数据属性将其添加到表中

   <td class="data_row" data-array="<?php echo implode(',', $array[0]); ?>" >

然后您可以通过选择该 td、提取数据并使用 split 来获取它。

 var rowData = $('td.data_row').data('array').split(',');

Implode 会将其变成逗号分隔的列表，而 split 类似于 PHP 的 Explode，将其重新转换为数组。虽然，我不太确定是否可以将数组直接放入数据属性中(尽管我对此表示怀疑)并避免这样做。

如果你也想要这些键，那就有点困难了，因为在 JS 中它们将是对象，但在这种情况下你需要将它们从数据库中取出或者先有什么。 (关联数组VS JS对象)

或者使用您拥有的结构，您可以使用 jQuery 执行类似的操作，

$('tr.row').click( function(event) {
      var rowData = [];
     $(this).find('td').each( function(i,v){
          rowData.push($(this).text());
     });

     //do somthing with rowData
 });

这基本上是找到单击该行(添加了一类行以使其更容易)，然后找到所有子 td，然后循环并将其中的文本添加到数组中。