H+的使用

表格HTML部分

<table id="tt"  data-click-to-select="true" data-mobile-responsive="true" data-sort-name="OID" data-sort-order="asc" data-toggle="table">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th> <!--- 多选框 -->
            <th data-field="MONTH" data-formatter="changeDateFormat"></th>  <!--- 格式化时间 -->
            <th data-field="CARDID" data-formatter="displaycolor"></th>  <!--- 改变字体颜色 -->
            <th data-field="OID"  data-sortable="true"></th> <!--- 排序（添加排序table要加上data-sort-name="OID" data-sort-order="asc"属性） -->
            <th data-field="CHANGQU_NAME"></th>
        </tr>
    </thead>
</table>

操作表格的函数

改变字体颜色

//是否有效
   function displaycolor(value, row, index) {
       var a = "";
       if (value == "Y") {
           var a = '<span style="color:blue;">有效</span>';
       } else {
           var a = '<span style="color:red;">无效</span>';
       }
       return a;
   }

格式化时间

/*格式化日期格式*/
   function changeDateFormat(cellval) {
       if (cellval != null) {
           var date = new Date(cellval);
           var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
           var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
           return date.getFullYear() + "-" + month + "-" + currentDate;
       }
   }

初始化表格

//初始化表格
$('#dg').bootstrapTable({
    height: '500',//设置高
    toolbar: '#toolbar',//工具按钮用哪个容器
    sortable: true,//是否启用排序
    sortName: 'OID',//排序字段
    sortOrder: 'asc',//排序方式
    striped: true,//是否显示行间隔色
    singleSelect: true,//是否选中一行
    showRefresh: false,//是否显示刷新按钮
    pageList: [5, 10, 25, 50],//可供选择的每页行数
    local: 'zh-CN',
    search: false,//是否显示表格搜索
    pagination: true,//是否显示分页
    sidePagination: 'server',//分页方式：client客户端分页，server服务端分页（*）
    checkboxHeader: false, //设置行头全部选中checkbox是否开启
    queryParamsType: "limit",
    queryParams: function (params) {
        var data = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
            rows: params.limit,
            page: (params.offset / params.limit) + 1,
            //如果有排序需求，要将排序字段和排序方式传到后台，拼接sql
            sortName: params.sort,
            sortOrder: params.order,
            //请求参数
            //增加参数
        };
        return data;
    },
    onLoadSuccess: function (data) {
        //表格刷新请求数据后触发
        //接收返回的数据

        //可以在这里判断登录是否过期（有无页面权限）
        if (data.rows == null) {
            //登录过期等页面
            return false;
        }
    },
    onDblClickRow: function (row) {
        //双击行触发
    },
    url:''//请求后台的地址
});

****前端分页所需要的json格式与服务器端分页所需的json格式不同****
    前端分页：
sidePagination: “client”，
对应的json格式必须为：
[{"id":1,"name":"张三","age”"22},…]

服务器分页：
sidePagination: “server”，
对应的json格式必须为：
{"total":20,"rows":[{"id":1,"name":"张三","age":22},…]}

部分源码

(function ($) {
    'use strict';

    $.fn.bootstrapTable.locales['zh-CN'] = {
        formatLoadingMessage: function () {//这个函数改变表格加载中文本
            return '正在努力地加载数据中，请稍候……';
        },
        formatRecordsPerPage: function (pageNumber) {
            return '每页显示 ' + pageNumber + ' 条记录';
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
        },
        formatSearch: function () {
            return '搜索';
        },
        formatNoMatches: function () {
            return '没有找到匹配的记录';
        },
        formatPaginationSwitch: function () {
            return '隐藏/显示分页';
        },
        formatRefresh: function () {
            return '刷新';
        },
        formatToggle: function () {
            return '切换';
        },
        formatColumns: function () {
            return '列';
        }
    };

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

})(jQuery);

隐藏列

$('#tt').bootstrapTable('hideColumn', '列名');//隐藏列

bootstrapTable排序

要在把排序方式传到后台，在SQL语句最后面加上order by xx

