layui中实现动态的cols表头字段
layui中实现动态的cols表头字段
需求确定
修改前
原来是这样的
layui.use('table',function(){
var table = layui.table;
elem:'#tableList'
, url:'/web/aliyunOSSMetric/query?day='+ day +'&company='+ company
, toolbar:true
, height:'full-330'
, cols:[
[
{field:'bucket', width:420, title:'bucket'}
,{ title:'操作', toolbar:'#tableListAction', width:120}
,{field:'companyName', width:150, title:'⼚商', sort:true}
,{field:'value', width:200, title:'流量(TB)', sort:true}
,{field:'percent', width:200, title:'⽐例', sort:true}
]
]
});
});
修改后
parseData⽅法
在table中，我们可以关注到⼀个异步回调函数parseData，能够对回调的数据进⾏⼀些处理，例如将数据格式化。本来我也打算⽤这个来渲染cols的，但是这个是在数据返回之后的，cols已经在该⽅法之前便⽣效了，所以只能另辟蹊径
done函数
同理，done函数也能做⼀些事情，但是cols也已经在该函数前便已⽣效
解决⽅案
在render⽅法之前，先请求接⼝获取数据，并可以处理成想要的格式，在render中直接对cols直接赋值就可以了
layui.use('table',function(){
let table = layui.table;
let cols =[]
let col =[]
$.ajax({
type:'POST',
url:'/web/aliyunOSSMetric/getCols?day='+ end +'&buckets='+'&company='+ company,
dataType:"JSON",
sync:false,
contentType:"application/json",
success:function(res){
col.push({field:'bucket', width:420, title:'bucket',merge:true});
col.push({title:'操作', toolbar:'#tableListAction', width:120});
col.push({field:'companyName', width:150, title:'⼚商', sort:true, rowspan:1});
$.each(res.data,function(index, obj){
col.push({field: obj, width:200, title: obj, sort:true, rowspan:1});
});
col.push({field:'percent', width:200, title:'⽐例', sort:true, rowspan:1});
cols.push(col);
elem:'#tableList'
,
url:'/web/aliyunOSSMetric/query?day='+ end +'&company='+ company
,
toolbar:true
,
height:'full-330'
,
cols: cols
});
}
textarea中cols表示});
});
那么我们会想到，cols是不固定的，那么后端返回的集合类型的每个元素的属性数量也是不固定的
针对后端的返回类型，我们可以抽象为Object集合
针对每个Object，我们可以通过动态的改变业务对象的属性数量，再将业务对象转成json对象，再向上转型成Object对象具体如下：
先创建⼯具类
import Maps;
import BeanGenerator;
import BeanMap;
import PropertyUtilsBean;
import PropertyDescriptor;
import Map;
/**
* @author junfeng.lin
* @date 2021/9/2
*/
public class ReflectUtil {
public static Object getTarget(Object dest, Map<String, Object> addProperties){
PropertyUtilsBean propertyUtilsBean =new PropertyUtilsBean();
PropertyDescriptor[] descriptors = PropertyDescriptors(dest);
Map<String, Class> propertyMap = wHashMap();
for(PropertyDescriptor d : descriptors){
if(!"class".Name())){
propertyMap.Name(), d.getPropertyType());
}
}
// add extra properties
addProperties.forEach((k, v)-> propertyMap.put(k, v.getClass()));
// new dynamic bean
DynamicBean dynamicBean =new Class(), propertyMap);
// add old value
propertyMap.forEach((k, v)->{
try{
// filter extra properties
if(!ainsKey(k)){
dynamicBean.setValue(k, NestedProperty(dest, k));
}
}catch(Exception e){
e.printStackTrace();
}
});
// add extra value
addProperties.forEach((k, v)->{
try{
dynamicBean.setValue(k, v);
}catch(Exception e){
e.printStackTrace();
}
});
Object target = Target();
return target;
}
public static class DynamicBean {
/**
* ⽬标对象
*/
private Object target;
/
**
* 属性集合
*/
private BeanMap beanMap;
private BeanMap beanMap;
public DynamicBean(Class superclass, Map<String, Class> propertyMap){
this.target =generateBean(superclass, propertyMap);
this.beanMap = ate(this.target);
}
/**
* bean 添加属性和值
*
* @param property
* @param value
*/
public void setValue(String property, Object value){
beanMap.put(property, value);
}
/**
* 获取属性值
*
* @param property
* @return
*/
public Object getValue(String property){
(property);
}
/**
* 获取对象
*
* @return
*/
public Object getTarget(){
return this.target;
}
/**
* 根据属性⽣成对象
*
* @param superclass
* @param propertyMap
* @return
*/
private Object generateBean(Class superclass, Map<String, Class> propertyMap){            BeanGenerator generator =new BeanGenerator();
if(null!= superclass){
generator.setSuperclass(superclass);
}
BeanGenerator.addProperties(generator, propertyMap);
ate();
}
}
}
处理逻辑
service层进⾏处理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。