yii中关于select2的使用

来源：互联网发布：淘宝下单编辑：程序博客网时间：2024/05/18 03:41

yii中调用select2插件主要是使用在两个方面：

一、标签输入框

案例的代码：

<?php
            $this->widget('bootstrap.widgets.TbSelect2', array(
                'asDropDownList' => false,
                'name' => 'tags',        //若表单采用POST提交，此时就使用$_POST['tags']获取
                'value' => 'tags',        //设置默认值

'options' => array(
'tags' => array('yii','bootstrap') , //一维数组，在输入的时候会显示下拉的形式

                    'width' => '200px',
                    'tokenSeparators' => array(',', ' ')
                )
            ));
    ?>

显示的效果为：

详解：此时要设置asDropDownList 为false,value为默认选中的值，tags对应的是一个数组，例如：array("tags","代码")，若选择yii,

此时的效果图是：，若表单是采取POST方法提交，此时就通过$_POS['tags']获取标签数组值，获取的值为 tags,yii，其中","是通过设置tokenSeparators参数设置的。

二、下拉列表框

案例代码：

            <?php
            $this->widget('bootstrap.widgets.TbSelect2', array(
                'asDropDownList' => true,
                'name' => 'font_family',
                'data' => array(
                    '' => '默认字体',
                    '宋体' => '宋体',
                    '黑体' => '黑体',
                    '楷体' => '楷体',
                    '隶书' => '隶书',
                    '幼圆' => '幼圆',
                    'Arial' => 'Arial',
                    'Courier New' => 'Courier New',
                    'Fixedsys' => 'Fixedsys',
                    'Georgia' => 'Georgia',
                    'Tahoma' => 'Tahoma',
                    'Verdana' => 'Verdana',
                ),
                'value' => '宋体',
                'htmlOptions' => array(
                    'style' => 'width:140px;',
                ),
                'options' => array(
                    'minimumResultsForSearch' => -1,   //设置是否显示输入框
                    'formatResult' => 'js:function(state) {
                         return "<span style=\'font-family:"+state.id+"\'>"+state.text+"</span>";
                       }',
                    'formatSelection' => 'js:function(state){
                            return "<span style=\'font-family:"+state.id+"\'>"+state.text+"</span>";
                       }',
                    'escapeMarkup' => 'js: function(m) {
                               return m;
                       }',
                )
            ));
            ?>

显示的效果图为：

详解：此时要设置asDropDownList 为true,value为默认选中的值，data对应的是一个一维数组，设置options属性值，才能下拉框中显示相应的样式，具体的含义也不是很清楚。

相关资料来源: http://ivaynberg.github.io/select2/