BootStrap 可编辑表Table格

发布时间：2020-12-18 00:47:25 所属栏目：安全来源：网络整理

导读：一、显示数据（基础功能）在html页面中定义表格以及表格的列名，最后把从数据库中查询出来的数据，循环显示到页面中。这个系统用的是PHP语言，里边用到了PHP中的语法，如果是Java语言，把php换成jsp中对应的语法就行序号 Category SubProcess Name Descri

序号ActionID; ?>Category; ?> Description; ?>">修改 ActionID; ?>">删除

二、表格编辑（高级功能）

在html页面中，先定义一个表格，然后到js中初始化。这个功能引用了一个第三方插件，可以到这里下载 http://bootstrap-table.wenzhixin.net.cn/zh-cn/，这个插件是修改了 http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 里边的一些功能后形成的。在使用过程中，我做了一些小的改动，大家用的时候可以根据情况来

1. 效果展示

表格初始化后

添加新行

2. 在使用时，首先需要引入它的js，我是统一引用到入口文件中的

在页面中定义表格，可添加自定义按钮

一、显示数据（基础功能）在html页面中定义表格以及表格的列名，最后把从数据库中查询出来的数据，循环显示到页面中。这个系统用的是PHP语言，里边用到了PHP中的语法，如果是Java语言，把php换成jsp中对应的语法就行
	Category	SubProcess Name	Description	Do Action

一、显示数据（基础功能）

在html页面中定义表格以及表格的列名，最后把从数据库中查询出来的数据，循环显示到页面中。这个系统用的是PHP语言，里边用到了PHP中的语法，如果是Java语言，把php换成jsp中对应的语法就行

3. js初始化表格

/**

add a new row
*/
$('#addData').click(function(){
$('#subprocessTable').bootstrapTable('selectPage',1); //Jump to the first page
var data = {actionId: '',actionName: '',category:'',description: ''}; //define a new row data，certainly it's empty

$('#subprocessTable').bootstrapTable('prepend',data); //the method of prepend must defined all fields，but append needn't
//$('#dataTable').bootstrapTable('append',data);

$("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");
$("#dataTable input")[0].focus();
});
});

需要用下拉列表的，在定义列的时候这样定义

效果如下

其它的操作，大家可以到这个插件的网站上查阅文档，或者看js源码

三、动态表头

动态表头，说到底就是每次的列数据是不固定的，根据前提条件查询数据库，再根据查询结果加载表头。有了上边的修改，实现这个功能已经不在话下，只要把初始化表格的columns替换成我们自定义的数据就可以了，做了个简单的小demo，具体的可以看【EasyUi DataGrid】动态加载列这篇文章

效果如下：

以上所述是小编给大家介绍的BootStrap 可编辑表Table格。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!