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)