当JXTreeTable遇到TristateCheckBox(一)

treetable、顾名思义—— 提供了tree + table 的功能，是现代用户界面中一个常用的组件 。JXTreeTable是第三方组件库SwingX项目中的一个组件，弥补了Swing标准库中没有 treetable组件的缺憾 。TristateCheckBox是对JCheckBox的扩展——增加了一个“部分选中”状态，加上“选中”、“未选中”组成一个三态复选按钮。在本文中，主要演示在 JXTreeTable中增加 TristateCheckBox——从而实现checkboxtreetable这个新的Swing组件。

 

环境准备

 

软件或资源	要求的版本
Java Development Kit (JDK)	5.0或更高 (我用的是6.0)
NetBeans IDE	6.0或更高
SwingX	0.9.2 (NetBeans中SwingX的配置请看我的上一篇blog 在netbeans 6.0使用swingx组件 )

 

我为什么要写这篇文章

 

我所在的部门，桌面应用的客户端都是由Java Swing构建的。有感于SUN对Swing基础构建支持的缺乏，我们用到了一些第三方组件库，SwingX是其中的一个。在使用JXTreeTable的时候，客户提出要用checkbox来保持选中的状态，一图胜千言：

 

虽然实现了需求，但是总感觉比较土，总想用checkboxtreetable来实现。可是JXTreeTable没有提供这个接口，只好靠

自己扩展了。感谢santhosh 的文章（见参考资料），在他研究的基础上我只做了少许的修改，请看效果图：

简介

 

看了最终的效果图之后，可以很容易的看出checkboxtreetable的特性，我来总结一下：

 

• 首先它是JXTreeTable的扩展。
• tree的每个节点前面都有一个三态复选按钮（TristateCheckBox），存在“部分选中”、“选中”、“未选中”3个状态。
• 当一个节点的复选按钮处于“选中”状态时，其所有子孙节点的复选按钮也会变为“选中”状态。反之亦然。
• 当一个节点的子孙节点部分选中时，那么该节点的复选按钮会呈现“部分选中”状态（一个灰色的小勾）。
• 当一个节点的子孙节点都处于“未选中”状态时，那么该节点的复选按钮会呈现“未选中”状态。

使用checkboxtreetable

 

上面的2张图由于是公司的商业产品，不能放源码上来。我在NetBeans下写了一个测试用的小项目，运行步骤如下：

 

1. 从附件中下载jxtreetable_with_checkbox.zip到本地并解压。
2. NetBeans主菜单依次选择“文件”——“打开项目”。
3. 在弹出的“打开项目”对话框中选择刚才解压之后的jxtreetable_with_checkbox目录，点击“打开项目”按钮。
4. 在“项目”视图中找到jxtreetable_with_checkbox项目，在上下文菜单中点击“运行”，可以看到以下结果：

 

源码解说

 

项目的源码放在2个package中，分述如下：

• org.jdesktop.swingx.ux：对JXTreeTable的扩展，checkboxtreetable的实现类都放这里了。

1. TristateCheckBox：三态复选按钮的实现类。对于这个组件，也可以选择其他的实现，比如jide-oss。
2. CheckTreeSelectionModel：保存对于树节点选中的状态。santhosh的实现，原样照搬。
3. CheckTreeTableManager：监听mouse事件来改变TristateCheckBox的外观。santhosh的实现，只改了line 30以适应SwingX新版本的API。
4. CheckTreeCellProvider：绘制复选按钮 + JLabel。这个我用SwingX提供的ComponentProvider替换了santhosh的TreeCellRenderer实现，具体说明待续。

• cn.vearn.checktreetable：我写的测试用的demo。

1. TestBean：保存每个节点的各个字段信息。
2. TestTreeTableModel：TreeTable的model。
3. TestFrame1：demo入口。
   

 

参考资料

 

首先是santhosh的3篇blog

