1.介绍
J2eeFAST 系统前端表格基于bootstrap-table 深度优化.使用更加简单。
2.基本使用
// 头 引入表格插件1. <@header libs=["table"]/>2. 页面body中使用 <@table id="bootstrap-table"> 组件3. <@footer> 组件中编写代码
例如用户查询:
.... 省略
/* 初始表格对象 */
var options = {
// 表格请求url
url: prefix + "/list",
//---- 如果不需要增删改 可以不需要
addUrl: prefix + "/add",
editUrl: prefix + "/edit/{id}",
delUrl: prefix + "/del",
viewUrl: prefix + "/view/{id}",
// --------
//点击行是否选中
clickToSelect: false,
// showBorder: true, // 是否显示表格边框
// 分页大小
// pageSize: 12,
// 分页大小列表
// pageList: [12, 24, 36],
// 初始化排序字段
sortName: "createTime",
//固定高度
height: function(){ return $(window).height() - 114},
striped: true, // 表格斑马条纹
uniqueId: "id", /* 唯一ID */
modalName: "${i18n("用户")}", /* 修改弹窗 跳转TAB 标题*/
// 列数据
columns:[
{
title: "${i18n("序号")}",width:35, formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{field: 'username', title: "${i18n("账号")}",formatter: function(value, row, index){
return '<a class="tb-view" onclick="opt.operate.view(\''+row.id+'\',editFlag,opt.operate.edit)">'+value+'</a>';
}
},
{field: 'name', title: "${i18n("姓名")}"},
{field: 'compName', valign: 'middle', title: "${i18n("归属公司")}",formatter: function (value, row, index) {
return opt.common.tooltip(value,5);}
},
{field: 'deptName', title: "${i18n("归属机构")}"},
{field: 'roleName', title: "${i18n("角色")}",formatter: function (value, row, index) {
return opt.common.tooltip(value,5);}
},
{field: 'email', title: "${i18n("邮箱")}"},
{field: 'mobile', title: "${i18n("手机")}"},
{
field: 'status', title: "${i18n("状态")}", formatter: function (value, row, index) {
return opt.common.selectDictLabel(datas, value);
}
},
{field: 'createTime', title: "${i18n("创建时间")}"},
{title: "${i18n("操作")}", align: 'left',visible:visible,class:'action', formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="' + editFlag + '" href="javascript:void(0)" title="${i18n("修改")}" onclick="opt.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i></a> ');
if(row.status === "0"){
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("停用")}" onclick="disable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ban-circle"></i></a> ');
}else{
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("启用")}" onclick="enable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ok-circle"></i></a> ');
}
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("删除")}" onclick="opt.operate.del(\'' + row.id + '\')"><i class="fa fa-trash-o"></i></a> ');
var info = "<a class='btn btn-default btn-xs' onclick=javascript:resetPwd(\'" + row.id + "\');><i class='fa icon-key'></i> ${i18n("重置密码")}</a> ";
info += "<a class='btn btn-default btn-xs' onclick=javascript:authRole(\'" + row.id +"\');><i class='fa icon-check'></i> ${i18n("分配角色")}</a>";
actions.push('<a tabindex="0" class="' + resetPwdFlag + '" role="button" data-container="body" ' +
'data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" ' +
'data-content="'+info+'"><i class="fa fa-chevron-circle-right" title="${i18n("更多操作")}"></i></a>');
return actions.join('');
}
}
]
};
$.table.init(options);
..... 省略
复杂表格案例:
效果:
```javascript
/ 初始表格对象 /
var options = {
url: prefix + “/list”,
pageSize: 10,
pageList: [10, 20, 30],
sortName: “username”, // 表格初次加载、请求排序字段
sortOrder: “asc”, // 排序
fixedColumns: true, // 是否开启左侧冻结列
fixedNumber: 3, // 左侧冻结几列
rightFixedColumns: true,// 是否开启右侧冻结列
rightFixedNumber: 2, //右侧冻结几列
// clickToSelect: true, //是否启用点击选中行
height: function(){ return $(window).height() - 114},//是否需要固定表格高度
uniqueId: “id”, / 唯一ID /
striped: true, // 表格斑马条纹
outcheckbox: false,
subtotalShowFooter: true, // 是否显示表格小计底部统计行 配合 rowspan, subtotalFooterFormatter,subtotalFooterStyle 函数使用
showBorder: true, // 是否显示表格边框
totalShowFooter: true,
showCheckNumber: true, // 是否显示勾选数量
isFixedColumn: true, // 是否开启固定表格宽度, 当我们的表格列较多则我们只需要设置每列固定宽度开启此项表格会自动出现水平滚动条
subtotalFooterStyle: subtotalFooterStyle, // 表格底部统计行的样式设置函数
totalFooterStyle: totalFooterStyle, //表格合计样式设置函数
rowStyle: rowStyle, //行样式设置
columns:[
// 注意: 再设计复杂表头的时候、首先需要根据自身业务表格需求、自己想清楚表格需要多少列多少表头行
[
// 顶部一级
{
title : '案例表格复杂表头一级表头',
align : 'center', //对齐方式
colspan : 17, // 合并列
style: 'color: #000;' //设置头此行的样式
}
],
[
// 二级
{
title : '基本信息',
align : 'center',
colspan : 6
},
{
title : '其他信息',
align : 'center',
colspan : 10
},
{
title: "操作",
rowspan: 3, //向下合行
align: 'left',visible:visible,class:'action', width: 120,formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="' + editFlag + '" href="javascript:void(0)" title="修改" onclick="opt.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i></a> ');
if(row.status === "0"){
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="停用" onclick="disable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ban-circle"></i></a> ');
}else{
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="启用" onclick="enable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ok-circle"></i></a> ');
}
actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="删除" onclick="opt.operate.del(\'' + row.id + '\')"><i class="fa fa-trash-o"></i></a> ');
var info = "<a class='btn btn-default btn-xs' onclick=javascript:resetPwd(\'" + row.id + "\');><i class='fa icon-key'></i> 重置密码</a> ";
info += "<a class='btn btn-default btn-xs' onclick=javascript:authRole(\'" + row.id +"\');><i class='fa icon-check'></i> 分配角色</a>";
actions.push('<a tabindex="0" class="' + resetPwdFlag + '" role="button" data-container="body" ' +
'data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" ' +
'data-content="'+info+'"><i class="fa fa-chevron-circle-right" title="更多操作"></i></a>');
return actions.join('');}
}
],
[
//如果需要多些可以自行添加
{
checkbox: true,
//radio: true,
field: '_state',
rowspan: 2, //合并行
subtotalFootColspan: 3, //统计底部行合并
totalFootColspan: 3,
subtotalFooterFormatter:function (value) {
return '小计:';},
totalFooterFormatter: function(value){
return '合计:';
}
},
{
title : '个人信息',
align : 'center',
colspan : 2
},
{
title : '公司信息(表头个性化)',
align : 'center',
colspan : 3,
style:'background-color: red;color: #000;' // 表头样式设置(只有表头有效)
},
{
title : '联系方式',
align : 'center',
colspan : 8
},
{
title : '操作信息',
align : 'center',
colspan : 2
}
]
,
[
{field:'ttd',title: "序号",width:35, formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{field: 'id', title: "用户ID", width: 80,visible: false},
{field: 'username', title: "账号", width: 100,sortable: true,formatter: function(value, row, index){
return '<a class="tb-view" onclick="opt.operate.view(\''+row.id+'\',editFlag,opt.operate.edit)">'+value+'</a>';
}
},
{field: 'name', title: "姓名",subtotalFootColspan: 4, width: 100
,subtotalFooterFormatter:function (value) {
return opt.common.formatMoney(12390.97,2,"￥")+'（'+opt.common.moneyToChinese(12390.97) + ')';
}
,cellStyle: function(value, row, index, field){ //个性化设置单元格样式 支持 css , classes
if(value == '张飞'){
return {css:{'color':'#0000cc','font-weight':'bold'}};
}
},totalFootColspan:4,totalFooterFormatter: function(value){
return opt.common.formatMoney(9999990.97,2,"￥")+'（'+opt.common.moneyToChinese(99999.97) + ')';
}
},
{field: 'compName', valign: 'middle', title: "归属公司", width: 120,formatter: function (value, row, index) {
return opt.common.tooltip(value,5);}
},
{field: 'deptName', title: "归属机构", width: 120},
{field: 'roleName', title: "角色", width: 120,formatter: function (value, row, index) {
return opt.common.tooltip(value,5);}
},
{field: 'email', title: "邮箱",width:150},
{field: 'mobile', title: "手机1",width:150},
{field: 'mobile', title: "手机2",width:150},
{field: 'mobile', title: "手机3",width:150},
{field: 'mobile', title: "手机4",width:150},
{field: 'mobile', title: "手机5",width:150},
{field: 'mobile', title: "手机6",width:150},
// 注意若表格为复杂表头字段设置visible: false 此行会隐藏 也不会出现
{field: 'mobile', title: "手机7",width:150,visible: false},
{field: 'status', title: "状态",width:150, formatter: function (value, row, index) {
return opt.common.selectDictLabel(datas, value);
}
},
{field: 'createTime', title: "创建时间",sortable: true,width:150}
]
]
};
$.table.init(options);
<a name="ycCJw"></a>
#### 自定义表格案例:
效果:
[](https://www.yuque.com/u1174484/j2eefast/er9ggn?_lake_card=%7B%22status%22%3A%22done%22%2C%22name%22%3A%22%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E6%A0%BC.mp4%22%2C%22size%22%3A12394239%2C%22taskId%22%3A%22u4a0eab30-df3f-4773-a560-205beb31270%22%2C%22taskType%22%3A%22upload%22%2C%22url%22%3Anull%2C%22cover%22%3Anull%2C%22videoId%22%3A%22inputs%2Fprod%2Fyuque%2F2022%2F1421369%2Fmp4%2F1652004432374-d2f46905-ccaa-4c88-bef8-4faf892a5287.mp4%22%2C%22download%22%3Afalse%2C%22__spacing%22%3A%22both%22%2C%22id%22%3A%22qiMx6%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22card%22%3A%22video%22%7D#qiMx6)```javascript
// 主要代码
var options = {
、、、、、、省略
// --- 是否开启自定义表格/ 开启之后默认\初始显示 自定义表格、可以通过ToolBar工具类 切换 回原始表格
showCustomView: true, /* 自定义表格*/
// 不填默认切换图标 不是必须参数
customVIcon: 'fa fa-bar-chart-o',
// 按钮文字 不是必须参数
customTxt: ' 视图切换',
// 初始化显示表格 默认false 显示自定义 、意思是初次加载显示那个视图、默认是自定义 不是必须
showCustomTalbe: true,
// 自定义表格视图函数 必须参数
customViewFormatter: customViewFormatter,
//表格加载渲染完成 回调函数
onLoadSuccess: onLoadSuccess,
、、、、、、省略
};
$.table.init(options);
//绘制自定义容器 本案例为数据图形化 所以需要在表格加载完成 之后把请求返回的数据用echarts渲染出来
function customViewFormatter(data){
var main = '<div id="__table_chart" class="mt10" style="min-height:90%;"></div>';
return main;
}
//表格加载完成执行
function onLoadSuccess(data){
if(data.rows && data.rows.length > 0){
window.setTimeout(function () {
chart(document.getElementById("__table_chart"),data.rows);
},500);
}
}
//绘制图表
function chart(main,data){
var pieChart3 = echarts.init(main);
、、、、 省略
}
若有收获，就点个赞吧
0 人点赞
