实训收获之前端框架bootstrap/jquery总结（一）

最新推荐文章于 2025-06-14 23:24:10 发布

原创

最新推荐文章于 2025-06-14 23:24:10 发布 · 5.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery-ui #Tabulator #前端 #可编辑表格 #表格初始化

本文是作者在实训期间学习前端开发，特别是使用Tabulator和jQuery-ui创建可编辑表格的经验总结。文章详细介绍了如何初始化Tabulator表格，设置列属性，包括编辑、排序、宽度调整等功能，并讨论了数据验证的方法，强调了官方文档的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学校在大三的时候开了实训课程，八人组队去完成一个为期六周的进销存管理系统。在这六周里，我从一个只会写粗糙静态页面的前端菜鸟，变成了有那么一丢丢经验的前端菜鸟。我仍然很菜，但是我打算把这段时期学习到的前端知识总结一下，就当是纪念这段实训生活吧！

进销存管理系统主要以表格为主，进行一些新增、统计、删除的操作，其中表格大致分为两类：可编辑的和点击按钮后可编辑的。但是普通的表格类似于<table></table>的定义并不能满足我们的需求。因此在前期的挣扎思考中，我们选择了bootstrap-table和jQuery-ui的 tabulator的表格插件，分别主要用来实现点击按钮后可实现和可编辑的表格。今天就先主要说一下Tabulator。

Tabulator是jquery-ui中很冷门的一个插件，除了官方文档，没有任何的可参考文献、博客等，因此探索之路困难重重。

首先是Tabulator的官方网址：http://tabulator.info/

一、Tabulator的初始化

首先引入Tabulator的包，可以下载之后在项目中引用，也可以直接用cdn的地址，但是要注意，记得引用jquery-ui的包：

<head>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link href="../css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="../js/tabulator.min.js"></script>
    <link  rel="sty

最低0.47元/天解锁文章

200万优质内容无限畅学