README

轻松管理项目列表，无需编写大量代码

安装

将库包含到 composer.json 中

composer require xanweb/c5-item-list

将服务提供者添加到 application/config/app.php

return [
    'providers' => [
        'xw_item_list' => '\Xanweb\ItemList\ServiceProvider'
    ],
];

或者从你的包中在 on_start 加载它

public function on_start()
{
    $this->app->make(\Concrete\Core\Foundation\Service\ProviderList::class)->registerProvider(\Xanweb\ItemList\ServiceProvider::class);
}

使用方法

1. 根据需要加载可选资源

   • 编辑器资源（$this->app['editor']->requireEditorAssets();），如果你需要使用富文本编辑器
   • 文件管理器资源组（core/file-manager），如果你将在列表中使用文件选择器
   • 网站地图资源组（core/sitemap），如果你将在列表中使用页面选择器
   • 颜色选择器资源组（core/colorpicker），如果你将在列表中使用颜色选择器

2. 加载必需的项目列表资源组（xw/item-list）

3. 设置项目列表 HTML 结构

<div id="myUniqueID">
    <!-- Place the `Add Item` Button -->
    <button class="btn btn-success xw-item-list__add-item"><?= t('Add Item') ?></button>

    <!-- Place your items wrapper -->
    <div class="xw-item-list__items"></div>
    
    <!-- You can add floating button if you are using it within block edit form -->
    <div class="floating-block-actions">
        <button class="btn btn-success xw-item-list__add-item"><?= t('Add Item') ?></button>
    </div>
</div>

1. 现在我们需要准备我们的 Underscore.js 项目模板

<script type="text/template" id="myItemTemplateID">
    
    <div class="xw-item-list__item well">
        <!-- Sort Handler Icon (Optional) -->
        <i class="btn btn-xs drag-handle fa fa-arrows"></i>

        <!-- An example of a collapsible item structure -->
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-12 text-right">
                    <div class="btn-group-sm">
                        <a href="javascript:void(0);" class="btn btn-default xw-item-list__edit-item xw-item-list__item-expander" data-target=".panel-body">
                            <?= t('Edit Item') ?>
                        </a>
                        <a href="javascript:void(0);" class="btn btn-danger xw-item-list__remove-item"><?= t('Remove') ?></a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="panel-body form-horizontal" style="display: none;">
            <div class="clearfix">
                <!-- Example of simple text field -->
                <div class="form-group">
                    <label class="control-label"><?= t('Title') ?></label>
                    <input type="text" class="form-control" name="<?= $view->field('title') ?>[]" value="<%-item.title%>" maxlength="255">
                </div>

                <!-- Example of RichText  editor field (The class `editor-content` is required to use RichText Editor) -->
                <div class="form-group">
                    <label class="control-label"><?= t('Description') ?></label>
                    <textarea class="editor-content" name="<?= $view->field('description') ?>[]" id="<%=_.uniqueId('desc')%>"><%=item.description%></textarea>
                </div>

                <!-- Example of File Selector field -->
                <div class="form-group">
                    <label class="control-label"><?= t('File') ?></label>
                    <div data-field=file-selector data-name="<?= $view->field('fID') ?>[]" data-value="<%=item.fID%>"></div>
                </div>

                <!-- Example of Color Picker field -->
                <div class="form-group">
                  <label class="control-label"><?= t('Title Color') ?></label>
                  <input class="ccm-widget-colorpicker" type="text" name="<?= $view->field('titleColor') ?>[]" value="<%-item.titleColor%>" id="ccm-colorpicker-<%=_.uniqueId('title-color')%>" />
                </div>

                <!-- Example of Link Type auto switcher -->
                <div style="min-height: 130px;">
                    <div class="form-group">
                        <label class="control-label"><?= t('Link Type') ?></label>
                        <!-- data-choice attribute is required to mark related choice group -->
                        <select name="<?= $view->field('linkType') ?>[]" class="form-control" data-choice="link-type">
                            <option value="0"<% if (item.linkType == 0) { print(' selected'); } %>><?= t('No link') ?></option>
                            <option value="1"<% if (item.linkType == 1) { print(' selected'); } %>><?= t('Another Page') ?></option>
                            <option value="2"<% if (item.linkType == 2) { print(' selected'); } %>><?= t('External URL') ?></option>
                        </select>
                    </div>

                    <div style="display: none;" class="form-group form-group-sm" data-choice-group="link-type" data-choice-value="1">
                        <label class="control-label"><?= t('Choose Page') ?></label>
                        <!-- Example of Page Selector Field -->
                        <div data-field="page-selector" data-name="<?= $view->field('internalLinkCID') ?>[]" data-value="<%=item.internalLinkCID%>"></div>
                    </div>

                    <div style="display: none;" class="form-group form-group-sm" data-choice-group="link-type" data-choice-value="2">
                        <label class="control-label"><?= t('URL') ?></label>
                        <input type="text" class="form-control" name="<?= $view->field('externalLink') ?>[]" value="<%-item.externalLink%>">
                    </div>
                </div>

                <!-- If you want to preserve sort order put a hidden field with class `xw-item-entry-sort` -->
                <input class="xw-item-entry-sort" type="hidden" name="<?= $view->field('sortOrder') ?>[]" value="<%=item.sortOrder%>"/>
            </div>
        </div>
    </div>
</script>

1. 最后，我们需要初始化项目列表脚本

<script>
    $(function(){
        $('#myUniqueID').xwItemList({
            templateId: "myItemTemplateID",
            items: <?= json_encode($rows) ?>,
        });
    });
</script>

许可证

Concrete5 项目列表是开源软件，许可协议为 MIT 许可协议。