当前位置：网站首页>Open Source Summer | List Details Display Based on Ruoyi Architecture

Open Source Summer | List Details Display Based on Ruoyi Architecture

2022-08-09 21:15:00 【InfoQ】

展示效果

Since it is to display the list details,So let's take a look at the display effect of the list after implementation

点击列表+to show the details

代码实现

First go to Ruoyi's official website（http://demo.ruoyi.vip/index）Take a look at similar functions,展示结果如下

The detailed field name and property value enumeration is not rematched,不是我们想要的,This requires rewriting the general open source code provided by Ruoyi,The open source general code is as follows

 function detailFormatter(index, row) {
 var html = [];
 $.each(row, function(key, value) {
 html.push('<p><b>' + key + ':</b> ' + value + '</p>');
 });
 return html.join('');
}

Also needs to be in the listoptionsCorresponding content is added,In order to show the original point of Ruoyi's open source architecture+No. shows the effect

Below I will add my own methoddetailFormatterTo supplement the display data enumeration value

代码改造

//Load data details
 function detailFormatter(index, row) {
 var html = [];
 //Get list columns
 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;
 //Traverse the data content of the current row
 $.each(row, function(key, value) {
 if (formatter != undefined) {
 value = formatter(value);
 }
 //对比fieldWhether the field is related to the current row data contentkey一致
 if (field == key) {
 html.push('<p><b>' + title + ':</b> ' + value + '</p>');
 return true;
 }
 })
 }
 return html.join('');
 }

The final result after the transformation is the screenshot effect starting above,The complete code of the page is also posted for backup

<!DOCTYPE html>
<html lang=&quot;zh&quot; xmlns:th=&quot;http://www.thymeleaf.org&quot; xmlns:shiro=&quot;http://www.pollix.at/thymeleaf/shiro&quot;>
<head>
 <th:block th:include=&quot;include :: header('Outbound call risk control record list')&quot; />
