Question

鉴于以下情况，当我点击我的命令按钮时，它也会触发selected.rs。

理想情况下，我想避免行选择，但如果点击第一列中的值，则具有相同的功能

$( document ).ready(function() {
var grid = $("#my_grid").bootgrid({
ajax: true,
rowSelect: true,
selection: true,
multiSelect: false,
keepSelection: true,
post: function () {
    return {
        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
    };
},
url: "response.php",
formatters: {
    "commands": function(column, row) {
        if (row.active == "t") {
            var buttonToggle = "<button type=\"button\" class=\"btn btn-xs btn-default command-disable\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-remove-circle\"></span> Disable Zone</button>";
        } else {
            var buttonToggle = "<button type=\"button\" class=\"btn btn-xs btn-default command-enable\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-ok-circle\"></span> Enable Zone</button>";
        }

        return "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span> Delete</button> " + buttonToggle;
    },
    "status": function(column, row) {
        if (row.active == "t") {
            return "Active";
        } else {
            return "Inactive";
        }
    },
    "link": function(column, row) {
        return "<a href=\"#\">Edit: " + row.id + "</a>";
    },
},
templates: {
    header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\"><div class=\"col-sm-12 actionBar\"><div class=\"{{css.search}} pull-left\"></div><div class=\"{{css.actions}}\"></div></div></div></div>"
},
labels: {
    infos: "Showing {{ctx.start}} to {{ctx.end}} of {{ctx.total}} zones"
}
}).on("loaded.rs.jquery.bootgrid", function() {
grid.find(".command-delete").on("click", function(e) {
    var conf = confirm('Delete Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'delete'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Removed');
    }
}).end();
grid.find(".command-disable").on("click", function(e) {
    var conf = confirm('Disable Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'disable'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Disabled');
    }
}).end();
grid.find(".command-enable").on("click", function(e) {
    var conf = confirm('Enable Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'enable'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Enabled');
    }
}).end();
}).on("selected.rs.jquery.bootgrid", function(e, rows) {
alert("Select: " + rows[0].id);
});

Answer 1

您需要停止每个click处理程序中的事件传播：

.on("loaded.rs.jquery.bootgrid", function() {
grid.find(".command-delete").on("click", function(e) {

    // stop the event propagation, so the selection won't be triggered
    e.preventDefault();
    e.stopPropagation();

    var conf = confirm('Delete Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'delete'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Removed');
    }
}).end();
grid.find(".command-disable").on("click", function(e) {

    // stop the event propagation, so the selection won't be triggered
    e.preventDefault();
    e.stopPropagation();

    var conf = confirm('Disable Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'disable'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Disabled');
    }
}).end();
grid.find(".command-enable").on("click", function(e) {

    // stop the event propagation, so the selection won't be triggered
    e.preventDefault();
    e.stopPropagation();

    var conf = confirm('Enable Zone ID: ' + $(this).data("row-id") + ' ?');

    if(conf) {
        $.post('response.php', { id: $(this).data("row-id"), action:'enable'}
            , function(){
                $("#my_grid").bootgrid('reload');
        }); 
    } else {
        alert('Zone ID: ' + $(this).data("row-id") + ' Not Enabled');
    }
}).end();
})

命令按钮触发行选择

1 个答案: