FastAdmin中的表格列表常用功能
Posted 请叫我郝先生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FastAdmin中的表格列表常用功能相关的知识,希望对你有一定的参考价值。
1.通用搜索_operate
通用搜索的的内容是根据bootstrap-table
配置的字段columns
决定的,渲染的内容及格式由FastAdmin自动进行渲染,如果需要禁用或删除某一选项,可以在JS中配置operate:false
来删除通用搜索中的选项。例如通常情况下我们的在JS中进行字段的配置如下:
operate:'=' //用于查询时的操作符,默认为=,
为false表示禁用此字段的通用搜索,
支持
!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
例如如下案例:
{field: 'usercard', title: __('身份证号'),operate:'LIKE'},
额外扩展参数_addclass searchlist
searchList: //用于渲染列表的数据,支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用于给input或select添加额外的class属性
type: //用于定义input文本框的类型,默认为text
data: //用于给input或select添加额外的属性
代码案例:
//时间区间搜索
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//金额区间搜索
{field: 'money', title: __('Money'), operate: 'RANGE'},
//下拉列表搜索
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//动态下拉列表搜索
{field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//禁用通用搜索
{field: 'keywords', title: __('Keywords'), operate: false},
2.设置搜索模板_searchFormTemplate
searchFormTemplate: 'planformtpl',
3.弹框百分比_data-area
data-area='["100%","100%"]'
1.js 弹框 百分比
$('.btn-add').data('area', ['100%', '100%']);
2.A标签百分比
<a href="javascript:;" data-area='["100%","100%"]' class="btn btn-success btn-add title="{:__('Add')}" >{:__('Add')}</a>
4.动态渲染统计信息
html代码:
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
<i class="fa fa-dollar"></i>
<span class="extend">
金额:<span id="money">0</span>
单价:<span id="price">0</span>
</span>
</a>
js代码:
//当表格数据加载完成时
table.on('load-success.bs.table', function (e, data) {
//这里可以获取从服务端获取的JSON数据
console.log(data);
//这里我们手动设置底部的值
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
5.快速搜索
控制器:protected $searchFields = 'id,name,title';
js_自定义搜索增加备注:
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};
6.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式,如果不需要此功能,可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏,如果不需要此功能,可以设置showColumns: false
,如果想要表格中的字段列默认隐藏可以设置字段属性visible: false
即可默认隐藏
导出按钮默认将导出整个表的所有行,如果需要仅导出当前分页的数据,需要设置exportDataType: 'basic'
,如果想导出选中的行,则可以设置为exportDataType: 'selected'
,如果不需要此功能,可以设置showExport: false
通用搜索指表格上方的搜索,通用搜索的表单默认是隐藏的,如果需要默认显示,需要设置searchFormVisible: true
,如果不需要通用搜索功能,可以设置commonSearch: false
。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false
即可。
7.字段是否显示_visible
visible: false
checkbox:true, //是否为首列复选框
field:'name' //字段名称,如果启用了关联查询这里可以使用别名,比如:category.name,请注意服务端返回的字段一一对应,如果使用了一个不存在的字段,将不会渲染任何数据
title:'名称' //字段标题,显示于头部的标题
operate:'=' //通用搜索的操作符,详见上方通用搜索介绍
visible:false //字段是否可见,为false时将默认不可见
formatter:Table.api.formatter.search //格式化显示的内容,FastAdmin内部定义了许多通用的格式化方法
events: //定义元素响应的事件
searchList: //定义通用搜索下拉列表的数据
addclass: //通用搜索文本框或下拉列表的额外class
type: //通用搜索文本框的类型
data: //通用搜索文本框或下拉列表的额外属性
buttons: //配置的按钮组
8.自定义按钮
{
field: 'buttons',
width: "120px",
title: __('按钮组'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('弹出窗口打开'),
title: __('弹出窗口打开'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"});
},
visible: function (row) {
//返回true时按钮显示,返回false隐藏
return true;
}
},
{
name: 'ajax',
text: __('发送Ajax'),
title: __('发送Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'example/bootstraptable/detail',
confirm: '确认发送',
success: function (data, ret) {
Layer.alert(ret.msg + ",返回数据:" + JSON.stringify(data));
//如果需要阻止成功提示,则必须使用return false;
//return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
text: __('新选项卡中打开'),
title: __('新选项卡中打开'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.buttons
}
9.弹框确认 confirm
buttons: [
{
name: 'ajax',
title: __('退学回滚信息'),
classname: 'btn btn-xs btn-primary btn-magic btn-ajax',
icon: 'fa fa-cogs',
confirm: '确定要回滚该学生退学信息?',
url: function(row){return 'url网址'},
success: function (data, ret) {
Layer.alert("发送内容:" + JSON.stringify(ret.msg));
table.bootstrapTable('refresh');
},
error: function (data, ret) {
Layer.alert(ret.msg);
return false;
}
}]
10.分页信息_pagination
js代码:
pageSize: 10,
pageList: [10, 25, 50, 'All'],
pagination:false 禁止分页
html代码:
data-show-export="false" data-show-toggle="false" data-show-columns="false"
data-search="false" data-common-Search="false"`
//分页隐藏
data-pagination="false"
以上是关于FastAdmin中的表格列表常用功能的主要内容,如果未能解决你的问题,请参考以下文章