[Yii2 Widget]sortinput的简单使用

sortinput是yii2排序的扩展, 主要是一个工具，允许你创建可排序的列表和网格和操纵它们使用简单的拖放。

它是基于轻量级html5sortable jQuery插件，它使用HTML5的API拖放.

排序控件允许您配置以下属性：

• type: 字符串的排序控件类型。默认分类：：type_list或list。
  1. 拥有类别: type_gird或gird(网格形式), type_list或list(列表形式)
• items: 渲染元素在排序列表/网格排序的项目配置阵列。您可以设置以下属性：
  1. content: 字符串，列表项的内容（这不是HTML编码)。
  2. disabled: 布尔, 列表项目是否被禁用。被禁用后不可拖动.
• options: 数组, 主要用于排序的控件容器阵列的HTML属性。
• pluginevents(value): 阵列引导插件事件排序

sortable会将排列好的顺序放到一个隐藏框中, 并作为隐藏框的值, 其形式是一个字符串用',' 分隔.

简单Demo代码:

<?php

use kartik\sortinput\SortableInput;

use yii\web\JsExpression;

$listID = 'sort-list';

$itemIconHtml = '<i class="glyphicon glyphicon-cog"></i>';

$sortableInput = SortableInput::begin([

    'id' => $listID, // 隐藏框id

    'name'=> 'sort_list', // 隐藏框name

    'value'=>'3,4,2,1,5', // 队列顺序

    'items' => [ // 显示内容

        1 => ['content' => $itemIconHtml . ' Item # 1'],

        2 => ['content' => $itemIconHtml . ' Item # 2'],

        3 => ['content' => $itemIconHtml . ' Item # 3'],

        4 => ['content' => $itemIconHtml . ' Item # 4'],

        5 => ['content' => $itemIconHtml . ' Item # 5', 'disabled'=>true]

    ],

'sortableOptions' => ['type'=>'grid'], // 控制显示类型 grid: 网格形式, list: 列表形式(默认)

    'hideInput' => false, // 显示顺序是否隐藏 false: 不隐藏, true: 隐藏

    'options' => ['class'=>'form-control', 'readonly'=>true]

]);

$sortableInput->end();

$sortableConfigKey = $sortableInput->options['data-krajee-sortableInput'];

$jsScript = <<<EOF

var num = 100;

$(function() {

    $('#add_item').click(function(event) {

        var list = $('#$listID-sortable'),

            input = $('input[name="sort_list"'),

            value = input.val();

        $('<li data-key="' + num + '">$itemIconHtml Item # ' + num + '</li>').appendTo(list);

        list.sortable($sortableConfigKey);

        value += value ? ',' + num : num;

        input.val(value);

        num++;

    });

});

EOF;

$this->registerJs(new JsExpression($jsScript));

?>

<button id="add_item" type="button">ADD ITEM</button>