前端table组件(前端table框架)

【java前端】网络电视能显示table标签的内容页面么

利用Java开发数据库应用系统时，经常需要在用户界面上显示查询结果。由于SUN公司提供的JDK1.x开发工具包不是可视化的集成开发环境（IDE），不能象Delphi、VB那样方便地把查询结果在DBGrid等表格中显示出来。因此，只能靠自己编写代码来实现。

在实际应用中，我们可以利用Vector、JTable、AbstractTableModel等三个类较好地解决这一问题。以下，详细介绍一下实现方法。

· 一、 类Vector、类JTable及类AbstractTableModel简介：

1、 类Vector：

类Vector是Java的历史集合类，隶属于java.util包。它包装了异构链表和数组杂合体，具有以下两个特点：

* 向量是异构的，不要求每个元素的类型相同，向量中可以混合多种对象类型；

* 向量是数组杂合体，因为它们可以在增加元素时动态增大。

其异构性正好符合数据库记录中属性类型不一的特点，而其动态性也正好符合数据库查询时，结果集记录个数不定的特点。

类Vector定义如下：

public class Vector extends AbstractList

implements List , Cloneable , Serializable{…}

实现了向量成员的查找、新增、删除等方法。如：add(Object obj)可方便地加入一个对象；get(int index)可方便地得到向量中的一个对象；remove(Object obj)。则可方便地删除向量中一个对象。

· 2、 类JTable：

JTable组件是Swing组件中比较复杂的小件，隶属于javax.swing包，它能以二维表的形式显示数据。类JTable定义如下：

public class JTable extends JComponent

implements TableModelListener, Scrollable, TableColumnModelListener,

ListSelectionListener, CellEditorListener, Accessible{…}

类JTable在显示数据时具有以下特点：

* 可定制性：可以定制数据的显示方式和编辑状态；

* 异构性：可以显示不同类型的数据对象，甚至包括颜色、图标等复杂对象；

* 简便性：可以以缺省方式轻松地建立起一个二维表。

其可定制性可满足不同用户和场合的要求，异构性也正好符合数据库访问结果集中属性类型不一的特点。类JTable提供了极为丰富的二维表格操作方法，如设置编

辑状态、显示方式、选择行列等，在此不一一赘述。

使用类JTable显示数据之前，必须根据情况生成定制模型、单元绘制器或单元编辑器。类AbstractListModel用来定制用户自己的数据模型，这个类在后面要介绍。

TableCellRenderer接口用来定制单元绘制器，TableCellEditor接口用来定制单元编辑器，这两个接口主要用于颜色对象的处理上，在示例中没有用到，不做过多说明。

· 3、 类AbstractTableModel：

类AbstractTableModel是一个抽象类，没有完全实现，不能实例化，使用时必须在程序中实现方法。它隶属于javax.swing.table 。类定义如下：

public abstract class AbstractTableModel extends Object

implements TableModel, Serializable{…}

类AbstractTableModel提供了TableModel接口中绝大多数方法的缺省实现。TableModel接口定义了JTable 的基础数据结构。用户要生成自己的数据模型，本来可以

通过实现TableModel接口中所有方法来满足要求，但管理听众表的功能对于所有数据模型是共同的，所以在javax.swing.table中又定义了类AbstractTableModel来

处理这个工作。它既管理听众表，又为生成TableModelEvents事件并委托给听众提供了便利。

要想生成一个具体的TableModel作为AbstractTableMode的子类，至少必须实现下面三个方法：

public int getRowCount();

public int getColumnCount();

public Object getValueAt(int row, int column);

至此，我们可以建立一个简单二维表（5×5），实现方法如下：

TableModel dataModel = new AbstractTableModel() {

public int getColumnCount() { return 5; }

public int getRowCount() { return 5;}

public Object getValueAt(int row, int col) { return new Integer(row*col); }

};

JTable table = new JTable(dataModel);

JScrollPane scrollpane = new JScrollPane(table);

· 二、 数据库及其连接方法简介：

示例采用Sybase数据库系统，数据库存放在数据库服务器中。路径为：D:/WORKER，数据库名为：worker.dbf。具有以下字段：

字段名

类型

Wno（职工号）

VARCHAR

Wname（职工名）

VARCHAR

Sex（性别）

VARCHAR

Birthday（出生日期）

DATE

Wage（工资）

FLOAT

要连接此数据库，需使用java.sql包中的类DriverManager。此类是用于管理JDBC驱动程序的实用程序类。它提供了通过驱动程序取得连接、注册，撤消驱动程序， 设置登记和数据库访问登录超时等方法。具体连接方法如下：

