boostraptable表格中添加下拉框，添加按钮

来不及解释了， 快上车！
前端使用的django的template模板语法

1. html显示bootsraptable配置

# 引入主要的js文件
<link rel="stylesheet" href="{% static "lib/bootstrap-select/css/bootstrap-select.min.css" %}"/>
<script src="{% static 'web/bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
<script src="{% static 'web/js/bootstrap-table.js' %}"></script>
<script src="{% static "lib/bootstrap-select/js/bootstrap-select.js" %}"></script>
       <table id="table"
              data-toggle="table"
              data-toolbar-align="center"
              data-show-refresh="false"
              data-search="false"   #不显示搜索框
              data-pagination="true" #显示分页
              data-side-pagination="server" #在服务器段进行分页
              data-url="{% url 'course:course-list' %}" #服务端处理并返回的url
       >
           <thead>
           <tr>
               <th data-field="course_name" data-escape="true">{% trans 'x_course_name' %}</th>
               <th data-field="stage" data-formatter="stageFormatter">{% trans 'x_stage' %}</th>
               <th data-field="obligatory" data-formatter="obligatoryFormatter">{% trans 'x_is_compulsory' %}</th>
               <th data-field="course_direction" data-formatter="directionFormatter">{% trans 'x_direction' %}
               <th data-field="course_sub_direction"
                   data-formatter="sub_directionFormatter">{% trans 'x_sub_direction' %}</th>
               <th data-field="course_count">{% trans 'x_lesson_num' %}</th>
           </tr>
           </thead>
       </table>

data-field=”course_name” # 服务器返回的字段名称前后台需要一样
data-escape=”true” # 添加防止xss攻击
data-formatter=”stageFormatter” # 对后端返回的数据需要进行前端定制化的处理，处理成你想要的类型

2. javascript进行数据处理， 添加下拉框：

<script>
stageFormatter = function (value, row, index) {
                    var jichu_selct = '';
                    var jinjie_select = '';
                    var gaoji_select = "";
                    if (value == 0) {
                        jichu_selct = 'selected'
                    } else if (value == 1) {
                        jinjie_select = 'selected'
                    } else {
                        gaoji_select = 'selected'
                    }
                    # bootstrap table 添加下拉框
                    return "<select style=\"height:25px;width:50px;\" onchange=\"selectOnchang(this, " + row.id + ")\">\n" +
                        "  <option value =0 "+jichu_selct+">"+gettext('x_env_type_base')+"</option>\n" +
                        "  <option value =1 "+jinjie_select+">"+'{% trans 'x_advanced' %}'+"</option>\n" +
                        "  <option value=2 "+gaoji_select+">"+'{% trans 'x_senior' %}'+"</option>\n" +
                        "</select>"
                };

        function selectOnchang(obj, id) {
            // 判断哪个被选中
            var change_value = obj.selectedIndex;
            //找到选中的数据进行提交修改
            var change_stage_url = '{% url 'cms_course_occupation:api:occupation-course-list' %}' + id.toString() + '/';
            http.patch(change_stage_url, {stage: change_value}, function () {
                table.reload(); # 重新加载表数据
            });
        }
</script>

2.1 使用bootstrap selectpicker下拉框：

// 记得导入上面html中selectpicker对应的js， css库
<script>
stageFormatter = function (value, row, index) {
                    var jichu_selct = '';
                    var jinjie_select = '';
                    var gaoji_select = "";
                    if (value == 0) {
                        {#                    value_selct =  gettext('基础');#}
                        jichu_selct = 'selected'
                    } else if (value == 1) {
                        {#                    value_selct = gettext('进阶');#}
                        jinjie_select = 'selected'
                    } else {
                        {#                    value_selct = gettext('高级')#}
                        gaoji_select = 'selected'
                    }
                    return " <select class='selectpicker show-tick' onchange=\"selectOnchang(this, " + row.id + ")\">\n" +
                        "            <option value='0' " + jichu_selct + " >"+gettext('x_env_type_base')+"</option>\n" +
                        "            <option value='1' " + jinjie_select + " >"+'{% trans 'x_advanced' %}'+"</option>\n" +
                        "            <option value='2' " + gaoji_select + " >"+'{% trans 'x_senior' %}'+"</option>\n" +
                        "        </select>";
                };


        $(function () {
            $table.on('load-success.bs.table', function (data) {
                // bootstrap table 加载完成之后才执行的函数， 不让bootstrap selectpicker不起作用
                // $(".selectpicker").find("option[value='2']").attr("selected",true);
                $('.selectpicker').selectpicker({ // 个性化设置
                    style: 'btn',
                    size: 'auto',
                    width: '50%'
                });
            });
        });

        function selectOnchang(obj, id) {
            // 判断哪个被选中
            var change_value = obj.selectedIndex;
            //找到选中的数据进行提交修改
            var change_stage_url = '{% url 'cms_course_occupation:api:occupation-course-list' %}' + id.toString() + '/';
            http.patch(change_stage_url, {stage: change_value}, function () {
                table.reload();
                {#$('.selectpicker').selectpicker('refresh');#}
            });
        }

</script>

添加bootstrap按钮和添加下拉框是一样

感觉这个selectpicker 没有原来的select 那么好用，我的是没有使用selectpicker的