http://www.jroller.com/page/santhosh/20050610#jtree_with_checkboxes
http://jroller.com/page/santhosh?entry=jxtreetable_with_checkboxes
http://jroller.com/page/santhosh?entry=checktree_with_without_selection_digging

 

评论

6 楼 firefox11 2011-12-06  

jxtreetable可以显示水平线，但设置后发现树型区域的水平线无法显示，能指点一下怎么来设置吗

5 楼 vearn 2011-07-04  

buaadu 写道

你好，请问您的第一个图中‘阈值排列顺序’那列实现的自定义renderer是如何实现的？也是按原来swing种的方法吗？

是的。详见http://download.oracle.com/javase/tutorial/uiswing/components/table.html

4 楼 buaadu 2011-06-02  

你好，请问您的第一个图中‘阈值排列顺序’那列实现的自定义renderer是如何实现的？也是按原来swing种的方法吗？

3 楼 fgg047 2009-02-10  

太好了，非常感谢您！！！

2 楼 vearn 2009-02-09  

fgg047 写道

你好，看到你的东西很激动！
下载下来运行也很成功。但有个问题想请教你一下：
我希望Table表格能够编辑。但事情我很不容易搞定它。你第一个图似乎已经做到了，希望你能教教我，感谢。


下面是我的失败经历：
我改了你的TestTreeTableModel类下的public boolean isCellEditable(Object node, int column) {
        return true;
    }
返回值设成True，运行的结果很意外。

然后调试时DefaultTreeTableModel类的setValueAt方法下的
modelSupport.firePathChanged(new TreePath(getPathToRoot(ttn)));有问题，再往深处看，就晕了。

另外DefaultMutableTreeTableNode的getColumnCount内容居然是return 1;不是我用得不对，就是它这东西太次了。

热切地盼望你的回复！
我的邮件地址：[e-mail]

厄。如果要编辑单元格的话，这样改一下：

1、TestTreeTableModel.java第18行改为

private Class[] _types = {Object.class, Integer.class, Integer.class, Integer.class, Integer.class};

2、TestTreeTableModel.java第90行改为

return true;

P.S.如果想把修改保存到model再通知视图更新，就重写setValueAt方法

@Override
public void setValueAt(Object aValue, Object node, int col) {
    if (node instanceof DefaultMutableTreeTableNode) {
        DefaultMutableTreeTableNode mutableNode = (DefaultMutableTreeTableNode) node;
        Object o = mutableNode.getUserObject();
        if (o != null && o instanceof TestBean) {
            TestBean bean = (TestBean) o;
            switch (col) {
                case 0:
                    String tmp = (String) aValue;
                    bean.setName(tmp);
                    break;
                case 1:
                    Integer v1 = (Integer) aValue;
                    bean.setValue1(v1);
                    break;
                case 2:
                    Integer v2 = (Integer) aValue;
                    bean.setValue2(v2);
                    break;
                case 3:
                    Integer v3 = (Integer) aValue;
                    bean.setValue3(v3);
                    break;
                case 4:
                    Integer v4 = (Integer) aValue;
                    bean.setValue4(v4);
                    break;
            }
        }
    }
}

1 楼 fgg047 2009-02-07  

你好，看到你的东西很激动！
下载下来运行也很成功。但有个问题想请教你一下：
我希望Table表格能够编辑。但事情我很不容易搞定它。你第一个图似乎已经做到了，希望你能教教我，感谢。


下面是我的失败经历：
我改了你的TestTreeTableModel类下的public boolean isCellEditable(Object node, int column) {
        return true;
    }
返回值设成True，运行的结果很意外。

然后调试时DefaultTreeTableModel类的setValueAt方法下的
modelSupport.firePathChanged(new TreePath(getPathToRoot(ttn)));有问题，再往深处看，就晕了。

另外DefaultMutableTreeTableNode的getColumnCount内容居然是return 1;不是我用得不对，就是它这东西太次了。

热切地盼望你的回复！
我的邮件地址：[e-mail]