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)
让记忆空白!