bootstrap-table和layer

bootstrapTable

$("#prjTable").bootstrapTable({
        url : basePath + "prj/info/listPagerPrj",

        columns : [ {

            checkbox : true,

        },{
             field: "id",
             title: "序号"
             sortable : true, //点击表头排序
             visible : false, // 隐藏列                                                                             
        },{
            field : "projectId",
            title : "项目编号",
            align : "center",
        },{
            field : "projectName",
            title : "项目名称",
            align : "center",
        },{
            field : "leaderMan",
            title : "项目经理",
            align : "center",
        },{
            field : "customerName",
            title : "客户",
            align : "center",
        },{
            field : "planToStart",
            title : "计划开始时间",
            align : "center",
            formatter : function(value, row, index) {
                return row.planToStart.substr(0,10);
            }
        },{
            field : "planToEnd",
            title : "计划结束时间",
            align : "center",
            formatter : function(value, row, index) {
                return row.planToEnd.substr(0,10);
            }
        },{
            field : "gemo",
            title : "项目范围",
            align : "center",
            formatter : function(value, row, index) {
                return "<a href="javascript:void(0);" onclick=getGemo(" + """ + row.projectId + """ + ")>查看范围</a>"
            }
        },{
            field : "_op",
            title : "操作",
            align : "center",
            formatter : function(value, row, index) {
                return "<a href="javascript:void(0);" onclick=getPrjInfo(" + """ + row.projectId + """ + ")>查看明细</a>"
            }
        }],
        method : "post", //请求方式(*)
        striped : true, //是否显示行间隔色
        cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
        pagination : true, //是否显示分页(*)
        sortable : false, //是否启用排序
        sortName : "id", //排序的列名(必须是columns里有的)
        sortOrder : "desc", //排序方式
      //queryParams: oTableInit.queryParams,//传递参数(*)
        sidePagination : "server", //分页方式：client客户端分页，server服务端分页(*)
        pageNumber : 1, //初始化加载第一页，默认第一页
        pageSize : 15, //每页的记录行数(*)
        pageList : [ 30, 60, 100 ], //可供选择的每页的行数(*)
        search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch : true, //精确查找
        showColumns : false, //是否显示所有的列
        showRefresh : false, //是否显示刷新按钮
        minimumCountColumns : 2, //最少允许的列数
        clickToSelect : true, //是否启用点击选中行
      //height : getHeight(), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        height: 950,
        uniqueId : "id", //每一行的唯一标识，一般为主键列
        showToggle : true, //是否显示详细视图和列表视图的切换按钮
        cardView : false, //是否显示详细视图
        detailView : false, //是否显示父子表
        showExport : true,//按格式导出
        queryParamsType : "limit",
        toolbar: "#toolbar", //工具按钮用哪个容器
        contentType : "application/x-www-form-urlencoded; charset=UTF-8",
        checkboxHeader : true,
        singleSelect : true,
        striped : true,
        showColumns: true, // 开启自定义列显示功能
        queryParams: function queryParams(params) {   //设置查询参数
        console.log(params);
         var param = {
           //这里是在ajax发送请求的时候设置一些参数 params有什么东西，自己看看源码就知道了
           page: params.offset / params.limit + 1,
           rows: params.limit,
           sort : "id",
           order : params.order,
           //下面写自定义查询栏里的内容或者跳转到该页面是查询所带的参数
           projectId : $("#projectId").val(),
           projectName : $("#projectName").val(),
         };
        onLoadSuccess: function(){  //加载成功时执行  
             layer.msg("数据加载成功!", {time : 1500, icon : 6});
        },  
           onLoadError: function(){  //加载失败时执行  
             layer.msg("加载数据失败", {time : 1500, icon : 5});
           }                                
    });
}

/*
排序所需要的参数
sortable : true, //是否启用排序
sortOrder : "desc", //排序方式
sortName : "id",
查询参数必须带:order : params.order,
*/
<!-- -------------------------- 按钮组样式 ----------------------------------- -->
<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接</button>
![button效果图](http://img.blog.csdn.net/20180202085450195?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXdwNTIxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

//查询
function queryPrjInfo() {       
    $("#prjTable").bootstrapTable("refresh");
  }

 //重置 
function resetPrjInfo() {
    document.getElementById("searchForm").reset()
    $("#prjTable").bootstrapTable("refresh");
 }

---

columns列属性

   BootstrapTable.COLUMN_DEFAULTS = {
       radio: false,// 有否radio，有则options.singleSelect设为真
       checkbox: false,// 有否checkbox，options.singleSelect设为真，checkbox单选
       checkboxEnabled: true,// 复选框是否可选
       field: undefined,// 后台数据的id号
       title: undefined,// 内容文案
       titleTooltip: undefined,// title属性文案
       "class": undefined,// 样式
       align: undefined, // tbody、thead、tfoot文本对齐情况
       halign: undefined, // thead文本对齐情况
       falign: undefined, // tfoot文本对齐情况
       valign: undefined, // 垂直对齐情况
       width: undefined, // 宽度，字符串或数值输入，均转化为"36px"或"10%"形式
       sortable: false,// 是否可排序，options.sortable设置为真的时候可用
       order: "asc", // asc, desc
       visible: true,// 可见性
       switchable: true,// 该条目可以通过筛选条目按钮切换显示状态
       clickToSelect: true,
       formatter: undefined,
       // 以function(field,row,index){}格式化数据，field后台字段，row行数据，index对应row的序号值
       // 无配置时以title显示，有配置时以返回值显示
       footerFormatter: undefined,// 填充表尾内容
       events: undefined,// 数据格式为[{"click element":functionName}],回调中传入（value,row,index）
       sorter: undefined,// 调用sorter函数或window[sorter]函数进行排序，高优先级
       sortName: undefined,// 进行排序的字段名，用以获取options.data中的数据
       cellStyle: undefined,// 调用cellStyle函数或window[cellStyle]函数添加样式以及类; 以function(field,row,index){}设置单元格样式以及样式类，返回数据格式为{classes:"class1 class2",css:{key:value}}
       searchable: true,// 设置哪一列的数据元素可搜索
       searchFormatter: true,
       cardVisible: true// 设为否时，卡片式显示时该列数据不显示
   };

---

layer弹窗

layer.open({  
  type: 2,  //基本层类型 0(信息框,默认) 1(页面层) 2(iframe层) 3(加载层) 4(tips层)
  title: "添加项目信息",  
  closeBtn: 1,  //layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
  shade: [0.8, "#000"],  //弹层外区域。默认是0.3透明度的黑色背景（"#000"）。
  border: [0],    
  area: ["1000px", "1000px"],  //宽高
  btn: ["<div style="width:80px ;text-align:center">保存</div>","<div style="width:80px ;text-align:center">重置</div>"],
  content: webBasePath + "/prj/info/addPageprj/"+loginDepartmentId,
  success: function(layero, index){  //层弹出后的成功回调方法 

     },
 yes: function(index,layero){
  save();
  },
  btn2: function(index,layero){
  reset();
  },
  });