LayUI заполняет яму: раскрывающийся список повторяет данные

JavaScript
LayUI заполняет яму: раскрывающийся список повторяет данные

Коллега столкнулся с проблемой эха данных в среднем выпадающем окне LayUI, запишите сюда, и решение эха данных:

  • Установите выбранный атрибут, сравнив его с механизмом шаблонов.
  • Установите значение тега select через JavaScript и установите эхо

В этом случае для эха используется шаблон Thymeleaf под полем Laui, а результаты динамически генерируемой HTML-страницы:

<div class="layui-form-item">
    <label class="layui-form-label"><span class="color-red">* </span>发送对象：</label>
    <div class="layui-input-inline">
        <select id="bookList">
            <option value="">请选择</option>
            <option value="1">西游记</option>
            <option value="2">红楼梦</option>
            <option value="3">水浒传</option>
            <option value="4">三国演义</option>
        </select>
    </div>
</div>

1. Метод этикетки

//控制器传递的数据代码
model.addAttribute("bookId",3);
model.addAttribute("bookList",bookList);

(1) Радиоэхо раскрывающегося списка

<div class="layui-form-item">
    <label class="layui-form-label"><span class="color-red">* </span>发送对象：</label>
    <div class="layui-input-inline">
        <select id="bookList">
            <option value="">请选择书籍</option>
            <option th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}"
            th:selected="${book['id'] eq bookId}"
            ></option>
        </select>
    </div>
</div>

(2) Радио Эхо радиопередачи

<input type="radio" name="bookRadio" th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}" th:checked="${book['id'] eq bookId}">

(3) Multi-Выберите флажок ECHO (расширенный)

model.addAttribute("arr",new int[]{2,3});

<input type="checkbox" name="bookCheckBox" th:each="book:${bookList}" th:text="${bookList['name']}" th:value="${bookList['id']}" th:checked="${#arrays.contains(arr,hobby['id'])}">

Вышеуказанные способы: все управляются через встроенную метку

2. Способ JavaScript

Когда я не сталкивался с LayUI, я легко могу его получить, код выглядит следующим образом:

<select id="bookList">
    <option value="">请选择爱好</option>
    <option th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}"></option>
</select>
<script>
    let bookId = '[[${bookId}]]';
    document.getElementById("bookList").value=bookId;
</script>

Примечание. Когда представлен LayUI, описанный выше метод настройки эха через JavaScript == недействителен ==, потому что структура после рендеринга с LayUI выглядит следующим образом

渲染结果

Яма или нет? Благодаря анализу кода мы также знаем, почему данные не могут быть отображены, верно? Выбираемые элементы для выбора здесь получаются из фоновых данных через jquery, и какой из них выбрать, нужно определить в соответствии с динамическим результатом. Проанализируйте структуру результата рендеринга и получите дерево dom следующим образом:

1740128-20200103203305772-504466812.png

Обнаружено, что в дополнение к элементу select в разделе «layui-input-inline» есть элемент «layui-form-select». Div содержит два дочерних элемента, layui-select-title и dl.Событие выбора select можно реализовать, щелкнув определенный элемент dd под dl.

let bookId = '[[${bookId}]]';
if(bookId!=''){
    //首先需要使用lay-value来确定需要设置哪个元素自动选择
    var select = 'dd[lay-value=' + bookId + ']';
    //触发点击事件，实现自动选择
    $('#bookList).siblings("div.layui-form-select").find('dl').find(select).click();
}
//已测试成功

Лично мне кажется, что это можно записать так:

let bookId = '[[${bookId}]]';
$("#bookList").val($(bookId);//atype是select的id
form.render('select');

Примечание: необходимо добавить form.render, в противном случае он не будет нормально отображаться.Динамически установите настройку выбора для Laui, чтобы завершить выбор.

var bookId=$("#bookId").val();//假设获取隐藏域中的值
//根据值让option选中 
$("#bookList option[value='"+bookId+"']").attr("selected","selected"); 
//这个没有测试，明天我会自己测试，是否重新渲染？测试完毕，需要渲染
form.render('select');

Вопрос: Как обрабатывается рендеринг нескольких вкладок? Справочная документация: Флажки

var bookId = $("select[name='bookList']").val();//获取选中的值
Категории