bootstrapTable 学习使用

Bootstrap离线API

Bootstrap Table 离线API

<input type="button" id="btn_searcher" value="查询" class="btn btn-primary"></input> 
  <input type="reset" id="btn_reset" class="btn btn-reset"></input>
#1.初始化列表
$(function() {
        $('#redeploymentTable')
                .bootstrapTable(
                        {
                            url : 'redeploymentList.json', 　　　　　//请求后台的URL（*）
                            method : 'post',　　　　　　　　　　　　　　//请求方式（*）
                         　　dataType:'json',
                            contentType : "application/x-www-form-urlencoded",
                            toolbar : '#toolbar',　　　　　　　　　　 //工具按钮用哪个容器
                        //  undefinedText: "",                　　 //当数据为 undefined 时显示的字符
                            striped : true, 　　　　　　　　　　　　　　//是否显示行间隔色
                            cache : false, 　　　　　　　　　　　　　　 //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                            pagination : true, 　　　　　　　　　　　　//是否显示分页（*）
                            pageSize : 5, 　　　　　　　　　　　　　　　//每页显示的记录数
                            pageNumber : 1, 　　　　　　　　　　　　　　//当前第几页
                            pageList : [ 5, 10, 15, 20, 25 ], 　　 //记录数可选列表
                            sortable : false,　　　　　　　　　　　　  //是否启用排序
                            sortOrder : "asc",　　　　　　　　　　　　 //排序方式
                            sidePagination : "server", 　　　　　　　　//分页方式：client客户端分页，server服务端分页（*）
                            //查询参数,每次调用是会带上这个参数，可自定义
                            queryParams : queryParams,
                            //  search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                            //  strictSearch: true,
                            //  showColumns: true,                  //是否显示所有的列
                            //  showRefresh: true,                  //是否显示刷新按钮
                            minimumCountColumns : 2, 　　　　　　　　　//最少允许的列数
                            responseHandler : responseHandler,
                            clickToSelect : true,　　　　　　　　　　　　//是否启用点击选中行
                            //  height: 500,                         //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                            uniqueId : "id", 　　　　　　　　　　　　　　 //每一行的唯一标识，一般为主键列
                            //  showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                            cardView : false,　　　　　　　　　　　　　　 //是否显示详细视图
                            detailView : false, 　　　　　　　　　　　　　//是否显示父子表
                            columns : [
                                    {
                                        checkbox : true
                                    },
                                    {
                                        field : "contract",
                                        title : "合同名称",
                                        align : 'center'
                                    },
                                    {
                                        field : "company",
                                        title : "用户单位名称",
                                        align : 'center'
                                    },
                                    {
                                        field : "website",
                                        title : "网站/系统名称",
                                        align : 'center'
                                    },
                                    {
                                        field : "technologyName",
                                        title : "技术联系人姓名",
                                        align : 'center'
                                    },
                                    {
                                        field : "technologyPhone",
                                        title : "技术联系人电话",
                                        align : 'center'
                                    },
                                    {
                                        field : "sdeployDate",
                                        title : "变更部署时间",
                                        align : 'center'
                                    },
                                    {
                                        field : "content",
                                        title : "变更服务内容",
                                        align : 'center'
                                    },
                                    {
                                        title : '操作',
                                        field : 'id',
                                        align : 'center',
                                        formatter : function(value, row, index) {
                                            var id = row.id;
                                            var e;
                                            e = '<a href ="#" title="修改"><span class="fa fa-wrench" onclick="edit(\''
                                                    + id
                                                    + '\')"></span></a> '
                                                    + '<a href ="#" title="删除"><span class="fa fa-times" onclick="dele(\''
                                                    + id + '\')"></span></a> ';
                                            return e;
                                        },
                                    } ]
                        });

   　　　　 });

#2.设置查询条件，把分页，查询条件，排序等信息拼接成一个models字符串对象传递至后台
    function queryParams(params) {
        var searchTerm = $("#formSearch").serializeObject();
        var str = {
            "page" : this.pageNumber,
            "pageSize" : this.pageSize,
            "filter" : {
                "filters" : [ {
                    "field" : "company",
                    "value" : searchTerm.company
                }, {
                    "field" : "contract",
                    "value" : searchTerm.contract
                }, {
                    "field" : "content",
                    "value" : searchTerm.content
                }, {
                    "field" : "sdeployDate",
                    "value" : searchTerm.sdeployDate
                } ]
            }
        };
        var baseData = JSON.stringify(str);
        var param = {
            models : baseData
        }
        return param;
    }
    //查询
    $("#btn_searcher").click(function() {
        searchFuntable();
    });
    function searchFuntable() {
        var opt = {
            url : 'redeploymentList.json'
        }
        $('#redeploymentTable').bootstrapTable('refresh', opt);
    };
