Select와 같은 Form 양식 요소의 사용 소개

Select와 같은 Form 양식 요소의 경우 일부 기능을 사용할 때 사용할 수 없습니다.

예를 들어 select와 함께 제공되는 검색 기능은 다음과 같습니다.

실제로 Form 양식 요소를 사용할 때, 자동으로 실행하려면layui가 필요합니다. 일부 기능(검색, 확인 등)의 경우

태그를 사용하고, 렌더링이 적용되도록 양식 개체를 초기화해야 합니다. 마찬가지로 탭은 요소 객체를 초기화해야 합니다

//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.config({
    base: '/Resources/Script/'
})
.use(['element', 'common', 'form'], function () {
    var element = layui.element;//tab选项卡类的功能才能实现
    var form = layui.form;//部分表单元素功能才能实现
});

취소 버튼의 자동 제출 이벤트에 대해

layui는 버튼 유형이 제출인지 여부에 관계없이 버튼을 사용할 때 자동으로 양식을 제출합니다.

해결 방법:

1. 태그 안에만 넣어주시면 자동으로 제출됩니다.

2. 버튼 클릭 이벤트의 반환 값은 반드시 false를 반환해야 합니다. 양식 제출도 구성할 수 있습니다.

여기에는 작은 세부 사항, 즉 양식 양식으로 묶인 양식 요소가 있습니다. Jquery의 Seriliaze 메서드를 사용하여 양식 결과 집합을 빠르게 캡슐화할 수 있습니다. (저는 JSON 개체를 캡슐화합니다.)

var formData = $("#infoForm").serializeArray();
           var data = {};
           $.each(formData, function (index, item) {
               data[item.name] = item.value;
           });

또는 key=value&key1 =value2 string (Serialize() 사용)

하지만 여기서layui 양식의 선택 옵션을 얻으면 원래 선택 항목이 숨겨지고 선택 항목이 다시 렌더링됩니다. 이때는 위의 방법을 통해 얻을 수 없습니다. 메소드 선택의 값은 여전히 ​​$().value입니다. 기본 옵션의 옵션에는 value=''가 지정되어야 합니다. 그렇지 않으면 값이 렌더링될 때 text() 값이 기본적으로 복사됩니다.

laydate의 기본값 초기화:

isInitValue를 켜주세요. 개인적으로 문서가 정확하게 작성되지 않은 것 같고 이렇게 구성하는 것은 쓸모가 없다고 느낍니다. 어쨌든 기본값을 초기화하기 전에 isInitValue를 명시적으로 지정해야 합니다.

DataTable 데이터 테이블의 비동기 로딩 매개변수 정보:

요청에 대해layui 요청 시 매개변수에는 기본적으로 pageIndex 및 pageSize가 포함됩니다. 요청 매개변수를 통해 자체 pageIndex 및 pageSize 이름을 구성할 수 있습니다. . 추가 요청 매개변수는 where에 캡슐화되어야 하며, 마지막으로layui는 이를 함께 모아 백그라운드로 보냅니다.

응답의 매개변수 구성과 관련하여 선을 그릴 때 4가지 항목을 지적해야 합니다. 백그라운드에서 다른 매개변수를 자연스럽게 전송하고 완료되면 가져올 수 있습니다.

도 및 도시 연결 정보(제어 수준에서 로컬 렌더링)

layui에는 양방향 바인딩 개념이 없기 때문에 여기서 수행하는 작업은 매번 데이터를 다시 얻은 다음 렌더링하고 새로 고치는 것뿐입니다. 통제. 따라서 일반적으로 채택되는 것은 양식 청취 이벤트 + 양식 부분 렌더링입니다. -form 및lay-filter 속성) 선택 항목을 묶은 다음 form.select('select', select: 필터 속성 값을 포함하는 div)를 수행하여 모든 양식 선택 항목을 새로 고칠 필요는 없지만 특정 선택이 가능하지만 이벤트 모니터링은 제어 수준에서 수행될 수 있습니다(즉, 레이 필터가 제어에 표시됨).

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出发站:</label>
                            <div class="layui-input-inline">
                                <select id="selLocation" name="selLocation" class="text_input" lay-filter="selLocation" lay-verify="" lay-search></select>
                            </div>
                        </div>

form.on("select(selLine)", function (data) {
                       var template1 = "<option value=&#39;&#39;>全部选项</option>";
                       for (var index in result.Data) {
                           if (result.Data[index].LineId == data.value) {
                               template1 += "<option value=&#39;" + result.Data[index].TimesId + "&#39;>" + result.Data[index].TimesName + "</option>";
                           }
                       }
                       $("#selTimes").html(template1);
                       form.render(&#39;select&#39;,&#39;selLlocation&#39;);
                   })

데이터 목록의 자체 증가 열 구현(2가지 유형)

1. 템플릿 엔진 사용

模板：
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col参数：
cols: [[
            { title: &#39;序号&#39;, templet: &#39;#indexTpl&#39;, width: "6%" }
]]

2. col의 매개변수 유형:숫자 사용(이 매개변수는layui2.2.0에 새로 추가되었습니다. )

cols: [[
            { title: '序号', type:'numbers', width: "6%" }
]]

두 번째 방법을 추천합니다. 두 번째 방법은 페이징을 사용하여 정렬하는 것입니다. 두 번째 페이지는 이전 페이지에서 증가하는 인덱스이며 정렬 중에 일련 번호가 변경되지 않습니다.

마지막으로 백엔드 직원이 프런트엔드 코드를 페이지에 살짝만 보이도록 작성하는 방법을 제안하고 싶습니다(우리 대부분은 폼입니다)

제 제안은 다음과 같습니다.

1. 그리드 우선 이해하기 그리드 레이아웃은 기본적으로 사용하기 쉬운 프레임워크 모두에 레이아웃이 있습니다.

2. 크롬을 통해 요소 스타일을 수정한 다음 수정된 스타일을 직접 CSS로 캡슐화합니다.

3. 컴포넌트를 사용할 때 구조에 주의하고 원래 구조를 파괴하지 마세요. 쉽게 실패합니다.

4 데모는 여전히 큰 영향을 미치기 때문에 데모를 완전히 복사하지 마세요. 즉, 요소가 이전에 중첩되어 있으므로 규칙을 명확하게 읽으세요. 백엔드 직원의 경우 이러한 몇 가지 사항을 아는 것만으로도 거의 충분하며 이미 대부분의 애플리케이션을 처리할 수 있습니다.

layui에 대한 더 많은 지식은 layui 사용법 튜토리얼 컬럼을 주목해주세요.

위 내용은 Select와 같은 Form 양식 요소의 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!