bootstraptable和xeditable使用方法

　　最近需要做一些数据表格，有同事推荐EasyUI，但经过比较选择了Bootstrap table，一款极为强大的表格组件，基于Bootstrap 的 jQuery 。本文还将介绍Bootstrap-editable（行内编辑功能）使用方法。

Bootstrap下载地址：http://v3.bootcss.com/getting-started/#download

Bootstrap table下载地址：https://github.com/wenzhixin/bootstrap-table

Bootstrap-editable下载地址：https://github.com/vitalets/x-editable

一、Bootstrap table

1.引入js和css文件

    
     "stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
     
     "stylesheet" type="text/css" src="{% static 'bootstrap/css/bootstrap.css' %}">
    "stylesheet" href="{% static 'bootstrap-table-develop\dist\bootstrap-table.css' %}">
    
    

data：返回数据必须是json格式。

$("#table").bootstrapTable('destroy')销毁数据表格。没有这段代码的话，每次返回新的数据都不会显示，原因是有缓存。

二、bootstrap-editable

 如果我们需要对表格行内进行编辑要怎么办呢，bootstrap-editable插件可以帮我们实现。

1.导入bootstrap-editable里面的js和css文件

    
    "{% static 'bootstrap-editable\css\bootstrap-editable.css' %}" rel="stylesheet" />
    

2.代码

后端处理代码就不贴出来了，用ajax和后台交互就可以。