使用列表字段（高级字段）的重力表单如何在 delete_list_item 上显示确认消息

Question

我在我的网站上使用重力形式。使用列表字段（高级字段）如何在 delete_list_item 上显示确认消息

Answer 1

在 custom.js（文件）中 GFORM 添加列表：gformAddListItem_new

function gformAddListItem_new(element, max) {
    if (jQuery(element).hasClass("gfield_icon_disabled"))
        return;
    var tr = jQuery(element).closest('tr');
    var clone = tr.clone();
    var tabindex = clone.find(":input:last").attr("tabindex");
    clone.find("input, select, textarea").attr("tabindex", tabindex).not(":checkbox, :radio").val("");
    clone.find(":checkbox, :radio").prop("checked", false);
    clone = gform.applyFilters('gform_list_item_pre_add', clone);
    tr.after(clone);
    gformToggleIcons(tr.parent(), max);
    gformAdjustClasses(tr.parent());
}
function gformDeleteListItem_new(element, max) {
    jQuery(".dialog-confirm").html("Are you sure you want to delete this message?");
    // Define the Dialog and its properties.
    jQuery(".dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 150,
        width: 400,
        dialogClass: 'no-close success-dialog',
        open: function () {
            $(this).closest(".ui-dialog")
                    .find(".ui-dialog-titlebar-close")
                    .removeClass("ui-dialog-titlebar-close")
                    .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
        },
        buttons: {
            "Yes": function () {
                jQuery(this).dialog('close');
                var tr = jQuery(element).parent().parent();
                var parent = tr.parent();
                tr.remove();
                gformToggleIcons(parent, max);
                gformAdjustClasses(parent);
//                console.log("delete list");
            },
            "No": function () {
                jQuery(this).dialog('close');
            }
        }
    });
}

添加一些 CSS

.gform_wrapper table.gfield_list  .gfield_list_row_odd, .gform_wrapper table.gfield_list  .gfield_list_row_even{      padding: 0 0 15px;    display: block;}
.ui-dialog.success-dialog .ui-dialog-titlebar{ color:#fff; background: #bed13a !important}
.ui-dialog.success-dialog button{ float: right}
.ui-dialog.success-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{  
    cursor: pointer;
    background-color: #f7931e ;
    padding: 6px 18px ;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: none;
    text-align: center;

}
.ui-dialog.success-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    background: url("assets/images/close_dialog.png") 50% 50% repeat-x transparent;
    width: 16px;
    height: 16px;
    border: none;
}
.ui-dialog.success-dialog .ui-dialog-titlebar button {
    background: url("assets/images/close_dialog.png") 50% 50% repeat-x transparent;
    width: 16px;
    height: 16px;
    border: none;
}