Laui erfasst Formulardaten

Hinweise:

1 Die Schaltfläche „Senden“ in Laui basiert auf dem „Listening“-Mechanismus.

2. Der Aufruf von form.on() muss in der Callback-Funktion vonlayui.use platziert werden.

3. Das „return false“ am Ende ist unbedingt erforderlich, um sicherzustellen, dass die Seitenaktualisierung nicht ausgelöst wird. Beachten Sie, dass es „return false“ sein muss, nicht einfach „return“.

Das Abrufen von Formulardaten kann in vier Schritten erfolgen:

1. Deaktivieren Sie die Schaltfläche. Um zu verhindern, dass Benutzer dauerhaft klicken, beachten Sie bitte, dass die Schaltfläche nach Abschluss (Complete) der Ajax-Anfrage erneut explizit aktiviert werden sollte.

2. Formulardaten integrieren. Oftmals müssen zusätzlich zu den Daten des formellen Formulars noch einige zusätzliche Daten angehängt werden.

3. Bestimmen Sie den Pfad. Manchmal kann dieselbe Schaltfläche mehrere Vorgänge ausdrücken, z. B. Hinzufügen oder Ändern.

4. Initiieren Sie eine Anfrage. Initiieren Sie eine Ajax-Anfrage, übergeben Sie Parameter an den Server und verarbeiten Sie den Rückgabewert in der Rückruffunktion.

5. Rückgabe falsch.

Wichtige Codeliste

1. HTML-Anweisung

<form class="layui-form">
    <input type="hidden" name="id" />
    <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button>
</form>

Wenn Sie nur auf Effekte (Klickereignisse) warten müssen, benötigen Sie nur eines davon die oben genannten Schaltflächen sowie Lay-Filter und Lay-Submit.
Wenn Sie die Werte von Formularelementen sammeln müssen, benötigen Sie auch Formular und seinen Stil Laui-Form.

2. js-Ereignisüberwachung

// 保存
form.on('submit(btnSave)', function (data) {
    console.info('开始保存');
 
    // * 按钮禁用
    var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
    if (isDisabled) {
        return false;
    }
 
    // * 整合表单数据
    var formData = data.field;
    $.extend(formData, { Id: $("#hiddenId").val() });
    console.info(formData);
 
    // * 确定路径
    var url = "";
    if (editMode == "add") {
        url = urlEnum.Add;
    } else if (editMode == "update") {
        url = urlEnum.Update;
    } else {
        alert('编辑模型不确定, add / update');
        return;
    }
 
    // * 发起请求
    $.ajax({
        data: formData,
        type: "POST",
        dataType: "JSON",
        url: url,
        beforeSend: function () {
            // 禁用
            $("#btnSave").addClass('layui-btn-disabled');
        },
        complete: function () {
            // 启用
            $("#btnSave").removeClass('layui-btn-disabled');
        },
        success: function (result) {
            console.info("保存数据成功，返回的数据为：↓ ");
            console.info(result);
 
            if (result.Status) {                            
                // 刷新列表
                parent.$("#mainGrid").bootstrapTable("selectPage", 1);
 
                // 确保在最后关闭窗体
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                // 提示失败
                layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
            }
        }
    }); // end ajax
 
    return false;
});

Für weitere Laui-bezogenes Wissen beachten Sie bitte Laui-Framework.

Das obige ist der detaillierte Inhalt vonLaui erfasst Formulardaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!