Question

我有一个表单，用户可以使用jquery和CakePHP元素动态添加其他行，以从单个表单创建多个记录。

每行的第一个字段是选择控件。选择控件具有“ selectpicker”类和属性，以使选择选项可搜索。这基于引导程序和“ bootstrap-select”插件的实现而工作，这两个插件（js和css）都加载在我的default.cpt布局中。效果很好。

select控件的代码如下：

    <?= $this->Form->control("fruits.0.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, 'id' => 'fruit'.0, 'class'=>'selectpicker', 'data-live-search' => 'true']); ?>

在\src\Template\Element中，我使用此表单行创建了Element Fruits.ctp。我可以直接调用此元素以添加另一行，并且效果很好：

但是，我希望用户能够根据需要动态添加表单行。为此，我实现了以下内容：

表脚有一个添加行的链接。

                <tr>
                    <td></td>
                    <td></td>
                    <td class="actions">
                        <a href="#" class="add">Add Fruit</a>
                    </td>
                </tr>

该字段集之后就是这个脚本：

    <script id="fruit-template" type="text/x-underscore-template">
        <?php echo $this->element('fruits');?>
    </script>

表单页面的末尾是以下脚本：

<script>
$(document).ready(function() {

    var
        fruitTable = $('#fruit-table'),
        fruitBody = fruitTable.find('tbody'),
        fruitTemplate = _.template($('#fruit-template').remove().text()),
        numberRows = fruitTable.find('tbody > tr').length;

    fruitTable
        //ADD AN ENTRY LINE    
        .on('click', 'a.add', function(e) {

        e.preventDefault();

            $(fruitTemplate({key: numberRows++}))
                .hide()
                .appendTo(fruitBody)
                .fadeIn('fast');
        })

        //REMOVE A ENTRY LINE
        .on('click', 'a.remove', function(e) {

        e.preventDefault();

        $(this)
                .closest('tr')
                .fadeOut('fast', function() {
            });    
        });
    if (numberRows === 0) {
        fruitTable.find('a.add').click();
        }
    });
</script>

使用像这样的元素模板（Fruits.ctp），此设置可以很好地工作：

<?php
$key = isset($key) ? $key : '<%= key %>';
?>

<tr>
    <td>
    <?= $this->Form->control("fruits.{$key}.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, "id" => "fruit{$key}", 'data-live-search' => 'true']); ?>
    </td>
    <td>
        <?= $this->Form->control("fruits.{$key}.quantity", ['label'=>false]); ?>
    </td>       

    <td class="actions">
        <?php
        if($key == 0) { echo '<a href="#" class="remove">Remove Fruit</a>'; }
        ?>

    </td>
</tr>

请注意，在模板中，我没有在选择控件上定义'class'=>'selectpicker'。这样可以正常工作，并产生带有“标准”选择控件的表单行（无引导程序选择器格式和功能）：

如果在模板中，我将选择控件类设置为selectpicker：

<?= $this->Form->control("fruits.{$key}.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, "id" => "fruit{$key}", 'class'=>'selectpicker', data-live-search' => 'true']); ?>

然后添加该行，但是选择控件消失：

如果我检查了选择控件应位于的空表单元格中的元素，则可以在其中看到该控件，但是它是不可见的，并且不具有引导程序选择器通常具有的所有包含div。

所以我的问题是，即使页面已经加载并且元素“内联”了，我如何调用bootstrap-select（和其他bootstrap）js和css，以便将其应用于新元素。？

在此先感谢您提供任何建议或指导。 D。

Answer 1

事实证明，解决方案比我想象的简单得多。

在我的脚本中使用select控件添加新元素时，我可以在点击链接中通过以下方式调用bootstrap-select：

        $('select').selectpicker({
        liveSearch: true
        });

就是这样。

它仍然不能真正回答我的问题，但是在此情况下的问题现在已经解决。我将重新整理问题，并在需要时用jquery标签发布。

如何在动态添加的CakePHP元素中包括默认的js和CSS脚本？

1 个答案: