基于若依架构的列表详情展示

展示效果

点击列表+号展示详细内容

代码实现

首先去若依官网（http://demo.ruoyi.vip/index）看一下类似功能，展示结果如下

详情的字段名称和属性值枚举没有进行再匹配操作，不是我们想要的，这就需要对若依提供的通用代码进行改写，通用代码

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

同时需要在列表的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('
' + title + ': ' + value + '
');
            return true;
          }
        })
      }
      return html.join('');
    }

改造之后最后的结果就是上面开始的截图效果，页面完整代码也贴出来备用一下

 


    

   

     

       

         

           

             

               风控类型:
               
                 请选择
                 系统风控
                 呼叫中心
               
             

             

               呼叫中心平台类型:
               
                 请选择
                 未知
                 平台1
                 平台2
                 平台3
                 平台4
                 平台5
               
             

             

               业务类型:
               
                 请选择
                 类型1
                 类型2
                 类型3
                 类型4
                 类型5
               
             

             

               外呼号码:
             

             

               坐席号:
             

             

               分机号:
             

             

               客户侧外显号:
             

             

               创建时间:
               
               
               
             

             

                搜索
                重置
             
           
         
       
     

         
     

       
     
   
 
   

   


   

参考文章：https://developer.aliyun.com/article/972544