获取选中行数据

var row = $("#dg").bootstrapTable('getSelections');

清空表格

$('#dg').bootstrapTable("removeAll");//清空表格

刷新表格

$('#dg').bootstrapTable('refresh');

表格取消选中

$('#table').bootstrapTable('uncheckAll');  //取消所有选中

//可以传一个变量自定义选中或取消哪一行
$('#table').bootstrapTable('check', 1); ///选中第二行
$('#table').bootstrapTable('uncheck', 1); //取消选中第二行

清空表单

document.querySelector('#form1').reset();//清空表单

弹框关闭触发函数

//关闭清空
$('#questionDlg').on('hide.bs.modal', function () {

})

layer 右下脚弹窗

//layer 右下脚弹窗
layer.open({
    type: 1,
    skin: 'layui-layer-demo', //样式类名
    title: '提示',
    closeBtn: 0, //不显示关闭按钮
    shade: [0],
    area: ['250px', '150px'],
    offset: 'rb', //右下角弹出
    time: 2000, //2秒后自动关闭
    anim: 2,
    content: '我是内容'
});

layer弹出窗阻止默认关闭

有时点确定并不想关闭弹框，

将确认按钮的事件名改为yes

layer.open({
    content: '测试回调',
    yes: function(index, layero){
         //do something
         layer.close(index); //如果设定了yes回调，需进行手工关闭
    }
}); 

打开关闭窗口

打开

$('#dlo').modal('show');

关闭

$('#dlo').modal('hide');

加载中动画

需要css规范文本内容

.layui-layer-loading0 {
    width: 180px !important;
    padding-top: 33px;
    color:#fff;
}

出现

var indexload = layer.load(0, { content: '加载中，请稍候。。。', shade: 0.3 });

关闭

layer.close(indexload);

单选多选按钮初始化

$(document).ready(function () {
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
    });
});

询问框

//询问框
var qx = parent.layer.confirm('确定要删除？', {
    btn: ['确定', '取消'], //按钮
    //shade: false //不显示遮罩
}, function () {
    //确认
    parent.layer.close(qx);//关闭询问框
}, function () {
    //取消
    parent.layer.close(qx);//关闭询问框
});

输入框的tip

//tip
function showtip(id) {
    var showtip;
    $(id).hover(function () {
        $(this).val() == '' ? showtip = layer.tips('此项是必填项', id) : '';
    }, function () {
        layer.close(showtip)
    });
    $(id).on('input', function () {
        $(this).val() == '' ? $(this).addClass('redborder') : $(this).removeClass('redborder');
    })
}
showtip('#upId');



/////如果是日期选择框；发现oninput函数并不能触发；这里需要根据插件的按钮及回调来控制边框颜色
//实例化日期选择控件
laydate({
    elem: '#D_DATE',
    choose: function (date) { //选择好日期的回调
        $('#D_DATE').val() == '' ? $('#D_DATE').addClass('redborder') : $('#D_DATE').removeClass('redborder');
    },
});
function showtip(id) {
    var showtip;
    $(id).hover(function () {
        $(this).val() == '' ? showtip = layer.tips('此项是必填项', id) : '';
    }, function () {
        layer.close(showtip)
    });
    $(document).on('click', '#laydate_clear', function () {
        $(id).addClass('redborder');
    })
    $(document).on('click', '#laydate_today', function () {
        $(id).removeClass('redborder');
    })
}
showtip('#D_DATE');

Toastr通知

toastr.warning("图片大小不能超过1M", "提示", {
    "positionClass": "toast-bottom-right",
    "timeOut": "1500",
    "closeButton": true,
    "progressBar": true
});

点击清空后时间控件不会重置，这里将它们的选择范围重置

var datetype = 1;
$('#txtstartime').on('click', function () {
    datetype = 1;
})
$('#txtendtime').on('click', function () {
    datetype = 2;
})
$(document).on('click', '#laydate_clear', function () {
    if (datetype == 1) {
        end.min = '2000-01-01';
    } else {
        start.max = '2099-06-16'
    }
})