第一步：定位、装入和链接SybDriver类；

driver="com.sybase.jdbc.SybDriver";

SybDriver sybdriver=(SybDriver)Class.forName(driver).newInstance();

第二步：注册SybDriver类；

DriverManager.registerDriver(sybdriver);

第三步：取得连接（SybConnection）对象引用。

user="sa";

password="";

url="jdbc:sybase:Tds:202.117.203.114:5000/WORKER";

SybConnection connection=(SybConnection)DriverManager.getConnection

(url,user,password);

建立完连接后，即可通过Statement接口进行数据库的查询与更改。

· 三、 实现方法：

限于篇幅，在此只给出核心代码，包引入、界面处理、变量定义等部分不再介绍。

第一步：对象声明。

AbstractTableModel tm;//声明一个类AbstractTableModel对象

JTable jg_table;//声明一个类JTable对象

Vector vect;//声明一个向量对象

JScrollPane jsp;//声明一个滚动杠对象

String title[]={"职工号","职工名","性别","出生日期","工资"};

//二维表列名

第二步：定制表格。

1、实现抽象类AbstractTableModel对象tm中的方法：

vect=new Vector();//实例化向量

tm=new AbstractTableModel(){

public int getColumnCount(){

return title.length;}//取得表格列数

public int getRowCount(){

return vect.size();}//取得表格行数

public Object getValueAt(int row,int column){

if(!vect.isEmpty())

return

((Vector)vect.elementAt(row)).elementAt(column);

else

return null;}//取得单元格中的属性值

public String getColumnName(int column){

return title[column];}//设置表格列名

public void setValueAt(Object value,int row,int column){}

//数据模型不可编辑，该方法设置为空

public Class getColumnClass(int c){

return getValueAt(0,c).getClass();

}//取得列所属对象类

public boolean isCellEditable(int row,int column){

return false;}//设置单元格不可编辑，为缺省实现

};

2、定制表格：

jg_table=new JTable(tm);//生成自己的数据模型

jg_table.setToolTipText("显示全部查询结果");//设置帮助提示

jg_table.setAutoResizeMode(JTable.AUTO_RESIZE_OFF);

//设置表格调整尺寸模式

jg_table.setCellSelectionEnabled(false);//设置单元格选择方式

jg_table.setShowVerticalLines(true);//设置是否显示单元格间的分割线

jg_table.setShowHorizontalLines(true);

jsp=new JScrollPane(jg_table);//给表格加上滚动杠

第三步：显示查询结果。

1、 连接数据库：第二部分已给出。

2、 数据库查询：

Statement stmt=connection.createStatement();

ResultSet rs=stmt.executeQuery("select * from worker");

3、 显示查询结果：

vect.removeAllElements();//初始化向量对象

tm.fireTableStructureChanged();//更新表格内容

while(rs.next()){

Vector rec_vector=new Vector();

//从结果集中取数据放入向量rec_vector中

rec_vector.addElement(rs.getString(1));

rec_vector.addElement(rs.getString(2));

rec_vector.addElement(rs.getString(3));

rec_vector.addElement(rs.getDate(4));

rec_vector.addElement(new Float(rs.getFloat(5)));

vect.addElement(rec_vector);//向量rec_vector加入向量vect中

}

tm.fireTableStructureChanged();//更新表格，显示向量vect的内容。

bootstrap table轻松实现数据表格

在使用bootstrap table时可能在很多时候回用的表格来显示数据，如果自己写那肯定没问题，但是数据展示出来就麻烦多了，然而bootstrap table 封装了一套完善的数据表格组件，把从后台请求的数据很容易就展示出来了，bootstrap table有两种实现方式，一种是通过table写定在html里面，另一种是通过js实现，js实现比较灵活，所以这里采用js方式，下面来看实现。

推荐教程： Bootstrap图文教程

客户端

必须先引入相应的css、js等文件

服务端： 只需在接到请求时返回json数组就行了，是json数组哦，不是单个对象，不然就数据展示不出来。

注意bootstrap table 可以前端分页也可以后端分页，这里我们使用的是后端分页，后端分页时需返回含有

total：总记录数 这个键值好像是固定的，我看文档没找到可以修改成别的

rows： 记录集合 键值可以修改 dataField 自己定义成自己想要的就好

但是这可能会有请求时数据赋值不了的情况，那时你就会干着急了，下面还可以使用如下方式进行数据渲染。这个效果和上面一个不一样，这里就不上图了。同样第一步要引入官网所要求的的css/js等文件。