</head>
<body class=&quot;gray-bg&quot;>
 <div class=&quot;container-div&quot;>
 <div class=&quot;row&quot;>
 <div class=&quot;col-sm-12 search-collapse&quot;>
 <form id=&quot;formId&quot;>
 <div class=&quot;select-list&quot;>
 <ul>
 <li>
 风控类型:
 <select name=&quot;riskType&quot;>
 <option value=&quot;&quot;>请选择</option>
 <option value=&quot;0&quot; >系统风控</option>
 <option value=&quot;1&quot; >呼叫中心</option>
 </select>
 </li>

 <li>
 Call center platform type:
 <select name=&quot;callCenterType&quot;>
 <option value=&quot;&quot;>请选择</option>
 <option value=&quot;0&quot; >未知</option>
 <option value=&quot;1&quot; >平台1</option>
 <option value=&quot;2&quot; >平台2</option>
 <option value=&quot;3&quot; >平台3</option>
 <option value=&quot;4&quot; >平台4</option>
 <option value=&quot;5&quot; >平台5</option>
 </select>
 </li>

 <li>
 业务类型:
 <select name=&quot;bizType&quot;>
 <option value=&quot;&quot;>请选择</option>
 <option value=&quot;1&quot; >类型1</option>
 <option value=&quot;2&quot; >类型2</option>
 <option value=&quot;3&quot; >类型3</option>
 <option value=&quot;5&quot; >类型4</option>
 <option value=&quot;6&quot; >类型5</option>
 </select>
 </li>

 <li>
 Outgoing number:<input type=&quot;text&quot; name=&quot;phone&quot;/>
 </li>

 <li>
 坐席号:<input type=&quot;text&quot; name=&quot;cno&quot;/>
 </li>

 <li>
 分机号:<input type=&quot;text&quot; name=&quot;sipNo&quot;/>
 </li>

 <li>
 External display number on the client side:<input type=&quot;text&quot; name=&quot;clid&quot;/>
 </li>

 <li>
 创建时间:
 <input type=&quot;text&quot; readonly=&quot;readonly&quot; placeholder=&quot;时间范围&quot; name=&quot;createTime&quot; id=&quot;createTime&quot;/>
 <input type=&quot;hidden&quot; name=&quot;params[createTimeStartTime]&quot; id=&quot;createTimeStartTime&quot;/>
 <input type=&quot;hidden&quot; name=&quot;params[createTimeEndTime]&quot; id=&quot;createTimeEndTime&quot;/>
 </li>

 <li>
 <a class=&quot;btn btn-primary btn-rounded btn-sm&quot; onclick=&quot;$.table.search()&quot;><i class=&quot;fa fa-search&quot;></i>&nbsp;搜索</a>
 <a class=&quot;btn btn-warning btn-rounded btn-sm&quot; onclick=&quot;$.form.reset()&quot;><i class=&quot;fa fa-refresh&quot;></i>&nbsp;重置</a>
 </li>
 </ul>
 </div>
 </form>
 </div>

 <!--<div class=&quot;btn-group-sm&quot; id=&quot;toolbar&quot; role=&quot;group&quot;>
 <a class=&quot;btn btn-success&quot; onclick=&quot;$.operate.add()&quot; shiro:hasPermission=&quot;project:monitorCallRiskRecord:add&quot;>
 <i class=&quot;fa fa-plus&quot;></i> 添加
 </a>
 <a class=&quot;btn btn-primary btn-edit disabled&quot; onclick=&quot;$.operate.edit()&quot; shiro:hasPermission=&quot;project:monitorCallRiskRecord:edit&quot;>
 <i class=&quot;fa fa-edit&quot;></i> 修改
 </a>
 <a class=&quot;btn btn-danger btn-del btn-del disabled&quot; onclick=&quot;$.operate.removeAll()&quot; shiro:hasPermission=&quot;project:monitorCallRiskRecord:remove&quot;>
 <i class=&quot;fa fa-remove&quot;></i> 删除
 </a>
 <a class=&quot;btn btn-warning&quot; onclick=&quot;$.table.exportExcel()&quot; shiro:hasPermission=&quot;project:monitorCallRiskRecord:export&quot;>
 <i class=&quot;fa fa-download&quot;></i> 导出
 </a>
 </div>-->
 <div class=&quot;col-sm-12 select-table table-striped&quot;>
 <table id=&quot;bootstrap-table&quot; data-mobile-responsive=&quot;true&quot;></table>
 </div>
 </div>
 </div>
 <div th:include=&quot;include :: footer&quot;></div>
 <script th:inline=&quot;javascript&quot;>
 //var editFlag = [[${@permission.hasPermi('project:monitorCallRiskRecord:edit')}]];
 //var removeFlag = [[${@permission.hasPermi('project:monitorCallRiskRecord:remove')}]];
 var prefix = ctx + &quot;project/monitorCallRiskRecord&quot;;

 var options;
 $(function() {

 initDaterangepickerWithoutInitTime(&quot;createTime&quot;,&quot;createTimeStartTime&quot;,&quot;createTimeEndTime&quot;);

 options = {
 url: prefix + &quot;/list&quot;,
 //createUrl: prefix + &quot;/add&quot;,
 //updateUrl: prefix + &quot;/edit/{id}&quot;,
 //removeUrl: prefix + &quot;/remove&quot;,
 //exportUrl: prefix + &quot;/export&quot;,
 modalName: &quot;Outbound call risk control records&quot;,
 sortName:&quot;id&quot;,
 sortOrder: &quot;desc&quot;,
 // 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 &quot;系统风控&quot;;
 }else if (value == 1) {
 return &quot;呼叫中心&quot;;
 }else {
 return &quot;-&quot;;
 }
 }
 },
 {
 field : 'callCenterType', 
 title : 'Call center platform type',
 formatter:function (value,row,index) {
 if (value == 0) {
 return &quot;未知&quot;;
 }else if (value == 1) {
 return &quot;平台1&quot;;
 }else if (value == 2) {
 return &quot;平台2&quot;;
 }else if (value == 3) {
 return &quot;平台3&quot;;
 }else if (value == 4) {
 return &quot;平台4&quot;;
 }else if (value == 5) {
 return &quot;平台5&quot;;
 }else {
 return &quot;-&quot;;
 }
 }
 },
 {
 field : 'callId', 
 title : 'crm通话记录id',
 visible: false
 },
 {
 field : 'bizType', 
 title : '业务类型',
 formatter:function (value,row,index) {
 if (value == 1) {
 return &quot;类型1&quot;;
 }else if (value == 2) {
 return &quot;类型2&quot;;
 }else if (value == 3) {
 return &quot;类型3&quot;;
 }else if (value == 5) {
 return &quot;类型4&quot;;
 }else if (value == 6) {
 return &quot;类型5&quot;;
 }else {
 return &quot;-&quot;;
 }
 }
 },
 {
 field : 'bizId', 
 title : '业务id',
 visible: false
 },
 {
 field : 'requestParams', 
 title : '请求参数',
 visible: false
 },
 {
 field : 'responseBody', 
 title : '返回参数',
 visible: false
 },
 {
 field : 'phone', 
 title : 'Outgoing number'
 },
 {
 field : 'cno', 
 title : '坐席号'
 },
 {
 field : 'sipNo', 
 title : '分机号'
 },
 {
 field : 'userId', 
 title : '用户id',
 visible: false
 },
 {
 field : 'clid', 
 title : 'External display number on the client side'
 },
 {
 field : 'callBackContent', 
 title : 'CDR push content',
 visible: false
 },
 {
 field : 'requestUniqueId', 
 title : '请求唯一标识',
 visible: false
 },
 {
 field : 'uniqueId', 
 title : 'Phone unique identifier',
 visible: false
 },
 {
 field : 'riskTime', 
 title : 'Risk control time',
 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=&quot;btn btn-success btn-xs ' + editFlag + '&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;$.operate.edit(\'' + row.id + '\')&quot;><i class=&quot;fa fa-edit&quot;></i>编辑</a> ');
 actions.push('<a class=&quot;btn btn-danger btn-xs ' + removeFlag + '&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;$.operate.remove(\'' + row.id + '\')&quot;><i class=&quot;fa fa-remove&quot;></i>删除</a>');
 return actions.join('');
 }
 }*/]
 };
 $.table.init(options);
 });

 //Load data details
 function detailFormatter(index, row) {
 var html = [];
 //Get list columns
 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;
 //Traverse the data content of the current row
 $.each(row, function(key, value) {
 if (formatter != undefined) {
 value = formatter(value);
 }
 //对比fieldWhether the field is related to the current row data contentkey一致
 if (field == key) {
 html.push('<p><b>' + title + ':</b> ' + value + '</p>');
 return true;
 }
 })
 }
 return html.join('');
 }
 </script>
</body>
</html>