Layui-自定義函數及調用

• 2021 年 8 月 22 日
• 筆記
• layui, 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)