bootstraptable编辑表格所需文件资源-CSDN文库

共55个文件

png：19个

js：18个

css：10个

需积分: 9 44 浏览量 2018-06-28 17:29:48 上传评论收藏 489KB ZIP 举报

Bootstrap Table 是一个基于Bootstrap框架的前端组件，用于创建功能丰富的、响应式的表格。在默认情况下，Bootstrap Table 并不支持直接在表格内编辑数据。为了实现这个功能，我们需要借助第三方插件，比如`bootstrap-x-editable`。这个插件允许用户在表格的单元格上直接进行编辑操作，提供了一种便捷的方式来动态更新表格内容。 `bootstrap-x-editable`插件的引入主要包括以下几个步骤： 1. **引入CSS和JavaScript文件**：在HTML文档的`<head>`部分，我们需要引入Bootstrap Table的基础样式和JavaScript库，以及`bootstrap-x-editable`的相关文件。这些文件通常包括Bootstrap CSS、jQuery、Bootstrap JavaScript以及`bootstrap-x-editable`的CSS和JS文件。在提供的压缩包中，`dist`目录下可能包含了这些必要的资源文件。 2. **初始化Bootstrap Table**：你需要按照Bootstrap Table的文档创建一个基本的表格，通过设置相关的选项，如`data-toggle="table"`，`data-url`（如果需要远程数据）等，来初始化表格。 ```html <table data-toggle="table" data-url="data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">姓名</th> <th data-field="price">价格</th> </tr> </thead> </table> ``` 3. **启用可编辑功能**：为了使表格中的单元格变为可编辑，我们需要为每个需要编辑的单元格添加`data-x-editable`属性，并指定编辑类型。例如，对于文本编辑，可以设置`data-x-editable="true"`，对于日期编辑，可以设置`data-x-editable="date"`。 ```html <td data-field="name" data-x-editable="true">John Doe</td> ``` 4. **配置和初始化editable插件**：在文档加载完成后，需要调用`bootstrap-editable`的初始化方法，对表格进行设置。这可以通过遍历表格元素并调用`.editable()`方法来完成。 ```javascript $(document).ready(function() { $('table').find('.editable').editable({ // 配置项，如：显示模式、提交方式、错误处理等 }); }); ``` 5. **处理编辑事件**：当用户完成编辑并保存更改时，可以监听`save`或`error`等事件，以便处理用户输入的数据或处理可能出现的错误。 ```javascript $('.editable').on('save', function(e, params) { console.log('保存的数据：', params.newValue); // 更新后端数据或执行其他操作 }); ``` 6. **自定义编辑器**：`bootstrap-x-editable`提供了多种内置编辑器，如文本、选择、日期等。如果需要，还可以自定义编辑器，以满足特定的需求。通过以上步骤，你可以成功地将Bootstrap Table转变为可编辑的表格。在实际项目中，确保所有依赖的JavaScript和CSS文件都已正确加载，并根据项目的具体需求调整`bootstrap-x-editable`的配置选项，以获得最佳的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap-editable.zip （55个子文件）

dist

LICENSE-MIT 1KB

jqueryui-editable

css

jqueryui-editable.css 5KB

img

clear.png 509B

loading.gif 2KB

jqueryui-editable.js 172KB

jqueryui-editable.min.js 49KB

jquery-editable

css

jquery-editable.css 5KB

img

clear.png 509B

loading.gif 2KB

jquery-editable-poshytip.js 175KB

jquery-editable-poshytip.min.js 50KB

jquery-ui-datepicker

css

redmond

jquery-ui-1.10.3.custom.min.css 19KB

images

ui-bg_glass_75_d0e5f5_1x400.png 336B

ui-bg_inset-hard_100_f5f8f9_1x100.png 333B

ui-bg_glass_85_dfeffc_1x400.png 341B

ui-icons_cd0a0a_256x240.png 4KB

ui-bg_flat_55_fbec88_40x100.png 206B

ui-bg_gloss-wave_55_5c9ccc_500x100.png 6KB

ui-icons_217bc0_256x240.png 4KB

ui-icons_6da8d5_256x240.png 4KB

ui-bg_flat_0_aaaaaa_40x100.png 212B

ui-icons_f9bd01_256x240.png 4KB

ui-bg_inset-hard_100_fcfdfd_1x100.png 292B

ui-icons_d8e7f3_256x240.png 4KB

ui-icons_469bdd_256x240.png 4KB

ui-icons_2e83ff_256x240.png 4KB

animated-overlay.gif 2KB

ui-bg_glass_95_fef1ec_1x400.png 332B

jquery-ui-1.10.3.custom.css 21KB

jquery-ui-1.10.3.custom.min.js 39KB

jquery-ui-1.10.3.custom.js 82KB

CHANGELOG.txt 14KB

inputs-ext

wysihtml5

bootstrap-wysihtml5-0.0.2

wysiwyg-color.css 710B

bootstrap-wysihtml5-0.0.2.min.js 14KB

wysihtml5-0.3.0.min.js 110KB

bootstrap-wysihtml5-0.0.2.js 21KB

bootstrap-wysihtml5-0.0.2.css 2KB

wysihtml5-0.3.0.js 324KB

wysihtml5.js 4KB

typeaheadjs

typeaheadjs.js 3KB

lib

typeahead.js 48KB

typeahead.js-bootstrap.css 1KB

address

address.js 5KB

address.css 141B

bootstrap3-editable

css

bootstrap-editable.css 21KB

img

clear.png 509B

loading.gif 2KB

bootstrap-editable.js 227KB

bootstrap-editable.min.js 74KB

README.md 4KB

bootstrap-editable

css

bootstrap-editable.css 21KB

img

clear.png 509B

loading.gif 2KB

bootstrap-editable.js 233KB

bootstrap-editable.min.js 78KB

评论收藏

内容反馈

Wikey丶

粉丝: 16
资源: 38

bootstrap table编辑表格所需文件

最新资源

bootstrap table编辑表格所需文件

bootstrap-table-editabel.js及css

x-editable行内编辑bootstraptable所需包

editable-table, 使 HTML table 可以编辑的小型 jquery/Bootstrap 小部件.zip

bootstrap table 导出文件 bootstrap-table-export.js和tableExport.js

bootstrap-table相关文件

bootstrap-table-edit

bootstrap--edittable(css,js).rar

Bootstrap+BootstrapTable+x-editable(css和js)整合包

bootstrap-table-editable.js

bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式

bootstrap table tree 文件

bootstrap插件_table可编辑表格_demo

bootstrap table 完整引用外部文件

Bootstrap表格编辑生成器插件.rar

免费下载bootstrap_table参考代码.rar

BootStrap-table.js 官网下载

bootstrap-table插件

bootstrap-table.rar

bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

bootstrap-table-editabel

测试可用bootstrap可编辑表格完整代码

bootstrap编辑表格插件

bootstrap可编辑表格完整代码

bootstrap-editable

Bootstrap+Table离线文档

bootstrap-editable;datetimepicker;bootstrap-selectJS脚本打包

bootstrap table相关合集(bootstrap-table bootstrap-table-editable bootstrap-editable)

bootstrap-table-jquery.zip

bootstrap行内编辑js文件

最新资源