通过js动态添加gridview行中的CJuiAutocomplete

时间:2015-03-17 11:37:04

标签: php jquery gridview yii autocomplete

您好我正在尝试为我的项目创建自定义小部件。小部件包括程序名称和程序类型。对于字段类型,我使用了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));
                                    }",
                            ),
                    ),
            ),
    ),
 ));

现在有一个添加按钮,动态添加新行(名称字段, 键入' autocomplete'在CGridView中删除按钮)。我的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动态添加新行时,&#34;字段&#34;不显示自动完成功能。

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

1 个答案:

答案 0 :(得分:0)

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

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