代码改变世界

c# 行转列动态赋值给layui

2018-10-19 15:08  石吴玉  阅读(1558)  评论(0编辑  收藏  举报

数据库存储格式

期望前端显示样式

以下是代码:

(1)控制器:

        [HttpGet("SocialImportLedgerInfo")]
        public ResultData GetSocialImportLedgerInfo()
        {
            ResultData result = new ResultData();
            string json = socialHandler.RowsToColumn();
            if (json != null)
            {
                result.Data = json;
                result.Code = 200;
                result.Msg = "成功";
            }
            else
            {
                result.Data = null;
                result.Code = 500;
                result.Msg = "无数据";
            }

            return result;
        }

 

(2)逻辑层数据处理

       public string RowsToColumn()
        {
            string json = JsonConvert.SerializeObject(socialRepositories.RowsToColumn(), new KeyValuePairConverter());
            return json;
        }

 

 (3)仓储层数据源

        public object[] RowsToColumn()
        {
            var SocialImportLedgerInfo = (from b in db.SocialImportLedger
                                   where b.IsPaymentBill == 0
                                   select new
                                   {
                                       Name = b.Name,
                                       Value = b.Value,
                                       EmlpoyeeId = b.EmlpoyeeId
                                   }).ToArray();

            if (SocialImportLedgerInfo.Length > 0)
            {
                return SocialImportLedgerInfo.ToPivotArray(i => i.Name, i => i.EmlpoyeeId, items => items.Any() ? items.FirstOrDefault().Value : null);
            }
            else
            {
                return null;
            }
        }
    }

(4)行转列方法:ToPivotArray

   public static class RowToColumnHelper
    {
        public static dynamic[] ToPivotArray<T, TColumn, TRow, TData>(this IEnumerable<T> source, Func<T, TColumn> columnSelector, Expression<Func<T, TRow>> rowSelector, Func<IEnumerable<T>, TData> dataSelector)
        {
            var arr = new List<object>();
            var cols = new List<string>();
            string rowName = ((MemberExpression)rowSelector.Body).Member.Name;
            var columns = source.Select(columnSelector).Distinct();

            cols = (new[] { rowName }).Concat(columns.Select(x => x.ToString())).ToList();

            var rows = source.GroupBy(rowSelector.Compile())
                             .Select(rowGroup => new
                             {
                                 Key = rowGroup.Key,
                                 Values = columns.GroupJoin(
                                     rowGroup,
                                     c => c,
                                     r => columnSelector(r),
                                     (c, columnGroup) => dataSelector(columnGroup))
                             }).ToArray();

            foreach (var row in rows)
            {
                var items = row.Values.Cast<object>().ToList();
                items.Insert(0, row.Key);
                var obj = GetAnonymousObject(cols, items);
                arr.Add(obj);
            }

            return arr.ToArray();
        }

        private static dynamic GetAnonymousObject(IEnumerable<string> columns, IEnumerable<object> values)
        {
            IDictionary<string, object> eo = new ExpandoObject() as IDictionary<string, object>;
            int i;
            for (i = 0; i < columns.Count(); i++)
            {
                eo.Add(columns.ElementAt(i), values.ElementAt(i));
            }

            return eo;
        }
    }

(5)前端layui接收

@{
    ViewData["Title"] = "SocialSettlementPayment";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="layui-container">
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <table class="layui-hide" id="socialList" lay-filter="socialList"></table>
</div>
<script>
    var a;
    $.ajax({
        url: '/Social/SocialImportLedgerInfo',
        type: 'get',
        dataType: "json",
        success: function (result) {
            var b = JSON.parse(result.data);
            console.log(b);

            datalist = [{ checkbox: true, fixed: "left", width: 40, templet: '#indexTpl' }];

            $.each(b[0], function (name, value) {
                console.log(name);
                var f = {};
                f.field = name;
                f.title = name;
                f.width = 250;
                datalist.push(f);
            });
            console.log(datalist);

            layui.use('table', function () {
                var table = layui.table;

                //展示已知数据
                table.render({
                    elem: '#socialList'
                    , cols: [datalist]
                    , data: b
                    , even: true
                    , page: true //是否显示分页
                    , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                    ,limits: [10, 20, 50, 100, 500, 1000]
                    ,limit: 10 //每页默认显示的数量
                });

                //监听头工具栏事件
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id)
                        , data = checkStatus.data; //获取选中的数据
                    switch (obj.event) {
                        case 'add':
                            layer.msg('添加');
                            break;
                        case 'update':
                            if (data.length === 0) {
                                layer.msg('请选择一行');
                            } else if (data.length > 1) {
                                layer.msg('只能同时编辑一个');
                            } else {
                                layer.alert('编辑 [id]:' + checkStatus.data[0].id);
                            }
                            break;
                        case 'delete':
                            if (data.length === 0) {
                                layer.msg('请选择一行');
                            } else {
                                layer.msg('删除');
                            }
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'detail') {
                        layer.msg('查看操作');
                    } else if (layEvent === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del(); //删除对应行(tr)的DOM结构
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    } else if (layEvent === 'edit') {
                        layer.msg('编辑操作');
                    }
                });
            });
        }
    });
</script>