bootStrap table 使用

1、引入

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <link rel="stylesheet" href="  <%=path %>/plugin/bootstrap-table-develop/src/bootstrap-table.css" >

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="<%=path %>/js/jquery-1.11.1.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    <script src="<%=path %>/plugin/bootstrap-table-develop/dist/bootstrap-table.js"></script>    <script src="<%=path %>/plugin/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>    <script src="<%=path %>/plugin/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>

2、建立一个空的表格

<table id="table" class="mychar1-table"></table>

3、创建data2.html储存json数据

{"rows":[{"coursename":"123456798","createtime":"2017-04-14 16:45:00.0","id":"6d84789302cf4cc993c0eaadc74a7464","remark":"123456789","stuid":"536eaf873b8"},{"coursename":"123","createtime":"2017-04-14 16:44:59.0","id":"17d7104c6bd9477ab7c9c54c5c35571e","remark":"123456789","stuid":"536eaf873b8"},{"coursename":"1","dictionaryid":"18","id":"1","stuid":"1"}],"total":3}

4、ajax接受json数据

$(function () {        var obj = [];//创建一个数组对象        $.ajax({            url : "<%=path %>/json/data2.html",            type : "post",            dataType : "json",//这里必须是json，不然没法拿到返回来的值            success : function(value) {                $.each(value.rows, function(i, d) {                    obj.push(d);                    // alert(obj.coursename);                });                initTable(obj);//等把所有数据存到obj之后，调用bootstrap table的方法            },            error:function(){                alert("执行错误！");            }        });    });

5、编辑bootstrap table的方法

function initTable(obj){     $table = $('#table').bootstrapTable({         data : obj, //最终的JSON数据放在这里           height : $(window).height() - 100,//表格高度         toolbar : '#toolbar',         striped : true,         pagination : true,         pageNumber : 1,//初始化分页数         pageSize : 10,//页面显示条数         pageList : [ 5, 10, 20 ],         search : true,//启用搜索输入。         searchAlign : 'left',//指示如何对齐搜索输入。左'，'右'可以使用。         //showRefresh: true,  //显示“刷新”按钮。         showExport : true, //是否显示导出         exportDataType : "selected", //basic', 'all', 'selected'.         sidePagination : "client",//定义表格边分页，只能“client”或“server”。使用“server”需要设置“URL”或“Ajax”选项。         editable : true,         showColumns : true,         clickToSelect : true,//true选择复选框或RadioBOX点击排。         showToggle : true, //是否显示详细视图和列表视图的切换按钮         cardView : false, //是否显示详细视图         detailView : false,//显示详细视图表。         minimunCountColumns : 2,         rowStyle : function(row, index) {             //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];             var strclass = "";             if (row.ORDER_STATUS == "待排产") {                 strclass = 'success';//还有一个active             } else if (row.ORDER_STATUS == "已删除") {                 strclass = 'danger';             } else {                 return {};             }             return {                 classes : strclass             }         },         onEditableSave : function(field, row,                 oldValue, $el) {             $.ajax({                 type : "post",                 url : "/Editable/Edit",                 data : {                     strJson : JSON.stringify(row)                 },                 success : function(data, status) {                     if (status == "success") {                         alert("编辑成功");                     }                 },                 error : function() {                     alert("Error");                 },                 complete : function() {                 }             });         },         columns : [                 {                     checkbox : true                 },                 {                     field : 'number',//可不加                       title : '序号',//标题  可不加                       formatter : function(value,                             row, index) {                         return index + 1;                     }                 }, {                     field : 'id', //列ID同时也是指定要显示的数据的ID                       title : '课程标识',                     width : 100,                     align : 'center',                     valign : 'center',                     sortable : true,                 }, {                     field : 'coursename',                     title : '课程名称',                     align : 'center',                     valign : 'center',                     sortable : true                 }, {                     field : 'dictionaryid',                     title : '课程状态',                     align : 'center',                     valign : 'center',                     sortable : true                 }, {                     field : 'remark',                     title : '课程描述',                     align : 'center',                     valign : 'center',                     sortable : true//false禁用可排序的所有列。                 } ]     });     }