Chart Loading Deformation in Console#
Enter the console from other menus to trigger btn-refresh resize
// Enter the console from other buttons to trigger btn-refresh resize
let chart = Echarts.getInstanceByDom($('#line-chart')[0]);
stat(chart,false);
$(document).on("click", ".btn-refresh", function () {
setTimeout(function () {
chart.resize();
}, 0);
});
Controller Method Request Event#
// Confirmation box before submission Method 1
Form.api.bindevent($("form[role=form]"), function(data, ret){
// If we need to redirect after successfully submitting the form, we can use location.href="link"; for redirection
//parent.location.reload();// Refresh the parent page here, can change to other code
// Successful submission logic
}, function(data, ret){
Layer.closeAll('dialog');
}, function(success, error){
// The third parameter of bindevent is the callback before submission
// If we need to process some data before form submission, we can handle it in this method
// Note that if we need to prevent the form, we can use return false; here
// If we need to submit the form again after processing, we can use submit to submit, as follows
//Form.api.submit(this, success, error);
var self = this;
Layer.confirm('yes or no', {
btn: [__('OK'),__('Cancel')] // Buttons
}, function(){
//Layer.closeAll('dialog');
//self this
Form.api.submit(self, success, error);
//return false;
}, function(){
//Layer.closeAll('dialog');
//return false;
});
return false;
});
// Successful submission logic Begin (Logic reference Close window, show message box, refresh page after confirmation box closes)
Fast.api.close(1); // Close the window and return data
let _p = parent
parent.Layer.alert(data,{closeBtn: false},()=>{
_p.location.reload ();// Refresh the parent page here, can change to other code
_p.Layer.closeAll('dialog');
})
return false;
// Successful submission logic End
// Confirmation box before submission Method 2 (Deprecated, can only be used as reference)
$("#submitbtn").on("click", function(){
let that = this;
let content = __('Confirm Application Configuration?');
Layer.confirm(content, {
btn: [__('OK'),__('Cancel')] // Buttons
}, function(){
$(that).closest("form").trigger("submit");
Layer.closeAll('dialog');
parent.location.reload();// Refresh the parent page here, can change to other code
}, function(){
Layer.closeAll('dialog');
});
return false;
});
Form.api.bindevent($("form[role=form]"), function(data, ret){
// If we need to redirect after successfully submitting the form, we can use location.href="link"; for redirection
parent.location.reload();// Refresh the parent page here, can change to other code
}, function(data, ret){
}, function(success, error){
// The third parameter of bindevent is the callback before submission
// If we need to process some data before form submission, we can handle it in this method
// Note that if we need to prevent the form, we can use return false; here
// If we need to submit the form again after processing, we can use submit to submit, as follows
//Form.api.submit(this, success, error);
});
//Controller.api.bindevent();
}
Layer.open and Layer.confirm#
// Layer.open and Layer.confirm coexist
$(document).on("click", ".setTemplate", function (index,raw){
var area = ['40%','40%'];
Layer.open({
content: Template("setTemplateTpl",[]),
zIndex: 99,
area: area,
title: __('Set Template Name'),
resize: false,
type:1,
btn: [__('Confirm'), __('Close')],
yes: function (index, layero) {
let tplName = $('#tplName').val()
if (!tplName){
Toastr.error(__('Cannot be empty'));
return false
}
var templateJson = {};
var formData = $('form').serializeArray();
$.each(formData, function() {
if ($.inArray(this.name,['__token__','begin_time','loop_switch']) < 0){
templateJson[this.name] = this.value;
}
});
let row = {
name: tplName,
templateJson:JSON.stringify(templateJson)
}
let content = __('Do you want to save the template?');
Layer.confirm(content, {
type:0,
btn: [__('OK'),__('Cancel')] // Buttons
}, function(){
Fast.api.ajax({
url: "game/game/setTemplate",
data: {
row:row
}
}, function (data) {
layer.closeAll();
},function (){
layer.closeAll('dialog');
});
//Layer.closeAll();
}, function(){
Layer.closeAll('dialog');
});
},
btn2: function(index, layero){
// Callback for button [Button Two]
layer.close(index)
//return false // Disable this button
},
success: function (layero, index) {
// Bind time control
Form.events.datetimepicker($("form"));
}
});
/*let content = __('Do you want to save the template?');
Layer.confirm(content, {
btn: [__('OK'),__('Cancel')] // Buttons
}, function(){
Fast.api.open("game/game/setTemplate", __('Set Template Name'), {
area:['400px', '200px']
});
Layer.closeAll('dialog');
}, function(){
Layer.closeAll('dialog');
});*/
})
// Button application and Layer.open bind time control
{field: 'operate', title: __('Operate'), table: table, events: {
'click .btn-chooseone': function (e, value, row, index) {
if (row.game_mode == 3 && row.play_mode == 0){
var area = ['60%','80%'];
Layer.open({
content: Template("selectTimeTpl",[]),
zIndex: 99,
area: area,
title: __('Begin_time'),
resize: false,
btn: [__('Confirm'), __('Close')],
yes: function (index, layero) {
let begin_time = $('#begin_time').val()
if (!begin_time){
Toastr.error(__('Cannot be empty'));
return false
}
let templateJson = row.templateJson
templateJson.begin_time = begin_time
Fast.api.close({templateJson: templateJson});
layer.closeAll();
},
btn2: function(index, layero){
// Callback for button [Button Two]
layer.close(index)
//return false // Disable this button
},
success: function (layero, index) {
// Bind time control
Form.events.datetimepicker($("form"));
}
});
}else{
let content = __('Confirm Use Template?');
Layer.confirm(content, {
btn: [__('OK'),__('Cancel')] // Buttons
}, function(){
Fast.api.close({templateJson: row.templateJson});
Layer.closeAll('dialog');
}, function(){
Layer.closeAll('dialog');
});
}
},
}, formatter: function () {
return '<a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs"><i class="fa fa-check"></i> ' + __('Use Template') + '</a>';
},
},
Template Iterating Object Dictionary#
<script id="catJsonTpl" type="text/html">
<div class="showTpl wrap">
<%for (var key in data) {%>
<div class="col-4"><%=key%>:<%=data[key]%></div>
<%}%>
</div>
</script>
Time Control autocomplete off Global and Local Settings#
// Set $(this).attr('autocomplete','off'); in public/assets/js/require-form.js and re-compress js
$(".datetimerange", form).each(function () {
$(this).attr('autocomplete','off');
var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
$(this).on('apply.daterangepicker', function (ev, picker) {
callback.call(picker, picker.startDate, picker.endDate);
});
$(this).on('cancel.daterangepicker', function (ev, picker) {
$(this).val('').trigger('blur');
});
$(this).daterangepicker($.extend(true, options, $(this).data()), callback);
});
// Set in the current controller js
table.on('post-body.bs.table',function (e,settings,json,xhr) {
$('.datetimerange').each(function () {
$(this).attr('autocomplete','off')
})
});
// Generated input
/extend/fast/Form.php, find the return in public function input and add it yourself. Then regenerate
// Search box form
If it is the search at the top of the view page, then modify it in
public/assets/js/bootstrap-table-commonsearch.js around line 54. Just add it in FORM
input data-rule Control Effectiveness#
// Filter Chinese and spaces
$("input[name='row[utr]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')
// Filter non-case-sensitive letters and numbers
$("input[name='row[backu]']").attr('data-rule',"required;filter(^A-Za-z0-9)")
// Control data-rule effectiveness through js
$("input[name='row[type]']").on("click",function(){
var menu_li = $(this).val();
if(menu_li==0){
$("#rechargeShow").show();
$("#withdrawShow").hide();
$("select[name='row[channelID]']").attr('data-rule','required')
$("select[name='row[channelID]']").attr('disabled',false)
$("input[name='row[utr]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')
$("input[name='row[utr]']").attr('disabled',false)
$("input[name='row[usdtAccount]']").attr('disabled','disabled')
$("input[name='row[usdtAccount]']").remove('data-rule')
}
else{
$("#rechargeShow").hide();
$("#withdrawShow").show();
$("select[name='row[channelID]']").attr('disabled','disabled')
$("select[name='row[channelID]']").remove('data-rule')
$("input[name='row[utr]']").attr('disabled','disabled')
$("input[name='row[utr]']").remove('data-rule')
$("input[name='row[usdtAccount]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')
$("input[name='row[usdtAccount]']").attr('disabled',false)
}
})
selectpage Linked Query#
The parameters data-params of the selectpage dynamic dropdown component can be used for search filtering
The following code listens to the dynamic parameters of $("#c-type") selectpage
$("#c-name").data("params", function (obj) {
return {custom: {type: $("#c-type").val()}};
});
selectpage Example (Multi-field Search, etc.)#
Additional parameters data-params='{"custom[status]":["notin",0]}'
Custom display data-field="name" data-format-item="{id} | {name}"
Multi-field search data-andOr="OR" data-search-field="id,name"
<input id="c-channel" data-source="channel/index" data-params='{"custom[status]":["notin",0]}' data-order-by="id" data-andOr="OR" data-search-field="id,name" data-primary-key="id" data-field="name" data-format-item="{id} | {name}" class="form-control selectpage" name="row[channel]" type="text">
Custom Search Time Interval Control Selection of Hours, Minutes, and Seconds#
In require-form.js find daterangepicker and modify options to include timePicker: true
To close debug mode, you need to modify require-backend.min.js or re-compress php think min -m backend -r all
var options = {
timePicker: true,
autoUpdateInput: false,
timePickerSeconds: true,
timePicker24Hour: true,
autoApply: true,
locale: {
format: 'YYYY-MM-DD HH:mm:ss',
customRangeLabel: __("Custom Range"),
applyLabel: __("Apply"),
cancelLabel: __("Clear"),
},
ranges: ranges,
};
Trigger Table Refresh#
$(".btn-refresh").trigger("click")