C# .net mvc传输数据、微信小程序实现复杂表格 （三）

效果图

mvc 代码

        public class ReportC
        {
            public string id { get; set; }
            public string name { get; set; }
            public string value { get; set; }
            public List<ReportC> children { get; set; }
        }

        public string GetReportJson(string dataname)
        {
            //此处未用到 dataname 属性
            ReportC reportC_1_1 = new ReportC() { id = "table0011", name = "基本工资", value = "3000", children = null };
            ReportC reportC_1_2 = new ReportC() { id = "table0012", name = "绩效工资", value = "1200", children = null };

            ReportC reportC_1_3_1 = new ReportC() { id = "table00131", name = "课时工资", value ="800", children = null };
            ReportC reportC_1_3_2 = new ReportC() { id = "table00132", name = "超课时工资", value = "200", children = null };

            ReportC reportC_1_3 = new ReportC() { id = "table0013", name = "基本工作量", value = null, children = new List<ReportC>() { reportC_1_3_1, reportC_1_3_2 } };
          
            ReportC reportC_1 = new ReportC() { id = "table001", name = "基础工资", value = null, children = new List<ReportC>() { reportC_1_1, reportC_1_2, reportC_1_3 } }; //基础工资

            ReportC reportC_2_1 = new ReportC() { id = "table0021", name = "工作日加班", value = "1000", children = null };
            ReportC reportC_2_2 = new ReportC() { id = "table0022", name = "周末加班", value = "600", children = null };
           
            ReportC reportC_2 = new ReportC() { id = "table002", name = "加班工资", value = null, children = new List<ReportC>() { reportC_2_1, reportC_2_2 } }; //加班工资  里面分了工作日加班和周末加班          
            
            ReportC reportC_3 = new ReportC() {id= "table003", name= "岗位工资", value="1800",children=null }; //岗位工资        
           
            ReportC reportC_4 = new ReportC() { id = "table004", name = "合计", value = "8600", children = null }; //合计

            List<ReportC> result = new List<ReportC>() { reportC_1, reportC_2, reportC_3, reportC_4 };

            return JsonConvert.SerializeObject(result);
        }

小程序中 WXML代码

<!--pages/Report/Report.wxml-->
<view style="display:flex;align-items:center;justify-content:center;">报表</view>
<view class='table-wrapper'>
    <view class='row1' wx:if='{{list.length > 0}}' wx:for='{{list}}' wx:key='{{item.id}}'>    <!--循环数据-->
      <text class='text'>{{item.name}}</text>  <!--数据名称-->
      <view class='column2-wrapper'>   
        <view class='column-value' wx:if='{{item.value}}'>{{item.value}}</view> <!--有值得直接显示值-->
        <view class='column2' wx:if='{{item.children.length > 0}}' wx:for='{{item.children}}' wx:for-item='item2' wx:key='{{item2.id}}'><!--有子项得显示子项-->
          <text class='text'>{{item2.name}}</text>  <!--显示得子项名称-->
          <view class='column3-wrapper'>
            <view class='column-value' wx:if='{{item2.value}}'>{{item2.value}}</view>  <!--显示子项值-->
            <view class='column3' wx:if='{{item2.children.length > 0}}' wx:for='{{item2.children}}' wx:for-item='item3' wx:key='{{item3.id}}'> <!--显示子项得子项-->
              <text class='text'>{{item3.name}}</text> <!--子项得子项得名称-->
              <view class='column4-wrapper'>
                <view class='column-value' wx:if='{{item3.value}}'>{{item3.value}}</view> <!--子项得子项得值-->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

WXSS代码

/* pages/Report/Report.wxss */
.container{
  position:absolute;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.table-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1rpx solid #DCDFE6;
}
.title-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;
}
.row1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 32rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #DCDFE6;
  
}

.text {
  flex: 1;
  padding: 10rpx;
  line-height: 60rpx;
  height: 60rpx;
}

.column2-wrapper {
  display: flex;
  flex-direction: column;
  flex: 3;
  justify-content: center;
  border-left: 1rpx solid #DCDFE6;
}

.column2 {
  display: flex;
  flex: 1;
  align-items: center;
  border-bottom: 1rpx solid #DCDFE6;
}

.column2:last-child{
  border-bottom: none;
}

.column3-wrapper {
  display: flex;
  flex-direction: column;
  flex: 2;
  justify-content: center;
  border-left: 1rpx solid #DCDFE6;
}

.column3 {
  display: flex;
  flex: 1;
  align-items: center;
  border-bottom: 1rpx solid #DCDFE6;
}

.column3:last-child{
  border-bottom: none;
}

.column-value{
  display: flex;
  align-self: flex-end;
  margin-right: 10rpx;
  padding: 10rpx;
  line-height: 60rpx;
  height: 60rpx;
}

.column4-wrapper{
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-left: 1rpx solid #DCDFE6;
}

JS代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {  
    var th=this;
      let name=wx.getStorageSync('dataname');  //从别的界面跳转过来的，记录选择的数据名
      wx.request({
        url: 'http://192.168.1.9/WX/GetReportJson',  
        data:{dataname:name},
        success: function(res) {
          console.log(res.data);    
          th.setData({list:res.data});
        },
        fail:function(res){
  console.log("失败!");
        },
      })
  }
  })

参考链接：https://blog.csdn.net/solocoder/article/details/81393557