通过js在gridview行动态添加CJuiAutocomplete

Question

您好，我正在尝试为我的项目创建自定义小部件。小部件包括程序名称和程序类型。对于字段类型，我使用了 CJuiAutoComplete。这是我的代码！

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $this->productArray,
    'id' => 'gridview_add_product',
    'columns' => array(
            array(
                    'header' => 'URL',
                    'value' => 'CHtml::textField("program[$data->id][url]",$data->url,
                    array(
                    \'id\'=>\'program_url_\'.$data->id,
                    ))',
            ),
            array(
                    'header' => 'Type',
                    'value'=>'Yii::app()->controller->widget("zii.widgets.jui.CJuiAutoComplete",array(
                            "name"=>"type",
                            "attribute"=>"resolution",
                            "source"=>array("A","B","C","D","E"),
                            "value"=>$data->type,
                            ),true)',
                    'type' => 'raw',
                    'headerHtmlOptions'=>array('style'=>'width: 100px'),
            ),
            array(
                    'class' => 'CButtonColumn',
                    'headerHtmlOptions'=>array('style'=>'width: 100px'),
                    'buttons' => array(
                            'linkToModel' => array(
                                    'label' => 'Remove',
                                    'click' => "function(){
                                    removeStreamRow($(this));
                                    }",
                            ),
                    ),
            ),
    ),
 ));

现在有添加按钮可以动态添加新行（名称字段，在 CGridView 中键入 'autocomplete' 并删除按钮）。我的js脚本如下。

var addProductRow = function(){
$('#gridview_product .empty').parent().remove();
$('#gridview_product tr:last').after('<tr class="odd"><td class="productData"><input id="product_url_'+ nextId + '" type="text" name="product['+ nextId +'][url]"></td><td><input name="type" id="product_'+ nextId + '_type" class = "ui-autocomplete-input" autocomplete = "off" type = "text" ><span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span></td><td class="button-column"><a class="linkToModel"title="Remove"href="#product_url_'+ nextId + '">Remove</a></td></tr>');nextId--;}

现在当我通过 js 动态添加新行时，"type" 的字段不显示自动完成功能。

如何在 CGridview 行中通过 js 添加 CJuiAutocomplete。请帮帮我。

Answer 1

在 gridview 中添加 html 块后，您需要将类型的输入字段与自动完成事件绑定，例如。

$( ".ui-autocomplete-input" ).autocomplete({
    source: function(request, response){
     //you source
    }
});

通过js在gridview行动态添加CJuiAutocomplete

Add CJuiAutocomplete in gridview row dymamically through js

php

jquery

gridview

autocomplete

yii