不管是什么编程语言，都已经内置好很多典型的前端组件给你使用，使用这些默认组件基本能完成80%的工作了，但是还是有些独特的需求完成不了，比如点击一个按钮，按钮按下要出现五彩斑斓的背景阴影，这种就需要对组件进行自定义了。

下面使用Java语言作演示，解决一个需要在一个表格里面嵌套一个复选框的功能，主要起一个抛砖引玉的效果。

正常使用表格

很简单，使用一次就知道了，不过多介绍。

// 创建 JTable 实例,使用默认的模型
JTable table = new JTable();
// 设置表格数据
Object[][] data = {
	{1, "Apple", 10.0},
	{2, "Banana", 5.0},
	{3, "Orange", 8.0}
};
Object[] columnNames = {"ID", "Name", "Price"};
table.setModel(new DefaultTableModel(data, columnNames));

show:

自定义表格样式

// 创建 JTable 实例,并使用自定义的 FileTableModel
JTable table = new JTable(new FileTableModel());
// 获取第二列(列索引为 1)的列模型 . 为第二列设置自定义的渲染器 AvailableRenderer
table.getColumnModel().getColumn(1).setCellRenderer(new AvailableRenderer());
// 获取第二列(列索引为 1)的列模型 . 为第二列设置自定义的编辑器 AvailableEditor . 将一个 JCheckBox 实例作为编辑器的渲染组件传入
table.getColumnModel().getColumn(1).setCellEditor(new AvailableEditor(new JCheckBox()));

可以看到，将默认的Model改成自定义的模型。然后设置渲染器和编辑器。
渲染器就类似HTML的CSS样式。 编辑器就类似JS，可以在里面编辑事件，方便组件与用户交互。

核心就是理解这三个类的各自作用：

• FileTableModel 定义了表格的数据源和基本行为。
• AvailableRenderer 定义了表格中复选框单元格的显示效果。
• AvailableEditor 定义了表格中复选框单元格的编辑交互行为。

数据准备：

// 加载数据
private Object[][] data = {
	{1, true, "file1.txt"},
	{2, false, "file2.pdf"},
	{3, true, "file3.doc"}
};
// 设置表格列名
private String[] columnNames = {"ID", "Available", "File Name"};

自定义Model

// 定义表格模型
// FileTableModel 继承自 AbstractTableModel,用于自定义表格模型
private class FileTableModel extends AbstractTableModel {
	@Override
	public int getRowCount() {
		// 返回表格中的行数,通过获取 data 数组的长度
		return data.length;
	}
	@Override
	public int getColumnCount() {
		// 返回表格中的列数,通过获取 columnNames 数组的长度
		return columnNames.length;
	}
	@Override
	public Object getValueAt(int rowIndex, int columnIndex) {
		// 返回指定单元格的值,通过访问 data 数组中相应的位置
		return data[rowIndex][columnIndex];
	}
	@Override
	public String getColumnName(int column) {
		// 返回指定列的列名,通过访问 columnNames 数组中相应的位置
		return columnNames[column];
	}
	@Override
	public Class<?> getColumnClass(int columnIndex) {
		// 指定哪些单元格可以编辑,这里设置只有第二列(columnIndex == 1)可以编辑
		return getValueAt(0, columnIndex).getClass();
	}
	@Override
	public boolean isCellEditable(int rowIndex, int columnIndex) {
		// 指定哪些单元格可以编辑,这里设置只有第二列(columnIndex == 1)可以编辑
		return columnIndex == 1;
	}
	@Override
	public void setValueAt(Object value, int rowIndex, int columnIndex) {
		// 设置指定单元格的值,并通知表格该单元格数据已经更新
		data[rowIndex][columnIndex] = value;
		fireTableCellUpdated(rowIndex, columnIndex);
	}
}

渲染器代码：

// 定义渲染器，用于渲染第二列的复选框
// AvailableRenderer 是一个自定义的渲染器,用于渲染 JTable 中的复选框单元格
// 它继承自 JCheckBox 并实现 TableCellRenderer 接口
private class AvailableRenderer extends JCheckBox implements TableCellRenderer {
	// 构造函数,用于初始化渲染器
	public AvailableRenderer() {
		// 设置复选框在单元格中水平居中
		setHorizontalAlignment(SwingConstants.CENTER);
	}
	// 重写此方法,用于自定义渲染单元格的行为
	@Override
	public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
		// 根据传入的值设置复选框的选中状态
		setSelected((Boolean) value);
		// 将复选框设置为可用状态,以便能够正确渲染
		setEnabled(true);
		// 根据当前单元格是否被选中,设置复选框的背景色
		// 如果被选中,则使用表格的选中行背景色
		// 否则使用表格的默认背景色
		setBackground(isSelected ? table.getSelectionBackground() : table.getBackground());
		// 返回当前 JCheckBox 实例,作为渲染的组件
		return this;
	}
}

编辑器代码：

// 定义编辑器,用于编辑第二列的复选框
private class AvailableEditor extends DefaultCellEditor implements ItemListener {
	private JCheckBox checkBox;
	private int editingRow;
	public AvailableEditor(JCheckBox checkBox) {
		super(checkBox);
		this.checkBox = checkBox;
		this.checkBox.addItemListener(this);
	}
	@Override
	public Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected, int row, int column) {
		editingRow = row; // 记录当前编辑的行号
		checkBox.setSelected((Boolean) value);
		return checkBox;
	}
	@Override
	public Object getCellEditorValue() {
		return checkBox.isSelected();
	}
	@Override
	public void itemStateChanged(ItemEvent e) {
		super.fireEditingStopped();
		System.out.println("-----");  // 打印"123"
		int id = (int) data[editingRow][0]; // 获取ID
		String fileName = (String) data[editingRow][2]; // 获取文件名
		System.out.println("ID: " + id + ", File Name: " + fileName);
	}
}

shwo: