current position:Home>Layui user defined functions and calls

Layui user defined functions and calls

2021-08-25 22:42:50 Don't eat shallow water fish

Control

form

Time range

 

The page display

scene

Select the start time and end time table changes in the page

 

Use

html Code

<div>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"> Date range </label>
            <div class="layui-inline" id="test6">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="start_date" class="layui-input" placeholder=" Start date ">
                </div>
                <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="end_date" class="layui-input" placeholder=" End date ">
                </div>
            </div>
        </div>
    </div>
</form>

</div>

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

JS Code

<script type="text/javascript">

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

    //  Custom initialization table method 
    window.initTable = function(start_date, end_date){
        table.render({
        elem: '#detail'
        ,url: "{% url 'index:detail_data' %}"  //  Back end requested URL
        ,where: {
            "data_center": $("#data_center").val()  //  The value of the drop-down box 
            ,"start_date": start_date  //  Starting time 
            ,"end_date": end_date      //  End time 
        }
        // ,method: 'post'
        ,page: true
        ,cols: [[
            {field: 'data_center', title: ' Data Center ', width: 150}
            ,{field: 'change', title: ' change '}
            ,{field: 'num', title: ' Number '}
            ,{field: 'reason', title: ' reason '}
            ,{field: 'diff_date', title: ' Time '}
            ,{field: '', title: ' operation ', align:'center', toolbar: '#barDemo'}
        ]]
        ,response: {
            statusName: 'code' // Field name that specifies the data status , Default :code
            ,statusCode: 10000 // Specify the successful status code , Default :0
            ,msgName: 'message' // Specify the field name of the status information , Default :msg
            ,countName: 'total' // Field name that specifies the total number of data , Default :count
            ,dataName: 'data' // Specifies the field name of the data list , Default :data
        }
    });
    }

    //  Get close to N God - Custom function 
    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;
    }

    //  Processing month - Custom function 
    window.doHandleMonth = function (month) {
        var m = month;
        if(month.toString().length == 1){
            m = "0" + month;
        }
        return m;
    }

    // Date range 
    var start = laydate.render({
        elem: '#start_date',
        max: -1, //  The maximum value is yesterday 
        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())  //  Call the custom initialization table method 
        }
    });
    var end = laydate.render({
        elem: '#end_date',
        max: -1, //
        value: getRecentDay(-1), //  The default time is yesterday 
        done: function (value, date){
            start.config.max = {
                year: date.year,
                month: date.month-1,
                date: date.date
            }
            initTable($('#start_date').val(), value)  //  Call the custom initialization table method 
        }
    });

    //  Call the custom initialization table method ( Page initialization )
    initTable(getRecentDay(-30), getRecentDay(-1));
});

</script>

 

summary

stay layui.use Of {} Inside Defined function

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

stay layui.use Of {} Inside call

func_name(params)

 

copyright notice
author[Don't eat shallow water fish],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825224246980W.html

Random recommended