jQuery组件-----bootstrap-table通过整合x-editable实现可编辑table

最新推荐文章于 2024-08-10 09:09:11 发布

原创

最新推荐文章于 2024-08-10 09:09:11 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery可编辑table #jQuery表格 #可编辑表格 #x-editable #bootstrapTable

本文介绍了如何结合jQuery、bootstrap-table和x-editable库创建一个可编辑的表格。首先从官方GitHub仓库下载x-editable，并将其bootstrap3-editable目录的文件引入项目。接着，在HTML和JS代码中配置编辑功能，最后展示了后台处理保存编辑数据的业务代码，实现了表格单元格的动态编辑功能。

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

x-editable开源地址：https://github.com/vitalets/x-editable

效果展示：

在这里插入图片描述

具体实现方式

1、首先通过文章开头的开源项目地址下载x-editable到本地，引入x-editable-1.5.1\dist\bootstrap3-editable下的文件到项目中：


<link href="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/plugins/x-editable/bootstrap-editable.css">
<link href="/css/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-table/editable/bootstrap-table.js"></script>
<script src="/js/plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="/js/plugins/bootstrap-table/editable/bootstrap-table-editable.js"></script>
<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

本人的html代码中通用部分整合到了一个html里，引用到x-editable的html页面代码如下：