　　#3.返回查询列表数据
       function responseHandler(res) {
            if (res) {
                return {
                    "rows" : res.list,
                    "total" : res.total
                };
            } else {
                return {
                    "rows" : [],
                    "total" : 0
                };
            }
        }
#4.行修改、删除
　　//编辑
   function edit(id) {
        $('#myModal').load('redeploymentEdit?id=' + id);
    }

    //批量删除
    $('#remove').click(function() {
        deleteReployDate();
    });
    function deleteReployDate() {
        //获取行id
        var rows = $('#redeploymentTable').bootstrapTable('getSelections');
        var ids = "";
        for (var i = 0; i < rows.length; i++) {
            ids += rows[i]['id'] + ",";
        }
        ids = ids.substring(0, ids.length - 1);
        //alert(ids+"-----ids-------");
        if (rows.length > 0) {
            layer.confirm('您确认删除选中记录？', {
                btn : [ '删除' ]
            //按钮
            }, function() {
                delcfm(ids)
            });
        } else {
            layer.msg("请选择删除项", {
                icon : 2
            });
            return;
        }
    }

    //删除-单条
    function dele(id) {
        layer.confirm('您确认删除选中记录？', {
            btn : [ '删除' ]
        //按钮
        }, function() {
            delcfm(id);
        });
    }
    //删除
    function delcfm(ids) {
        $.ajax({
            url : 'redeploymentDelete.json',
            data : 'ids=' + ids,
            type : 'post',
            success : function(data, textStatus, jqXHR) {
                layer.msg('删除成功', {
                    icon : 1
                });
                $('#redeploymentTable').bootstrapTable('refresh');
            },
            error : function(jqXHR, textStatus, errorThrown) {
                layer.msg(textStatus, {
                    icon : 2
                });
            }
        });
    }

----------------------------------------

1.其他方法备注:
$('#tableId').bootstrapTable('destroy');//刷新必须要添加这个销毁，否则新增、修改、查看数据可能加载出现问题。
var str =$("#tableId").bootstrapTable('getData');//获取表格的所有内容行
$('#tableId').bootstrapTable('refresh'); //重置后刷新
var rows = $('#tableId').bootstrapTable('getSelections');//获取选中行数据

$('#adjustedOAId').selectpicker('val', ''); //bootstrap 多选下拉框置空 selectpicker
$("#adjustedOAId").empty();//bootstrap 多选下拉框置空 selectpicker
$('#tableId').bootstrapTable('hideColumn', 'Id'); //隐藏Id列

2.获取单元格内容(操作)

 formatter : function(value, row, index) {
               var id = row.batchId;
               var e;
                e ='<a href ="#" title="同意" class="taskagent_agreen"><span  onclick="agree(\''+id+ '\',\''+index+ '\')">同意</span></a> '
                 + '<a href ="#" title="拒绝" class="taskagent_reject"><span  onclick="reject(\''+id+ '\',\''+index+ '\')">拒绝</span></a> ';
                    return e;
           },

 function agree(id,index){
       //获取index下的意见信息
        var yj=$("#taskTableId tr[data-index='"+index+"']").find("td a[data-name='content']").html();
       /*if( yj=="" || yj=="undefined" || yj==" "){
           alert("请先填写审批意见！");
           return;
       } */
     // layer.msg("请稍等...", {icon: 6,time: 3000});
       $.ajax({
           type:'post',
           url:'taskAgentsController/processPass.json',
           data:{"id":id,"yj":yj},
           success : function(result) {
               layer.msg(result.ajaxResultJson.msg, {icon: 6,time: 3000});
               $("#taskTableId").bootstrapTable('refresh');
           },
           error : function( e){
               alert("系统异常！");
           }
       });
   } 

相关链接 : http://blog.csdn.net/rickiyeat/article/details/56483577

BootstrapValidator详细教程: https://blog.csdn.net/u013938465/article/details/53507109