WTM+LayUI Table显示汇总数据

Posted cherish

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WTM+LayUI Table显示汇总数据相关的知识,希望对你有一定的参考价值。

一、需求描述

WTM框架在ListVM的InitGridHeader()方法中提供SetShowTotal()的方法,但此方法只是在Table最下面显示了合计行,但并没有实际的合计数据,故需要自己计算合计数据。

二、解决思路

将获取到的Table数据,手动进行求和,并将其传到前端。

参考layui的说明文档:https://layui.dev/docs/table/#cols.totalRow

 

三、代码实现

Controller中的实现

 [ActionDescription("SearchHLineYield")]
        [HttpPost]
        public IActionResult SearchHLineYield(ELM.ViewModel.ProManage.HLineYieldVMs.HLineYieldSearcher searcher)
        
            var vm = Wtm.CreateVM<ELM.ViewModel.ProManage.HLineYieldVMs.HLineYieldListVM>(passInit: true);
            if (ModelState.IsValid)
            
                vm.Searcher = searcher;
                var result0 = vm.GetJson(false);
                var list = vm.GetEntityList();//获取返回的数据

               var planYieldSum= list.Sum(x => x.HLineYield_PlanYield);//手动计算合计值
                var yieldSum = list.Sum(x => x.HLineYield_Yield);
                var goodCntSum = list.Sum(x => x.HLineYield_GoodCnt);
                var testCntSum = list.Sum(x => x.HLineYield_TestCnt);
                var wScrapCntSum = list.Sum(x => x.HLineYield_WScrapCnt);
                var mScrapCntSum = list.Sum(x => x.HLineYield_MScrapCnt);
                Dictionary<string, object> dic = new Dictionary<string, object>();
                object value0 = new
                
                    HLineYield_PlanYield = planYieldSum,//此名称必须和ListVM中的列名相同
                    HLineYield_Yield = yieldSum,
                    HLineYield_GoodCnt = goodCntSum,
                    HLineYield_TestCnt = testCntSum,
                    HLineYield_WScrapCnt = wScrapCntSum,
                    HLineYield_MScrapCnt = mScrapCntSum
                ;

                dic.Add("totalRow", value0);//将合计值放到 totalRow的对象中

                return Content( result0.AddDTExtInfo(dic));//将totalRow内容塞到返回数据的前面 并返回
            
            else
            
                return  Content( vm.GetError());
            
        

扩展方法AddDTExtInfo

   /// <summary>
       /// 给DataTable添加额外的数据
       /// </summary>
       /// <param name="oriStr">源字符串</param>
       /// <param name="dic">添加的数据的字典</param>
       /// <returns></returns>
        public static string AddDTExtInfo(this string oriStr,Dictionary<string,object> dic)
        
            string valueJson = System.Text.Json.JsonSerializer.Serialize(dic).TrimStart(\'\').TrimEnd(\'\') + ",";
            return oriStr.Insert(1, valueJson);
        

注意:最后不要忘了在ListVM的InitGridHeader()方法中写上SetShowTotal()的方法

 

WTM_LayUI 二级联动

cshtml页面:

1 <wt:combobox field="Entity.ServicenameCodeID" items="AllServicenameCodes" link-field="@Model.AllshippingmethodsID" trigger-url="/ChannelApiInfor/GetServicenameIDByshippingmethod" />
2         <wt:combobox field="@Model.AllshippingmethodsID" items="Allshippingmethods" multi-select="true" />

 控制器方法:

1 [ActionDescription("级联")]
2         public IActionResult GetServicenameIDByshippingmethod(Guid id)
3         {
4            var vm= DC.Set<ShippingMethod>().Where(c => c.ServicenameCodeID == id).Select(m=> new { Text=m.cnname,Value=m.ID}).ToList();
5             
6             return Json(vm);
7         }

另外可以参照一下图片:

技术分享图片

技术分享图片

以上是关于WTM+LayUI Table显示汇总数据的主要内容,如果未能解决你的问题,请参考以下文章

WTM_LayUI 二级联动

WTM框架使用技巧之:Layui版本嫁接Vue+ElementUI

Layui 使用问题汇总

3个值得学习和练手的.net企业级开源项目,强烈推荐

layui table toolbar的使用

layui的数据表格(table)分页篇