会使用之后是不是觉得比自己写的table更好用多了，还不用写一大堆js和p等，还有更多功能可以去官网了解怎么使用。

以上就是bootstrap table轻松实现数据表格的详细内容，更多请关注其它相关文章！

el-table和vxe-table兼容

vue（element-ui)  + springboot

要求table一页显示一百条数据。

数据要求经过处理再展现在前端，需要经历多次遍历。

问题描述：

数据量过大，且需要处理。

数据加载的时间长，且下拉滚动条的时候十分卡。IE尤其卡。

原因分析：

数据量过大和格式改变element-ui原有的el-table组件不够合适

IE不兼容

解决方案：

一开始换成了vxe-table，是一个专门做table的组件，里面很多功能都很好用，就是文档写的特别多简略，需要自行研究。

vxe-table解决了很多问题，但加载速度还是很慢。找大佬看过之后发现是里面的嵌套组件用了element的级联选择器，和vxe-table不够兼容，就换成了vxe-table的选择器。

数据量大显示慢的问题，用settimeout间歇性请求数据，100条数据可以分五次，每次请求二十条，时间间隔短，前端肉眼感觉不明显

改动后发现数据是很快出现了，但是IE滚动条依旧很难拖动。

发现是z-index层级问题。将父组件的position从static改为relative，z-index改为正数的较大值，将元素往前挪。（IE的浏览器会自动在页面加一个滚动条，组件里面的滚动条就很难用）

在C#中怎样设置table的行和列

TABLE是前端控件

是用JAVASCRIPT里控治的

当然这在.NET里已经集成了

TABLE在前端就是一个类

然后 行是一个子属性 行中的每一个列是一个CELL

如果你要改第一行第二列的内容

table1.rows[0].cells[1].innerHTML="aaaa";

Vue实战（六）通用Table组件

本文是 Vue实战 系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址：

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：

一个Table通常由如下几个部分构成：

除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。

在 Falcon 项目的实践中，我们发现，每一个页面中的 Table 除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的 Table 组件，取名为：TableBox。

说到这里插一个题外话：

关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和 Team 的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。

当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。

回到我们的主题，抽取这个 TableBox 其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化 TableBox，最终达到一个较为完整的状态。这也符合 Vue 本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：

我们发现，对于不同的页面，只要带有 Table 的，其数据都需要从远端服务器获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一 API 数据结构，如：

那么数据获取，渲染，Loading 动画展示隐藏，分页加载等操作都可以在 TableBox 中完成。

这个组件需要的只是向外暴露出数据请求的 API 地址及各种参数：

然后写好对应的获取数据的 fetchData 方法：

这样对于调用者来说，只需要简单的传入相关 API 地址及参数就可以了，数据加载的事情让 TableBox 去处理就好了，非常的方便。

因为 TableBox 组件本身是和业务无关的，所以其肯定无法知道我的这个 Table 的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知 TableBox。

要实现以上的功能，我们可以借助于 Vue 本身提供的强大的工具 Slot，如果简单点说，大家可以把 Slot 理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个 Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。

回到我们的 TableBox 组件，我们首先挖两个坑（放置两个 Slot ），命名为 ths 和 item ，分别用于表头和行列表内容：

这样对于表头的数据，可以由引入 TableBox 的父组件来指定，用法如下，其中 slot='ths' 就是刚才我们在 TableBox

中放置的 Slot

同样，对于每一行的内容，也是由引入 TableBox 的父组件来指定，用法如下：

在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变 Table 中某些数据的状态（删除某列或改变某一列的数据）。

这里具体举个 Falcon 中的实际例子：

我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的 Git Branch 。用户点击 Choose Branch 按钮后，会触发一个请求到后端，变更当前环境的 Git Branch， 修改成功后该列表项的按钮会显示为 Current Branch 。

由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。

同理，由于操作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和 TableBox 中的 reloadData 保持数据同步，这里用到了 Vue 2.3 版本增加的一个 .sync 修饰符进行处理 。

这样，当 reloadData 在数据更新完毕后还原为 false 状态时，我们可以显示的触发一个 emit 事件：

由于目前所有的数据获取都是在 TableBox 内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在 TableBox 内部将数据抛出。

抛出的方式也很简单，我们可以使用 emit 方法抛出一个事件。根据这个思路我们改造一下上文提到的 fetchData 方法：

然后在父组件中监听这个事件，这样就能获取到完整的数据了。

解决了以上4个场景的问题后，我们这个 TableBox 可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。

到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。

并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。

最后附上 TableBox 的地址：

以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！