• 如何根据选项来动态的添加自己所需要的表单


    如何在项目中引入具体的JS文件呢?他的格式应该是什么格式,以前我并不太懂,但是我现在会了。下面是具体的代码

    <script type="text/javascript" th:src="@{/assets/js/yun/order/baseOrder.js?v1}" src="../../static/assets/js/yun/order/baseOrder.js"></script>

    通过这种方式可以插入一个名字为baseorder.js的文件

    那如何在动态的插入自己所需要的表格呢?有些选项框是自己需要的,有些选项框又不是自己不需要的。我在项目中发现了这个实现的过程,所以也想把这个记录下来。下面的代码是JSP中的HTML代码。

                <div class="layui-inline">
                    <label for="payMethodType" class="layui-form-label" style=" 150px">
                        <span class="x-red">*</span>支付方式
                    </label>
                    <div class="layui-input-inline" style=" 300px">
                        <select id="payMethodType" name="payMethodType" lay-filter="payMethodType" lay-search="">
                        </select>
                    </div>
                </div>

    下面是通过JS的控制来实现的代码

    $(function () {
        var payModeMap;
        var BASE_CONTEXT_PATH = $('meta[name=context-path]').attr("content");
        layui.use(['form'], function () {
            var form = layui.form;
            $.get(BASE_CONTEXT_PATH + '/cache/payModeMap', {}, function (res) {
                payModeMap = res.data;
                for (var key in payModeMap) {
                    var html = '<option value="' + key + '" >' + payModeMap[key] + '</option>';
                    $("#payMethodType").append(html);
                    form.render();
                }
            });
            form.on('select(payMethodType)', function (data) {
                if ('SCAN_WEIXIN' === data.value) {
                    $("#payMethodMsg").empty();
                    var html = '<div class="layui-form-item">
    ' +
                        '            <div class="layui-inline">
    ' +
                        '                <label for="payType" class="layui-form-label" style=" 150px"><span class="x-red">*</span>支付方式</label>' +
                        '                <div class="layui-input-inline" style=" 300px">
    ' +
                        '<select name="payType" id="payType"><option value="W01">借、贷卡</option><option value="W02">非贷记卡</option></select>' +

                        ' <label for="authcode" class="layui-form-label" style=" 150px">' +
                       ' <span class="x-red">*</span>付款码</label> ' +
                      ' <div class="layui-input-inline" style=" 300px">' +
                       ' <input type="text" id="authcode" name="authcode" autocomplete="off" class="layui-input" required="" lay-verify="required"/> ' 

                        '                </div>
    ' +
                        '            </div>
    ' +
                        '        </div>';
                    $("#payMethodMsg").append(html);
                    form.render();

    通过append 函数的使用和html进行动态添加,这也是我在项目中学到的东西。

  • 相关阅读:
    几种跨平台解决方案:React Native、Kotlin、Flutter、Swift
    vue组件化
    flutter学习笔记(合集)
    sessionStorage获取用户行为
    什么是深度学习?
    javascript原生dom的那些事儿
    对象的创建
    初识requirejs
    使用vue-cli3快速构建项目
    python16_day40【数据结构】
  • 原文地址:https://www.cnblogs.com/jourage/p/9946219.html
Copyright © 2020-2023  润新知