Primefaces树带有复选框，单击行上的任何位置时避免选中/取消选中 [英] Primefaces Tree with checkbox, avoid check/uncheck when clicking anywhere on row

问题描述

Primefaces提供 http://www.primefaces.org/showcase/ui/treeSelectionCheckbox. jsf

Primefaces offers http://www.primefaces.org/showcase/ui/treeSelectionCheckbox.jsf

这是一个很好的选择，只是寻找行上的任何地方"行为不是我想要的.我还需要其他按钮和其他东西.

It's a good fit except the "click anywhere on row" behavior is not what I am looking for. I need other buttons and stuff on the row.

推荐答案

您需要为treeTable覆盖Primefaces Javascript.在页面上放置以下内容应禁用Primefaces 3.5的此功能:

You need to override the Primefaces Javascript for treeTable. Placing the following on on your page should disable this functionality for Primefaces 3.5:

PrimeFaces.widget.TreeTable.prototype.bindSelectionEvents = function() {
    var $this = this,
    rowSelector = this.jqId + ' .ui-treetable-data tr.ui-treetable-selectable-node';

    $(document).off('mouseover.treeTable mouseout.treeTable click.treeTable', rowSelector)
                .on('mouseover.treeTable', rowSelector, null, function(e) {
                    var element = $(this);
                    if(!element.hasClass('ui-state-highlight')) {
                        element.addClass('ui-state-hover');

                        if($this.isCheckboxSelection()) {
                            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').addClass('ui-state-hover');
                        }
                    }
                })
                .on('mouseout.treeTable', rowSelector, null, function(e) {
                    var element = $(this);
                    if(!element.hasClass('ui-state-highlight')) {
                        element.removeClass('ui-state-hover');

                        if($this.isCheckboxSelection()) {
                            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').removeClass('ui-state-hover');
                        }
                    }
                })
                .on('click.treeTable', rowSelector, null, function(e) {
                    // $this.onRowClick(e, $(this));  <-- commenting this out disables row selection
                    e.preventDefault();
                });

    if(this.isCheckboxSelection()) {
       var checkboxSelector = this.jqId + ' .ui-treetable-data tr.ui-treetable-selectable-node td:first-child div.ui-chkbox-box';
       $(document).off('click.treeTable', checkboxSelector)
                  .on('click.treeTable', checkboxSelector, null, function(e) {
                      var node = $(this).closest('tr.ui-treetable-selectable-node');
                      $this.toggleCheckboxNode(node);
                  });
    }
};

这将覆盖TreeTable的bindEvents()函数，并在您单击该行时禁用选择.确保您针对所使用的特定版本的Primeface覆盖了javascript.

This will override the bindEvents() function of the TreeTable and disable selection when you click the row. Make sure you're overriding the javascript for the specific version of primefaces you're using.

这篇关于Primefaces树带有复选框，单击行上的任何位置时避免选中/取消选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！