zoukankan      html  css  js  c++  java
  • 如何根据选项来动态的添加自己所需要的表单

    如何在项目中引入具体的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进行动态添加,这也是我在项目中学到的东西。

  • 相关阅读:
    设计模式系列
    Python3 系列之 可变参数和关键字参数
    设计模式系列
    【HANA系列】SAP HANA ODBC error due to mismatch of version
    【FICO系列】SAP FICO FS00修改科目为未清项目管理
    【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
    【HANA系列】SAP HANA SQL获取当前日期加若干天后的日期
    【HANA系列】SAP HANA SQL获取本周的周一
    【HANA系列】SAP HANA SQL获取当前日期
    【HANA系列】SAP HANA SQL获取当前日期最后一天
  • 原文地址:https://www.cnblogs.com/jourage/p/9946219.html
Copyright © 2011-2022 走看看