当前位置：网站首页>开源一夏 | 基于若依架构的列表详情展示
开源一夏 | 基于若依架构的列表详情展示
2022-08-09 17:56:00 【InfoQ】
展示效果
既然是展示列表详情，那么先给大家看一下实现之后列表的展示效果
点击列表+号展示详细内容
代码实现
首先去若依官网（http://demo.ruoyi.vip/index）看一下类似功能，展示结果如下
详情的字段名称和属性值枚举没有进行再匹配操作，不是我们想要的，这就需要对若依提供的通用开源代码进行改写，开源通用代码如下
function detailFormatter(index, row) {
var html = [];
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}同时需要在列表的options中增加对应内容,才能展示若依开源架构原始点+号展示的效果
下面我将增加自己的方法detailFormatter来补充展示数据枚举值
代码改造
//加载数据详情
function detailFormatter(index, row) {
var html = [];
//获取列表列
var columns = options.columns;
var len = columns.length;
//遍历列表
for (var i = 1; i < len; i++) {
let field = columns[i].field;
let title = columns[i].title;
let formatter = columns[i].formatter;
//遍历当前行数据内容
$.each(row, function(key, value) {
if (formatter != undefined) {
value = formatter(value);
}
//对比field字段是否与当前行数据内容key一致
if (field == key) {
html.push('<p><b>' + title + ':</b> ' + value + '</p>');
return true;
}
})
}
return html.join('');
}改造之后最后的结果就是上面开始的截图效果，页面完整代码也贴出来备用一下
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('外呼风控记录列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li>
风控类型:
<select name="riskType">
<option value="">请选择</option>
<option value="0" >系统风控</option>
<option value="1" >呼叫中心</option>
</select>
</li>
<li>
呼叫中心平台类型:
<select name="callCenterType">
<option value="">请选择</option>
<option value="0" >未知</option>
<option value="1" >平台1</option>
<option value="2" >平台2</option>
<option value="3" >平台3</option>
<option value="4" >平台4</option>
<option value="5" >平台5</option>
</select>
</li>
<li>
业务类型:
<select name="bizType">
<option value="">请选择</option>
<option value="1" >类型1</option>
<option value="2" >类型2</option>
<option value="3" >类型3</option>
<option value="5" >类型4</option>
<option value="6" >类型5</option>
</select>
</li>
<li>
外呼号码:<input type="text" name="phone"/>
</li>
<li>
坐席号:<input type="text" name="cno"/>
</li>
<li>
分机号:<input type="text" name="sipNo"/>
</li>
<li>
客户侧外显号:<input type="text" name="clid"/>
</li>
<li>
创建时间:
<input type="text" readonly="readonly" placeholder="时间范围" name="createTime" id="createTime"/>
<input type="hidden" name="params[createTimeStartTime]" id="createTimeStartTime"/>
<input type="hidden" name="params[createTimeEndTime]" id="createTimeEndTime"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<!--<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="project:monitorCallRiskRecord:add">
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="project:monitorCallRiskRecord:edit">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="project:monitorCallRiskRecord:remove">
<i class="fa fa-remove"></i> 删除
</a>
<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="project:monitorCallRiskRecord:export">
<i class="fa fa-download"></i> 导出
</a>
</div>-->
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
//var editFlag = [[${@permission.hasPermi('project:monitorCallRiskRecord:edit')}]];
//var removeFlag = [[${@permission.hasPermi('project:monitorCallRiskRecord:remove')}]];
var prefix = ctx + "project/monitorCallRiskRecord";
var options;
$(function() {
initDaterangepickerWithoutInitTime("createTime","createTimeStartTime","createTimeEndTime");
options = {
url: prefix + "/list",
//createUrl: prefix + "/add",
//updateUrl: prefix + "/edit/{id}",
//removeUrl: prefix + "/remove",
//exportUrl: prefix + "/export",
modalName: "外呼风控记录",
sortName:"id",
sortOrder: "desc",
// showExport: true,
detailView: true,
detailFormatter: detailFormatter,
columns: [{
checkbox: true
},
{
field : 'id',
title : 'id'
},
{
field : 'riskType',
title : '风控类型',
formatter:function (value, row, index) {
if (value == 0) {
return "系统风控";
}else if (value == 1) {
return "呼叫中心";
}else {
return "-";
}
}
},
{
field : 'callCenterType',
title : '呼叫中心平台类型',
formatter:function (value,row,index) {
if (value == 0) {
return "未知";
}else if (value == 1) {
return "平台1";
}else if (value == 2) {
return "平台2";
}else if (value == 3) {
return "平台3";
}else if (value == 4) {
return "平台4";
}else if (value == 5) {
return "平台5";
}else {
return "-";
}
}
},
{
field : 'callId',
title : 'crm通话记录id',
visible: false
},
{
field : 'bizType',
title : '业务类型',
formatter:function (value,row,index) {
if (value == 1) {
return "类型1";
}else if (value == 2) {
return "类型2";
}else if (value == 3) {
return "类型3";
}else if (value == 5) {
return "类型4";
}else if (value == 6) {
return "类型5";
}else {
return "-";
}
}
},
{
field : 'bizId',
title : '业务id',
visible: false
},
{
field : 'requestParams',
title : '请求参数',
visible: false
},
{
field : 'responseBody',
title : '返回参数',
visible: false
},
{
field : 'phone',
title : '外呼号码'
},
{
field : 'cno',
title : '坐席号'
},
{
field : 'sipNo',
title : '分机号'
},
{
field : 'userId',
title : '用户id',
visible: false
},
{
field : 'clid',
title : '客户侧外显号'
},
{
field : 'callBackContent',
title : '话单推送内容',
visible: false
},
{
field : 'requestUniqueId',
title : '请求唯一标识',
visible: false
},
{
field : 'uniqueId',
title : '电话唯一标识',
visible: false
},
{
field : 'riskTime',
title : '风控时间',
visible: false
},
{
field : 'unRiskTime',
title : '解封时间',
visible: false
},
{
field : 'createTime',
title : '创建时间'
},
{
field : 'updateTime',
title : '更新时间',
visible: false
}
/*{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}*/]
};
$.table.init(options);
});
//加载数据详情
function detailFormatter(index, row) {
var html = [];
//获取列表列
var columns = options.columns;
var len = columns.length;
//遍历列表
for (var i = 1; i < len; i++) {
let field = columns[i].field;
let title = columns[i].title;
let formatter = columns[i].formatter;
//遍历当前行数据内容
$.each(row, function(key, value) {
if (formatter != undefined) {
value = formatter(value);
}
//对比field字段是否与当前行数据内容key一致
if (field == key) {
html.push('<p><b>' + title + ':</b> ' + value + '</p>');
return true;
}
})
}
return html.join('');
}
</script>
</body>
</html>边栏推荐
猜你喜欢
mysql如何查看所有复合主键的表名？
Li Yuanyuan: iMetaLab Suite metaproteomics data analysis and visualization (video + PPT)
qq机器人账号不能发送群消息，被风控
MQTT X Web：在线的 MQTT 5.0 客户端工具
Detailed explanation of VIT transformer
太厉害了！华为大牛终于把 MySQL 讲的明明白白（基础 + 优化 + 架构）
Sublime Text如何安装Package Control
李乐园：iMetaLab Suite宏蛋白质组学数据分析与可视化(视频+PPT)
国内市场上的 BI 软件到底有啥区别？
YOLO v3源码详解
随机推荐
重庆智博会｜2022智博会到底有哪些看点？拭目以待
uniapp中使用网页录音并上传声音文件(发语音)——js-audio-recorder的使用【伸手党福利】
win10 uwp 无法附加到CoreCLR
使用.NET简单实现一个Redis的高性能克隆版（四、五）
重定向操作
Cortex-A7 MPCore Architecture
d中shared用法
shared usage in d
mysql双主备份失败？
JSDN blog system
win10 uwp 获得Slider拖动结束的值
C的一些琐碎
Flink运行架构
毕昇编译器优化：Lazy Code Motion
不是吧，连公司里的卷王写代码都复制粘贴，这合理？
ARM 汇编基础
Bi Sheng Compiler Optimization: Lazy Code Motion
牛客网 Verilog 在线编程题库解答（VL1~VL10）
winpe工具WEPE微PE工具箱
5.3.6 原子操作对非原子的操作排序