触发行选择的命令按钮

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(); 
})