Layui-自定义函数及调用

控件

表格

时间范围

页面展示

场景

页面中选择开始时间和结束时间表格变化

使用

html代码

<div>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-inline" id="test6">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="start_date" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="end_date" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>
    </div>
</form>

</div>

<table id="detail" lay-filter="detail"></table>

JS代码

<script type="text/javascript">

layui.use(['table', 'layer', 'form'], function (){
    var table = layui.table
    ,layer = layui.layer
    ,form = layui.form
    ,laydate = layui.laydate;

    // 自定义初始化表格方法
    window.initTable = function(start_date, end_date){
        table.render({
        elem: '#detail'
        ,url: "{% url 'index:detail_data' %}"  // 后端请求的URL
        ,where: {
            "data_center": $("#data_center").val()  // 下拉框的值
            ,"start_date": start_date  // 开始时间
            ,"end_date": end_date      // 结束时间
        }
        // ,method: 'post'
        ,page: true
        ,cols: [[
            {field: 'data_center', title: '数据中心', width: 150}
            ,{field: 'change', title: '变化'}
            ,{field: 'num', title: '数量'}
            ,{field: 'reason', title: '原因'}
            ,{field: 'diff_date', title: '时间'}
            ,{field: '', title: '操作', align:'center', toolbar: '#barDemo'}
        ]]
        ,response: {
            statusName: 'code' //规定数据状态的字段名称，默认：code
            ,statusCode: 10000 //规定成功的状态码，默认：0
            ,msgName: 'message' //规定状态信息的字段名称，默认：msg
            ,countName: 'total' //规定数据总数的字段名称，默认：count
            ,dataName: 'data' //规定数据列表的字段名称，默认：data
        }
    });
    }

    // 获取近N天-自定义函数
    window.getRecentDay = function (day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000*60*60*24*day;
        today.setTime(targetday_milliseconds);
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear+"-"+tMonth+"-"+tDate;
    }

    // 处理月份-自定义函数
    window.doHandleMonth = function (month) {
        var m = month;
        if(month.toString().length == 1){
            m = "0" + month;
        }
        return m;
    }

    //日期范围
    var start = laydate.render({
        elem: '#start_date',
        max: -1, // 最大值为昨天
        value: getRecentDay(-30),
        done: function (value, date){
            if(value && (value>$('#end_date').val())){
                $('#end_date').val();
            }
            end.config.min = {
                year: date.year,
                month: date.month-1,
                date: date.date
            };
            initTable(value, $('#end_date').val())  // 调用自定义初始化表格方法
        }
    });
    var end = laydate.render({
        elem: '#end_date',
        max: -1, //
        value: getRecentDay(-1), // 默认昨天时间
        done: function (value, date){
            start.config.max = {
                year: date.year,
                month: date.month-1,
                date: date.date
            }
            initTable($('#start_date').val(), value)  // 调用自定义初始化表格方法
        }
    });

    // 调用自定义初始化表格方法（页面初始化）
    initTable(getRecentDay(-30), getRecentDay(-1));
});

</script>

总结

在layui.use的{}内定义函数

window.func_name = function (params) {
    ...
}

在layui.use的{}内调用

func_name(params)