- 使用 confirm 改变字段状态
{field: 'is_show', searchList: {'0': '下架', '1': '上架'}, title: __('Is_show'), formatter: function (value, row, index) {
if (value == 0) {
return '<button class="btn btn-xs btn-primary">下架</button>';
} else {
return '<button class="btn btn-xs btn-success">上架</button>';
}
}, events: {
'click .btn': function(e, value, row, index){
let t,p;
if (value == 0) {
t = '确认是否上架？';
p = 'is_show=1';
} else {
t = '确认是否下架？';
p = 'is_show=0';
}
Layer.confirm(t, function(index) {
Fast.api.ajax({url: 'ticket/gift_pack/multi', data: {'ids': row.id, 'params': p}}, function () {
Layer.close(index);
table.bootstrapTable('refresh', {});
});
});
}
}},
- 点击表格打开其他tab页面，class 添加 addtabsit
{field: 'status_text', title: __('Status'), operate: false, formatter: function(value, row, index) {
if (row.refundid > 0) {
if (row.orderrefund.status == 1) {
return '<span class="label label-danger">维权完成</span>';
} else if(row.orderrefund.status == 0) {
return '<span class="label label-danger">申请维权</span><!-- <a href="order/refund" class="label label-success addtabsit" title="查看">查看</a>-->';
} else if(row.orderrefund.status == -1) {
value = value + '<br><span style="display: inline-block;margin-top: 5px;" class="label label-primary">维权驳回</span>';
}
}
return value;
}},
- 自定义 button，根据字段状态不同移除指定 button
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
var that = $.extend({}, this);
var table = $(that.table).clone(true);
// operate-edit编辑 perate-del删除
//判断什么时候显示什么时候不显示
if (row.status != 0) {
$(table).data("operate-del", null); // 列表页面隐藏 .编辑operate-edit - 删除按钮operate-del
}
that.table = table;
return Table.api.formatter.operate.call(that, value, row, index);
},
buttons: [
{
name: 'apply',
text: __('处理申请'),
icon: 'fa fa-list',
classname: 'btn btn-warning btn-xs btn-dialog',
url: 'order/refund/apply/id/{id}',
visible: function(row) {
return row['status'] == 0;
}
},
{
name: 'detail',
text: __('Detail'),
icon: 'fa fa-list',
classname: 'btn btn-info btn-xs btn-detail btn-dialog',
url: function(row){
// js 生成url
//var url = location.protocol + '//' + location.host + Fast.api.fixurl('store/store_paiban/workers?id=' + row.id);
return location.protocol + '//' + location.host + Fast.api.fixurl(Table.api.replaceurl('store/order/detail', row, table));
}
},
]
}
- 手动刷新表格
$(".btn-refresh").trigger("click"); // 方法1
table.bootstrapTable('refresh', {}); // 方法2
- 通用的点击图片浏览处理
$('body').on('click', '[data-tips-image]', function () {
var img = new Image();
var imgWidth = this.getAttribute('data-width') || '480px';
img.onload = function () {
var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
Layer.open({
type: 1, area: imgWidth, title: false, closeBtn: 1,
skin: 'layui-layer-nobg', shadeClose: true, content: $content,
end: function () {
$(img).remove();
},
success: function () {
}
});
};
img.onerror = function (e) {
};
img.src = this.getAttribute('data-tips-image') || this.src;
});
- 设置表格打开弹窗比例
var table = $("#table");
table.on('post-body.bs.table', function (e, settings, json, xhr) {
$(".btn-detail").data("area", ["100%", "100%"]);
});
- 表单自定义验证
$("form[role=form]").data("validator-options", {
rules: {
settledmoney: function (element) {
var money = parseFloat($("#c-money").val()).toFixed(2);
var handingfee = parseFloat($("#c-handingfee").val()).toFixed(2);
var taxes = parseFloat($("#c-taxes").val()).toFixed(2);
var settledmoney = (money - handingfee - taxes).toFixed(2);
return settledmoney > 0 ||
'金额输入不正确';
},
account: function (element) {
return this.test(element, "mobile") === true ||
this.test(element, "email") === true ||
'请填写手机号或者邮箱';
}
}
});
//不可见的元素不验证
$("form#add-form").data("validator-options", {
ignore: ':hidden',
rules: {
content: function () {
return ['radio', 'checkbox', 'select', 'selects'].indexOf($("#add-form select[name='row[type]']").val()) > -1;
},
extend: function () {
return $("#add-form select[name='row[type]']").val() == 'custom';
}
}
});
- 表格长字段内容 tooltip 显示
{field: 'content', title: __('Content'), align: 'left', operate: false, formatter: function(value){
let c = '';
if (value.length > 20) {
c = value.substr(0, 20) + '...';
} else {
c = value;
}
return '<span data-toggle="tooltip" data-placement="right" data-original-title="'+ value +'">'+ c +'</span>';
}},
- 表格字段通过js创建二维码
{field: 'custom', title: '绑定二维码', operate: false, formatter: function (value, row, index) {
var h = '<i style="cursor: pointer;" class="fa fa-qrcode show-qrcode" data-id="'+row.id+'"></i>';
if (row.openid) {
h += ' <a href="javascript:void(0)" target="_blank" class="unbind" data-id="'+row.id+'">解除绑定</a>';
}
return h;
}},
$(document).on('click', '.show-qrcode', function(event) {
event.preventDefault();
event.stopPropagation();
var id = $(this).data('id');
var url = location.protocol + '//' + location.host + '/index/index/login?id='+ id + '&id=' + id;
var doc = document.createElement('div');
var qrcode = new QRCode(doc, {
text: url,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
var $content = $(doc).appendTo('body').css({background: '#fff', width: 'auto', height: 'auto'});
Layer.open({
type: 1, area: 400, title: false, closeBtn: 1,
skin: 'layui-layer-nobg', shadeClose: true, content: $content,
end: function () {
$(doc).remove();
},
success: function () {
}
});
});
$(document).on('click', '.unbind', function(event) {
event.preventDefault();
event.stopPropagation();
var id = $(this).data('id');
Layer.confirm('确认解除微信绑定？', function (index) {
Fast.api.ajax({
url: 'store/worker/unbind',
loading: false,
data: {id: id},
success: function (ret) {
Layer.close(index);
Toastr.success("解除成功");
$("a.btn-refresh").trigger("click");
}
});
});
})
- 表单动态select 动态监听
$("#c-option_ids,#c-change_ids").data("params", function (obj) {
// 通过其他选择内容改变 select 内容
const id = $('select[name="row[store_id]"]').val();
return {custom: {store_id: id}};
});
$('select[name="row[store_id]"]').change(function(event) {
// 清除选择
$("#c-option_ids").selectPageClear();
$("#c-change_ids").selectPageClear();
});
- 自定义按钮获取搜索表单内容，实现自定义导出按钮
// 方法1
$('#orderExport').click(function () {
var url = $(this).data('url');
var data = '';
$.each($(".form-commonsearch").find('input,select,textarea').serializeArray(), function (i, j) {
var reg = /operate/g;
var match = reg.exec(j.name);
if (match)
return true;
data += j.name + '=' + j.value + '&';
});
window.top.location = url + '?' + data;
});
// 方法2
$('#orderExport').click(function () {
var url = $(this).data('url');
var filter = {};
var op = {};
$.each($(".form-commonsearch").find('input,select,textarea').serializeArray(), function (i, j) {
var reg = /operate/g;
var match = reg.exec(j.name);
if (match || j.value === '')
return true;
filter[j.name] = j.value;
op[j.name] = '=';
});
window.top.location = url + '?filter=' + escape(JSON.stringify(filter)) + '&op=' + escape(JSON.stringify(op));
});
// 方法3
$(document).on("click", "#orderExport", function () {
var url = $(this).data('url');
var options = table.bootstrapTable('getOptions');
var search = options.queryParams({});
var filter = search.filter;
var op = search.op;
location.href = url + '?filter=' + filter + '&op=' + op;
});
- 处理tab 绑定事件导致自定义搜索无效问题
// 绑定TAB事件
$('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var field = 'type';
var value = $(this).attr("href").replace('#', '');
var options = table.bootstrapTable('getOptions');
options.pageNumber = 1;
var queryParams = options.queryParams;
options.queryParams = function (params) {
params = queryParams(params);
var filter = params.filter ? JSON.parse(params.filter) : {};
if (value !== '' && value != 'all') {
filter[field] = value;
} else {
delete filter[field];
}
params.filter = JSON.stringify(filter);
return params;
};
table.bootstrapTable('refresh', {});
return false;
});
- 动态添加修改键值组件(Fieldlist)
<style>
.fa-close {
margin-left: 10px;
cursor: pointer;
}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
{:token()}
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">添加标题:</label>
<div class="col-xs-12 col-sm-8">
<input type="text" name="" class="form-control" value="" id="add-title">
</div>
<div class="help-block">
<a href="javascript:;" class="btn btn-sm btn-success" id="but-add"><i class="fa fa-plus"></i> 添加</a>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">表格:</label>
<div class="col-xs-12 col-sm-8">
<dl class="fieldlist" data-name="row[test]" data-template="testtpl">
<dd>
<ins>姓名<i class="fa fa-close"></i></ins>
<ins>性别<i class="fa fa-close"></i></ins>
<ins>年龄<i class="fa fa-close"></i></ins>
</dd>
<dd>
<a href="javascript:;" class="btn btn-sm btn-success btn-add"><i class="fa fa-plus"></i> 追加</a>
<!-- 需要隐藏否则初始化不了 textarea 值 -->
<a style="display: none" href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
</dd>
<textarea name="row[test]" class="form-control hide" cols="30" rows="5">[{"name":"张三","gender":"男","age":"23"},{"name":"李四","gender":"男","age":"26"}]</textarea>
</dl>
<!--定义模板，模板语法使用Art-Template模板语法-->
<script type="text/html" id="testtpl">
<dd class="form-inline input-list">
<!-- 初始化数量 -->
<% var temp = input_num ? input_num : 3; %>
<% for(var i = 0; i < temp; i++){ %>
<input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10">
<% } %>
<span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
</dd>
</script>
</div>
</div>
</form>
var init_length = 3; // 初始化数量
$('#but-add').click(function (event) {
var title = $('#add-title').val();
if (!title) {
Fast.api.toastr.error('请输入标题');
} else {
var dd_length = init_length + 1;
init_length++;
$($('.fieldlist').find('dd')[0]).append('<ins>'+ title +'<i class="fa fa-close"></i></ins>');
$('.fieldlist .input-list .btn-remove').trigger('click')
var row = {};
var container = $(".fieldlist");
var tagName = container.data("tag") || "dd";
var index = container.data("index");
var name = container.data("name");
var template = container.data("template");
var data = container.data();
index = index ? parseInt(index) : 0;
container.data("index", index + 1);
row = row ? row : {};
var vars = {index: index, name: name, data: data, row: row, input_num: dd_length};
var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
$(html).attr("fieldlist-item", true).insertBefore($(tagName + ":last", container));
container.trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
}
});
$('.btn-add').click(function () {
var dd_length = init_length;
var row = {};
var container = $(".fieldlist");
var tagName = container.data("tag") || "dd";
var index = container.data("index");
var name = container.data("name");
var template = container.data("template");
var data = container.data();
index = index ? parseInt(index) : 0;
container.data("index", index + 1);
row = row ? row : {};
var vars = {index: index, name: name, data: data, row: row, input_num: dd_length};
var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
$(html).attr("fieldlist-item", true).insertBefore($(tagName + ":last", container));
container.trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
});
$(document).on('click', '.fa-close', function () {
init_length--;
$('.fieldlist .input-list .btn-remove').trigger('click');
$(this).parent('ins').remove();
});
版权声明：本文为qq_27080351原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。