使用 confirm 改变字段状态
{ field : 'is_show' , searchList : { '0' : '下架' , '1' : '上架' } , title : __ ( 'Is_show' ) , formatter : function ( value, row, index ) {
if ( value == 0 ) {
return '下架 ' ;
} else {
return '上架 ' ;
}
} , 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 '维权完成 ' ;
} else if ( row. orderrefund. status == 0 ) {
return '申请维权 ' ;
} else if ( row. orderrefund. status == - 1 ) {
value = value + '维权驳回 ' ;
}
}
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 ) ;
if ( row. status != 0 ) {
$ ( table) . data ( "operate-del" , null ) ;
}
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 ) {
return location. protocol + '//' + location. host + Fast. api. fixurl ( Table. api. replaceurl ( 'store/order/detail' , row, table) ) ;
}
} ,
]
}
手动刷新表格
$ ( ".btn-refresh" ) . trigger ( "click" ) ;
table. bootstrapTable ( 'refresh' , { } ) ;
通用的点击图片浏览处理
$ ( '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 '+ value + '">' + c + ' ' ;
} } ,
表格字段通过js创建二维码
{ field : 'custom' , title : '绑定二维码' , operate : false , formatter : function ( value, row, index ) {
var h = '+ row. id+ '">' ;
if ( row. openid) {
h += ' + row. id+ '">解除绑定' ;
}
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 ) {
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 ( ) ;
} ) ;
自定义按钮获取搜索表单内容，实现自定义导出按钮
$ ( '#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;
} ) ;
$ ( '#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) ) ;
} ) ;
$ ( 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 绑定事件导致自定义搜索无效问题
$ ( '.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 > < formid = " add-form" class = " form-horizontal" role = " form" data-toggle = " validator" method = " POST" action = " " > < divclass = " form-group" > < labelclass = " control-label col-xs-12 col-sm-2" > label > < divclass = " col-xs-12 col-sm-8" > < inputtype = " text" name = " " class = " form-control" value = " " id = " add-title" > div > < divclass = " help-block" > < ahref = " javascript:;" class = " btn btn-sm btn-success" id = " but-add" > < iclass = " fa fa-plus" > i > a > div > div > < divclass = " form-group" > < labelclass = " control-label col-xs-12 col-sm-2" > label > < divclass = " col-xs-12 col-sm-8" > < dlclass = " fieldlist" data-name = " row[test]" data-template = " testtpl" > < dd> < ins> < iclass = " fa fa-close" > i > ins > < ins> < iclass = " fa fa-close" > i > ins > < ins> < iclass = " fa fa-close" > i > ins > dd > < dd> < ahref = " javascript:;" class = " btn btn-sm btn-success btn-add" > < iclass = " fa fa-plus" > i > a > < astyle = " display : none" href = " javascript:;" class = " btn btn-sm btn-success btn-append" > < iclass = " fa fa-plus" > i > a > dd > < textareaname = " row[test]" class = " form-control hide" cols = " 30" rows = " 5" > textarea > dl > < scripttype = " 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 ( '' + title + ' ) ;
$ ( '.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 ( ) ;
} ) ;
