表格(增加行号)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ProgId" content="Word.Document"> <meta name="Generator" content="Microsoft Word 12"> <meta name="Originator" content="Microsoft Word 12"> <link rel="File-List" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"> <link rel="Edit-Time-Data" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_editdata.mso"> <!--[if !mso]> <style> v":* {behavior:url(#default#VML);} o":* {behavior:url(#default#VML);} w":* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]--><link rel="themeData" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"> <link rel="colorSchemeMapping" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"> <!--[if gte mso 9]><xml> Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE </xml><![endif]--><!--[if gte mso 9]><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-alt:"Times New Roman";} @font-face {font-family:""@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal { mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; font-size:10.5pt; font-family:"Calibri","serif"; mso-bidi-font-family:"Times New Roman";} .MsoChpDefault { mso-bidi-font-family:"Times New Roman";} /* Page Definitions */ @page {} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; layout-grid:15.6pt;} div.Section1 {page:Section1;} --> </style> <!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable { mso-style-parent:""; font-size:10.5pt; font-family:"Calibri","serif";} </style> <![endif]-->

前面介绍了关于JTable的基本使用、JTable单元格的RendererEditorJTable的单元格的合并和拆分、JTableHeaderRendererEditorJTableHeader的的合并和拆分等.现在介绍一种关于JTable表现的情况,比如我们从DB或者文件中取得数据之后,我们把它插入JTable之中时,我们是想知道它的行号的,但是我们排序之后行号是不应该变化的,这样我们就不能把行号的数据和JTable的数据放置在一个Model(当然也是有办法的,比如我们重写TableModel,当数据改变时,我们重写FireTableChange方法更改数据行号,但是很复杂.)

我们一般的做法是设置另外一个JTable,重写tableChangedpropertyChange,监听主JTable的变化,当主JTable的数据变化时,我们同时也更新这个行号JTable的数据,这个就可以达到JTable的数据改变时我们行号JTable的数据也随之改变.

先看看完成的效果:

<!--[if gte vml 1]> <![endif]-->

排序后,行号是不变的:

<!--[if gte vml 1]> <![endif]-->

然后哦就是我们的实现了,先看行号那一列的类,先实现它的TableModel,

    /**

     *createtherowtablemodel.

     */

    privateclass RowHeaderModel extends AbstractTableModel {

这个行JTableTableModel是和数据JTable是关联的,我们根据数据的JTableModel调整这个行JTable.

先是构造函数,很简单,只需要传入数据JTableModel.

    public RowHeaderModel(TableModel model) {

           this.model = model;

       }

接下来是TableModel的方法的复写:

    @Override

       publicint getColumnCount() {

           return 1;

       }

只有一列数据.

    @Override

       publicint getRowCount() {

           returnmodel.getRowCount();

       }

行数和数据JTable的行号一样.

    @Override

       public String getColumnName(int col) {

           return"";

       }

不显示表头.

    @Override

       publicboolean isCellEditable(int row, int column) {

           returnfalse;

       }

设置为不可编辑的.

然后就是行号JTable的单元格的表现了,我们继承TableCellRenderer,使它返回行号.

    /**

     *createtablecellrenderer.

     */

    privateclass RowHeaderRenderer extends JButton implements

           TableCellRenderer {

复写getInsets使JTable的单元格没有间隙

    @Override

       public Insets getInsets() {

           returnnew Insets(0, 0, 0, 0);

       }

然后是实现TableCellRenderer的方法:

       @Override

       public Component getTableCellRendererComponent(JTable table,

            Object value, boolean isSelected, boolean hasFocus, int row, int column) {

           // set cell text

           this.setText("" + (row + 1));

设置行号就可以了.

然后就是行号JTable这个类了

/**

 *createtherowtable.

 */

publicclass RowTable extends JTable {

实现很简单,因为JTableModelRnederer已经完成了,不需要再设置数据了:

初始化设置ModelRenderer就可以了:

       setModel(new RowHeaderModel(table.getModel()));

       setRowHeight(table.getRowHeight());

       getColumn("").setCellRenderer(new RowHeaderRenderer());

这样行号JTable就完成了,现在我们需要实现一个类继承JscrollPane,当我们需要创建JTable,只需要根据我们的JTable创建行号JTable,然后把两个JTable放置在我们自己的JscrollPane之中就可以了.

/**

 *RowtableScrollPane.

 */

publicclass RowTableScrollPane extends JScrollPane implements

       PropertyChangeListener, TableModelListener {

它继承JscrollPane实现PropertyChangeListenerTableModelListener接口,当数据JTable变化时,我们同时更新行号JTable的数据.

先看属性,很简单,需要放置的两个JTable

    // row table

    protected RowTable rowHeader = null;

    // data table

    protected JTable table = null;

构造函数也很简单,只需要传入我们的数据JTable

    /**

     *

     */

    public RowTableScrollPane(JTable table) {

       if (table == null) {

           thrownew IllegalArgumentException("table is null");

       }

       this.table = table;

然后初始化时构造行号JTable,设置监听:

        table.addPropertyChangeListener(this);

       table.getModel().addTableModelListener(this);

       rowHeader = new RowTable(table);

放置在JscrollPane上面:

       setViewportView(table);

       setRowHeaderView(rowHeader);

响应数据JTable的事件,当数据JTable变化时,同时更新行号JTable:

    @Override

    publicvoid propertyChange(PropertyChangeEvent e) {

       if (rowHeader != null) {

           rowHeader.setTableModel(table);

       }

    }

    @Override

    publicvoid tableChanged(TableModelEvent e) {

       if (rowHeader != null) {

           rowHeader.setTableModel(table);

       }

    }

最后就是使用了,它的使用也很简单,原本我们创建好JTable之后使用JscrollPane变现JTable:

        //Create the scroll pane and add the table to it.

        JScrollPane scrollPane = new JScrollPane(table);

现在只需要把JscrollPane换成我们自己实现的RowTableScrollPane就可以了:

        RowTableScrollPane scrollPane = new RowTableScrollPane(table);

这样实现出来的JTable就自动添加上表格了.

最后再补充一点,我们可以不使用JTable作为行号的那一列,使用一个Jlist也可以了,如下图:

<!--[if gte vml 1]> <![endif]-->

实现方法也一样,只需要实现JlistListModel时和JTableModel关联就可以了,和前面介绍的JTable的例子一样,把它们都放置在JscrollPane之上关联PropertyChangeListenerTableModelListener事件就可以了,就不详细介绍了,自此当然我们也可以联想到别的组件,只要我们可以实现一个组件的Model具有和JTable的数据关联的特性,就可以作出另外的效果了.

到这里为止,关于JTable的除了拖拽就算是完了,以后想到新的再补充了,下个开始写JTree的,以后要写ExtJS了,估计时间会少很多了.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML 表格中,可以使用 JavaScript 在点击按钮时动态添加行并自动添加行号。以下是一个示例: ```html <table id="myTable"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>25</td> </tr> <tr> <td>2</td> <td>李四</td> <td>30</td> </tr> </tbody> </table> <button onclick="addRow()">添加行</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); var rowNum = table.rows.length - 1; var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = rowNum; cell2.innerHTML = "<input type='text' name='name'>"; cell3.innerHTML = "<input type='text' name='age'>"; } </script> ``` 在上面的代码中,我们首先在表格中设置了一个 `thead` 和一个 `tbody`,并在 `thead` 中添加了表头。然后我们在 `tbody` 中添加了两行数据。在按钮上设置了一个 `onclick` 事件,当点击按钮时会调用 `addRow()` 函数。 `addRow()` 函数首先获取表格对象,然后插入一行到表格的最后位置。然后获取当前表格的行数,根据行数设置行号,并在新行中插入单元格并设置单元格内容为行号、姓名和年龄的输入框。 注意,这里的行号是根据当前表格的行数计算得出的,因此当删除表格中的行时,行号就会重新计算。如果需要保证行号不重复,可以使用一个计数器来记录当前行数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值