OSCHINA-MIRROR/meystack-layui-form-design

layui表单设计器

Введение

При поддержке своего открытого проекта swiftadmin возникла необходимость в создании формы на основе layui. Существующие открытые проекты не вполне соответствовали моим потребностям, поэтому я решил создать свой собственный инструмент для быстрого создания форм с использованием однократного ввода данных (CURD), настройки макета формы и поддержки удалённой загрузки JSON. Код получился лаконичным и понятным.

Этот инструмент полностью открыт для использования. Если его функциональность не соответствует вашим требованиям, вы можете внести изменения или отправить запрос на включение (PR).

Архитектура программного обеспечения

Это простой и удобный инструмент для создания форм, основанный на компоненте Sortable перетаскивания и библиотеке layui 2.7RC5. Он включает в себя множество полезных компонентов, таких как каскадный выбор (город), редактор форматированного текста и теги (оригинальная разработка), которые подходят для производственной среды. Инструмент легко освоить, если вы знакомы с библиотекой layui.

Использование

Инструмент использует компонент Sortable для перетаскивания элементов и интегрируется с модулями библиотеки layui. Для использования инструмента просто добавьте код HTML. Рекомендуется разделять код HTML и JavaScript, чтобы избежать путаницы и упростить обслуживание.

Конфигурация

  // По умолчанию
  Class.prototype.config = {
    id: null,
    data: [],         // Текущий набор элементов
    eval: '',         // Текущие данные HTML
    count: 0,         // Общее количество компонентов
    state: null,      // Текущий активный экземпляр
    index: [],        // Индекс компонентов
    itemIndex: {},    // Индекс дочерних компонентов
    master: undefined // Главный экземпляр перетаскиваемого элемента
  };

Добавьте необходимые компоненты в шаблон HTML и определите значение атрибута data-tag.

    <div class="component">
        <div class="head">Форма компонента</div>
        <div class="component-group" id="sort_1">
            <ol data-tag="input"><div class="icon"><i class="layui-icon layui-icon-layer"></i></div><div class="name">Однострочный ввод</div></ol>
            <ol data-tag="textarea"><div class="icon"><i class="layui-icon layui-icon-align-left"></i></div><div class="name">Многострочный ввод</div></ol>
            <ol data-tag="radio"><div class="icon"><i class="layui-icon layui-icon-radio"></i></div><div class="name">Радиокнопка</div></ol>
            <ol data-tag="checkbox"><div class="icon"><i class="layui-icon layui-icon-table"></i></div><div class="name">Флажок</div></ol>
            <ol data-tag="select"><div class="icon"><i class="layui-icon layui-icon-print"></i></div><div class="name">Выпадающий список</div></ol>
            <!-- // Необходимые компоненты можно добавить самостоятельно -->
            <!-- // И написать код рендеринга в соответствии с существующим процессом -->
        </div>
    </div>

После обычной загрузки модулей layui JS и CSS необходимо вручную загрузить сторонние модули JS на страницу.

<script src="/layui.js?v=v"></script>
<!-- // Глобальная загрузка сторонних JS -->
<script src="/cascadata.js"></script>
<script src="/tinymce/tinymce.min.js"></script>
<!-- // Загрузка иконок font-awesome -->
<link href="/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="/Sortable/Sortable.js?v=1.14"></script>

В файле formDesignJS напишите реализацию рендеринга необходимых компонентов и других функций, требующих дополнительной разработки. Затем вызовите функцию render на главной странице шаблона, чтобы завершить рендеринг компонентов.

  layui.use(['form','jquery','flow','formDesign'],function() {
    var form = layui.form;
    var $ = layui.jquery;

    var formDesign = layui.formDesign;
    // Загрузить
    formDesign.render({
        elem: '#formBuilder'
        ,eval: '#formdesign'
    });
  })
``` **Участие и вклад**

Добро пожаловать в форк этого репозитория! Если у вас есть хорошие идеи, вы можете отправить PR.

### Использование протокола

1. Это программное обеспечение поддерживает бесплатное использование для личных и корпоративных целей, вторичную разработку, но необходимо соблюдать открытый исходный код Apache2 и сохранять авторские права на код (логотип, материалы, комментарии к коду).

2. Нельзя использовать этот фреймворк для разработки программного обеспечения и приложений, которые нарушают государственную политику. В противном случае придётся нести юридическую ответственность!

3. Это программное обеспечение по закону имеет защиту авторских прав государства. Поэтому нельзя злонамеренно изменять исходный код, включая, помимо прочего, внедрение вирусов и написание незаконных приложений для злонамеренного распространения.

4. Нельзя злонамеренно модифицировать или перепродавать это программное обеспечение. Нельзя после вторичной упаковки заявлять, что это ваш собственный продукт и т. д. Пожалуйста, уважайте закон об авторских правах государства!

5. Пользователи обязуются принять и соблюдать условия настоящего соглашения. Если пользователь не согласен с условиями настоящего соглашения, он должен немедленно прекратить использование.

*Когда вы используете это программное обеспечение, по умолчанию считается, что вы соглашаетесь с вышеуказанными условиями.*