在yii框架中将网格显示为自动完成

时间:2013-12-17 11:15:10

标签: jquery jquery-ui yii

我想在yii框架中将网格显示为自动完成。我已尝试使用combogrid http://combogrid.justmybit.com/default.php但未使用下载的文件。请帮忙。

我创建了一个扩展并扩展了CJuiInputWidget。所以代码是

class ComboGridWidget extends CJuiInputWidget
{

    public $source=array();
    public $sourceUrl;


    public function run()
    {
        list($name,$id)=$this->resolveNameID();

        if(isset($this->htmlOptions['id']))
            $id=$this->htmlOptions['id'];
        else
            $this->htmlOptions['id']=$id;
        if(isset($this->htmlOptions['name']))
            $name=$this->htmlOptions['name'];

        if($this->hasModel())
            echo CHtml::activeTextField($this->model,$this->attribute,$this->htmlOptions);
        else
            echo CHtml::textField($name,$this->value,$this->htmlOptions);

        if($this->sourceUrl!==null)
            $this->options['source']=CHtml::normalizeUrl($this->sourceUrl);
        else
            $this->options['source']=$this->source;


        $options=CJavaScript::encode($this->options);
        $this->registerScripts();
        Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"jQuery('#{$id}').combogrid($options);");
    }



    protected function registerScripts()
    {

        $asseturl=Yii::app()->getAssetManager()->publish(Yii::getPathofAlias('ext.combogrid.assets'));

        $cs = Yii::app()->clientScript;
        //$cs->registerScriptFile($asseturl.'/resources/jquery/jquery-1.9.1.min.js');
        $cs->registerScriptFile($asseturl.'/resources/jquery/jquery-ui-1.10.1.custom.min.js');
        $cs->registerScriptFile($asseturl.'/resources/plugin/jquery.ui.combogrid-1.6.3.js');

        $cs->registerCssFile($asseturl.'/resources/css/smoothness/jquery-ui-1.10.1.custom.css');
        $cs->registerCssFile($asseturl.'/resources/css/smoothness/jquery.ui.combogrid.css');
    }

}

在我正在使用的视图文件中

$this->widget('ext.combogrid.CombogridWidget',array(
    'name'=>'city1',
    'options'=>array(
        'minLength'=>'1',
         'url'=> 'server.php',
         'debug'=>true,
         'colModel'=> "[{'columnName':'id','width':'10','label':'id'}, {'columnName':'name','width':'60','label':'title'},{'columnName':'author','width':'30','label':'author'}]",
         'select'=> "function( event, ui ) {
            $( '#city1' ).val( ui.item.name );
            return false;
        }"  
    ),

));

我已经注释了jquery-1.9.1.min.js注册,因为Yii已经加载了一个jquery文件,在这种情况下我得到一个未定义值的列表。如果我使用这个jquery-1.9.1.min.js文件,那么我没有得到任何输出。它只显示加载图像。我已将server.php文件放在yii app目录中,这是yii的入口脚本所在的位置。另外我想知道如何将server.php放在扩展目录中并在jquery中使用它?

1 个答案:

答案 0 :(得分:0)

正如@Naveen指出的那样,如果没有更多细节,我们无法帮到你。

作为替代方案,您可以使用select2扩展名,并使用formatResults方法格式化接收为行的数据。

进一步阅读:

  1. http://ivaynberg.github.io/select2/