项目中学习---动态添加列

        最近做项目的时候，总会遇到，调用接口返回的list中不存在此的字段，可是需求缺要求显示某个字段。比如，需求要求显示的列表中有：订单状态和商品名称这两列，可是调用接口返回的值中只有订单id和商品id，那么我改怎么处理呢？

     跟着同事学 一手，感觉还挺好用：

            

$.ajax({
                type: "post",
                dataType: "json",
                data:data,
                url: contextPath+"/customer/findOrderByCustomerId.html",
                success: function(dataResult) {                 
                    if(dataResult.success){
                        var FinalItems;
                        if(dataResult.data!=null && typeof(dataResult.data)!="undefined"){
                            FinalItems =dataResult.data.items;
                            //动态添加skuName表头
                            avalon.each(FinalItems,function(i,data){
                                var name = "";
                                if(data.items!=null && typeof(data.items)!="undefined"){                                  
                                    avalon.each(data.items,function(j,datas){
                                        name += datas.skuName+"<br/>";
                                    })                                  
                                }
                                <span style="color:#ff0000;">data.skuName = name;</span>
                            })
                            //查找所有的订单状态
                            var allStatus=getStatus();
                            //再利用订单类型筛选订单状态                           
                            avalon.each(FinalItems,function(i,data){
                                var state ="";
                                if(allStatus!=null && typeof(allStatus)!="undefined"){                                   
                                    for(i=0;i<allStatus.length;i++){
                                        if(allStatus[i].status==data.status){
                                            state = allStatus[i].description;
                                            break;
                                        }                                       
                                    }   
                                }
                                //动态添加订单状态名称列
                                <span style="color:#ff0000;">data.statusName=state;</span>
                            })
                        }   
                    }
                }               
            })

这样在显示列表的时候就把新加的statusName字段和skuName作为列名显示就可以了

 

//订单记录
                   vm.$orderList = {
                              columns: [
                                  {key: "id", name: "订单编号",width:"15%",format:"getOrderIdLink"},
                                  {key: "type", name: "订单类型", width:"15%",format:"getType"},
                                  {key: "<span style="color:#ff0000;"><strong>skuName</strong></span>", name: "商品名称", width:"15%",format:"getSkuName"},
                                  {key: "remark", name: "备注", width:"15%",format:"isNull"},
                                  {key: "<span style="color:#ff0000;"><strong>statusName</strong></span>", name: "订单状态", width:"10%",format:"isNull"}
                              ],
                        //远程排序
                        remoteSort: function(field, trend, vmodel) {},
                             data :[]
                         }

       这种动态添加列的方法，在以前没有用过，所以我也不能下论断说easyui或者bootstrap不能这么用，但是后边遇到 了可以试着这么用一下，感觉好方便，不用重新定义页面vo，直接就可以用接口返回的Model。