README

Yii2小部件 - 具有列和可拖拽项目的列表

小部件属性

• $items 数组；
• $labelFrom 字符串
• $labelTo 字符串
• $itemAttributeId 字符串
• $itemOptions 数组；
• $viewItem null|string|closure
• $viewParams 数组；
• $searchFilter 布尔值
• $selectHint 布尔值
• $searchFilterOptions 数组
• $templateItem 字符串

示例用法

数据模型用法

<?php 
    use kak\widgets\itemselect\ItemSelect;
    $countries = Country::find()->where(['status' => Country::STATUS_ACTIVE ])->all();
?>
...
<?=$form->field($model, 'geo_list')->widget(ItemSelect::class,[
    'itemAttributeId' => 'id',
    'items' => $countries,
    'templateItem' => '<div><img src="{%=o.flag_url%}">{%=o.name%}</div>'
]);?>

数据数组 + 事件用法

<?=ItemSelect::widget([
    'itemAttributeId' => 'id',
    'name' => 'ItemSelect[]',  // input name
    'value' => [3,5,7],        // select items by itemAttributeId
    'items' => [
        ['id' => 1 , 'name' => 'Foo1', 'flag_url' => '' ],
        ['id' => 2 , 'name' => 'Foo2', 'flag_url' => '' ],
        ['id' => 3 , 'name' => 'Foo3', 'flag_url' => '' ],
        ['id' => 4,  'name' => 'Foo4', 'flag_url' => '' ],
        ['id' => 5 , 'name' => 'Foo5', 'flag_url' => '' ],
        ['id' => 6 , 'name' => 'Foo6', 'flag_url' => '' ],
    ],
    'templateItem' => '<div><img src="{%=o.flag_url%}">{%=o.name%}</div>',
     'events' => [
        ItemSelect::EVENT_SELECT_ITEM => new yii\web\JsExpression("function(item, direction){
            $(item.target).css('background', 'lawngreen');
            console.log($(item.target).text(), direction);
        }"),
        ItemSelect::EVENT_UNSELECT_ITEM => new yii\web\JsExpression("function(item, direction){
            $(item.target).css('background', '');
            console.log($(item.target).text(), direction);
        }"),
        ItemSelect::EVENT_MOVE_ITEM => new yii\web\JsExpression("function(item, direction){
            console.log($(item.target).text(), direction);
        }"),
    ],
   
]);?>

项目视图用法

<?=ItemSelect::widget([
    'itemAttributeId' => 'id',
    'name' => 'ItemSelect[]',
    'value' => [3,5,7],        // select items by itemAttributeId
    'items' => [
        ['id' => 1 , 'name' => 'Foo1', 'flag_url' => '' ],
        ['id' => 2 , 'name' => 'Foo2', 'flag_url' => '' ],
        ['id' => 3 , 'name' => 'Foo3', 'flag_url' => '' ],
        ['id' => 4,  'name' => 'Foo4', 'flag_url' => '' ],
        ['id' => 5 , 'name' => 'Foo5', 'flag_url' => '' ],
        ['id' => 6 , 'name' => 'Foo6', 'flag_url' => '' ],
    ],
    'viewItem' => '/controller-name/_item-select'
]);?>

项目视图函数用法

<?=ItemSelect::widget([
    'itemAttributeId' => 'id',
    'name' => 'ItemSelect[]',
    'value' => [ 1,2,3,4,5],        // select items by itemAttributeId
    'items' => [
        ['id' => 1 , 'name' => 'Foo1', 'flag_url' => '' ],
        ['id' => 2 , 'name' => 'Foo2', 'flag_url' => '' ],
        ['id' => 3 , 'name' => 'Foo3', 'flag_url' => '' ],
        ['id' => 4,  'name' => 'Foo4', 'flag_url' => '' ],
        ['id' => 5 , 'name' => 'Foo5', 'flag_url' => '' ],
        ['id' => 6 , 'name' => 'Foo6', 'flag_url' => '' ],
    ],
    'itemView' => function($item, $index, $select, $widget){
        return sprintf(
            '<div><img src="%s">%s</div>', 
            $item['flag_url'], 
            $item['name']
        );
    }
]);?>

从ActiveForm用法

<?php
    use app\models\Service;
    use yii\helpers\ArrayHelper;
    
    $servics = Service::find()->where(['status' => Service::STATUS_ACTIVE ])->all();
?>
...
<?=$form->field($model, 'subject_ids')->widget(ItemSelect::class, [
    'itemAttributeId' => 'id',
    'items' => $servics,
    'viewItem' => function($item, $index, $select, $widget){
 
        $positionId = ArrayHelper::getValue($item, 'id', '');
        $positionValue = $select ? ArrayHelper::getValue($item, 'position', 0) : 0;
        $serviceName = ArrayHelper::getValue($item, 'name');
        
        $selectName = sprintf(
            '%s[%s]',
             basename(get_class($item)), 
             $positionId 
        );
        $selectItems = [
             '1' => 'head',
             '2' => 'center',
             '3' => 'footer',
        ];
        $selectWidget = Html::dropDownList($selectName, $positionValue, $selectItems);
        
        return sprintf(
            '<div class="row">
                <div class="col-xs-6">%s</div>
                <div class="col-xs-6">%s</div>
            </div>',
             $serviceName, 
             $selectWidget
        );
    }
]);?>

示例模板文件