Question

我正在为yii2的学习写一个项目。我有一个问题在于查看manging小部件。

我的表格中有输入描述发票。其中一个输入与来自yii2 \ jui的DataPicker绑定，另一个输入与来自yii2 \ jui的AutoComplete绑定。所以基本上这个代码看起来像：

$contractors = app\models\Contractor::find()
->select('contractorId as id, contractorShortName as label, contractorShortName as value')
->asArray()
->all();
/.../

<tr>
    <td>
        <?= DatePicker::widget([
            'name' => 'costBillDate[]',
            'language' => 'pl', 
            'dateFormat' => 'yyyy-MM-dd'
        ]) ?>
    </td>
    <td><?= AutoComplete::widget(
            'clientOptions' =>[
            'source' => $contractors,
            'autofill' => 'true',
            'select' => new JsExpression("function( event, ui ) {
                        $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id);
                        }")
        ],]) ?>
        <?= Html::hiddenInput('contractorId[]', "", []) ?>
    </td>
//other inputs
    <td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td>
</tr>

上面的代码很简单，基本可行。因此，在表格下面，我添加了一个按钮，用于复制表格中的行以将更多文档信息插入数据库。对于每一行，我添加一个脚本来删除该行。

//Dynamically creation of a row
$this->registerJs('$("#add-bill").on("click",function(){'
    . '$("#costs-bills").append(\''
    . '<tr>'
    . Html::tag("td", DatePicker::widget([
        'name' => 'costBillDate[]',
        'language' => 'pl',
        'dateFormat' => 'yyyy-MM-dd'
     ]))
    . '<td>'
    . AutoComplete::widget([
        'clientOptions' =>[
            'source' => $contractors,
            'autofill' => 'true',
            'select' => new JsExpression("function( event, ui ) {
                $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id);
                }")
            ],])
            . Html::hiddenInput('contractorId[]', "", [])
            . '</td>'
            . '<td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td>'
            . '</tr>'
            . '\');'

             //binding function to created span
            . '$(".delete").on("click",function(){
            var $killrow = $(this).parent("tr");
            $killrow.addClass("danger");
            $killrow.fadeOut(2000, function(){
            $(this).remove();
            });})'
            . '})
');

//Binding delete function to span for static row
$this->registerJs('$(".delete").on("click",function(){
        var $killrow = $(this).parent("tr");
        $killrow.addClass("danger");
        $killrow.fadeOut(2000, function(){
        $(this).remove();
        });})
');

#add-bill是按钮的ID。

#costs-bills是表格的id，我有表格。

以上代码的效果： - 我可以在表格中添加行; - 我可以从表中删除选定的行。

问题：如果我使用动态创建的输入将行添加到表中，那么（动态创建的）行中的DataPicker和AutoComplete不起作用。它们的行为与普通的textInputs相同。

我不知道该怎么办。

Answer 1

问题解决了。正确的JS代码：

$this->registerJs('
    $("#add-bill").on("click", function(){
        $("#costs-bills").append(\'<tr>'
        . Html::tag("td", Html::textInput("costBillDate[]","", ['class' => 'dp']))
        . '<td>'
        . Html::textInput("", "", ['class' => 'ac'])
        . Html::hiddenInput("contractorId[]")
        . '</td>'
        . Html::tag("td", Html::tag("div", "", ['class' => 'glyphicon glyphicon-trash']) , ['class' => 'text-center delete'])
        . '</tr>\');
        $(".delete").on("click", function(){
            var $killrow = $(this).parent("tr");
            $killrow.addClass("danger");
            $killrow.fadeOut(2000, function(){
                $(this).remove();
            });
        });

        $("#costs-bills .dp").datepicker();
        $("#costs-bills .ac").autocomplete(
        {
            source:'
            . json_encode($contractors) . ',
            select: function(event, ui) {
                $($(this).parent().find(\'input[name="contractorId[]"]\')).val(ui.item.id);
            }
        });
    });

    $(".delete").on("click",function(){
        var $killrow = $(this).parent("tr");
        $killrow.addClass("danger");
        $killrow.fadeOut(2000, function(){
        $(this).remove();
        });
    })'
);

编辑：
上面的代码的一些exlanation。我猜测只能在yii2\jui事件之前调用所有(document).ready()小部件。如果在加载页面后调用窗口小部件，则JS控制台中的结果为ILLEGAL pointer。 yii2\jui基本上是标准jQuery小部件的包装器。

解决我的问题的方法是在#add-bill onClick event行的JS脚本中补充那些使用标准文本输入和一些calsses调用yii2\jui小部件的行（在dp上面的代码中输入DataPicker，{{ 1}}用于自动完成输入）。当一行输入成功添加到DOM时，我只需要使用jQuery的ac和datatpicker()方法绑定我的textInputs。

我不确定我的解释是否正确，但上面的代码可以正常工作。

亲切的问候，
卡米尔

在动态创建的字段上使用yii2 \ jui小部件

1 个答案: