WTM LYUI版本修改 grid 列统计

解决问题

wtm 是一个基于.netcore 和efcore 的快速开发框架 非常好用，这里主要说说layui项目的应用，作者对layui进行了高度封装，使框架代码高度集成，非常好用，但是高度集成的代码，就决定了对细节调整比较麻烦，这里以listvm(layui-table)的统计 数据显示为例，layui默认显示为保留小数点两位位，因为需求需要调整为整数显示

---

一、WTM中listvm显示统计列表

wtm的lsitvm 非常好用，要显示统计列表，只需要在listvm中添加如下代码，如下，非常好用

 //在框架代码listvm中的下面方法，添加SetShowTotal() 就能出现统计

 protected override IEnumerable<IGridColumn<TESTMD_View>> InitGridHeader()
        {
            return new List<GridColumn<TESTMD_View>>{
                this.MakeGridHeader(x => x.Money).SetShowTotal(),
                this.MakeGridHeader(x => x.person).SetShowTotal(),
                this.MakeGridHeader(x => x.Adder),
                this.MakeGridHeaderAction(width: 200)
            };
        }

 显示效果如下

但是很明显，第二个统计显示显示小数点后两位感觉不是那么和谐 

二、修改

1.找到layui 看遍所有文档，似乎layui-table 本来就不支持修改这个统计

layui临时备份页面，官网已经下线，很可惜 table 数据表格文档 - Layui

2.现在办法可以直接修改源码，增加layui配置项，再修改wtm的UIhelper 实现，但是个人感觉还是有点麻烦，于是再度娘搜索一下，看是否有取巧之法

baidu之后，看见不少方法，觉得可行，直接引用，感觉都是报错，或者是没效果。于是根据百度方法，修改下如下：

思路大概就是在表格渲染后，js函数查找当前统计的数据显示dom的显示。f12 查看dom 可以看到该dom的ID特征非常明显

整理分析后，终结为以下js函数 便可直接定位到对应dom,并直接修改dom显示

<script>


//主要函数找到需要修改的dom，并去掉小数点后两位 注意这个id是显示列的序号
    function fnGetTotalDiv(id) {
        var divArr = $(".layui-table-total div.layui-table-cell");
        var a = $(divArr).eq(id);
        var content = a.html();
        content = content.replace(".00", "");
        a.html(content);
    };
</script>

3. 修改wtm框架对应的Index.cshtml视图文件

如下，在对应的Index.cshtml 添加代码 如下

@model TEST.areats.ViewModels.TESTMDVMs.TESTMDListVM
@inject IStringLocalizer<Program> Localizer;

<wt:searchpanel vm="@Model" reset-btn="true">
<wt:row items-per-row="ItemsPerRowEnum.Three">
<wt:textbox field="Searcher.Money" />
<wt:textbox field="Searcher.person" />
<wt:textbox field="Searcher.Adder" />
</wt:row>
</wt:searchpanel>
<wt:grid vm="@Model" url="/areats/TESTMD/Search" done-func="fun_test"/>


<script>
    ///添加如下js函数，并绑定wtm提供的渲染后函数
    function fun_test(data, count, curr) {

        //这里指定列号 如果有显示序号，需要包括前面的序号
        fnGetTotalDiv(3);
     


    }


    function fnGetTotalDiv(id) {
        var divArr = $(".layui-table-total div.layui-table-cell");
        var a = $(divArr).eq(id);
        var content = a.html();
        content = content.replace(".00", "");
        a.html(content);
    };
</script>

修改后效果如下 

很明显达到了预期效果。 

---

总结

这里只是修改了dom显示，并没有对数据进行处理，还有js函数也不太智能，还需要完善，但主要还是达到了显示效果