Easyui 数据网格详细视图（DataGrid DetailView）

最新推荐文章于 2022-09-28 11:58:22 发布

小发发吖

最新推荐文章于 2022-09-28 11:58:22 发布

阅读量2.3k

点赞数

分类专栏： EasyUI 文章标签： mvc easyui

本文链接：https://blog.csdn.net/qq_36702996/article/details/76083305

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据网格详细视图，如图

一、页面上引入脚本

二、写table

<body>
    <div style="height:300px">
        <table id="dg" style="width:700px;height:250px"  >

</table>
    </div>
</body>

三、初始化table为datagrid，并且初始化详细视图

   <script type="text/javascript">

        $(function () {
            $('#dg').datagrid({
                fit: true,
                striped: true,   //斑马线
                title: "订单信息",
                rownumbers: true,
                singleSelect: true,
                idField: 'ID',
                columns: [[

                    { field: 'ID', title: '编号', width: 80, halign: 'center', hidden: 'true' },
                    { field: 'Username', title: '商户名称', width: 100, halign: 'center', },
                     { field: 'OrderCode', title: '订单号', width: 200, halign: 'center', },
                    { field: 'Date', title: '日期', width: 100, halign: 'center', formatter: DateTimeFormatter },
                ]],
                toolbar: "#tool",
                url: "@Url.Action("Get")",
                pagination: true,   //是否分页
                pageSize: 5,
                pageList: [5, 10, 15, 20],
                sortName: 'ID',
                sortOrder: 'desc',
                view: detailview, //视图类型为详细视图
                detailFormatter: function (index, row) {     //返回行明细内容的格式化函数。
                    return '<div style="padding:2px; height:50px""><table class="ddv"></table></div>';
                },
                onExpandRow: function (index, row) {     //当展开一行时触发。
                    var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
                    ddv.datagrid({
                        url: '@Url.Action("GetOrderDetail")?ID=' + row.ID,
                        fitColumns: true,
                        singleSelect: true,
                        rownumbers: true,
                        loadMsg: '',
                        height: 'auto',
                        columns: [[
                            { field: 'ID', title: '编号', width: 100 },
                             { field: 'ColorName', title: '颜色', width: 100 },
                             { field: 'Price', title: '单价', width: 100 },
                              { field: 'Count', title: '数量', width: 100 },
                            { field: 'ProName', title: '商品名称', width: 200 },
                            { field: 'SizeName', title: '鞋码', width: 100 }
                        ]],
                        onResize: function () { 
                            $('#dg').datagrid('fixDetailRowHeight', index);    //fixDetailRowHeight当展开一行时触发。
                        },  
                        onLoadSuccess: function () {
                            setTimeout(function () {
                                $('#dg').datagrid('fixDetailRowHeight', index);
                            }, 0);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight', index);
                }
            });
        })
    </script>

四、mvc 后台获取主页面和详细页面的方法

 public override ActionResult Get(int rows, int page, Order model) 
        {
            int count;
            var list = Bll.Search(model, true, x => x.ID,  rows,page,out count).Select(x => new { x.ID,x.OrderCode,x.CusId,Username=x.Users.Name,x.Date}).ToList();
            return Json(new { total = count, rows = list });        
        }


        public ActionResult GetOrderDetail(int ID) 
        {
           
            OrderDetailBll bll = new OrderDetailBll();
            var list = bll.Search(x=>x.OrderID==ID).Select(x => new { x.ID,ColorName=x.Color.Name,x.Count,x.Price,ProName=x.Product.Name,SizeName=x.Size.Name }).ToList();
            return Json(new { total = list.Count(), rows = list },JsonRequestBehavior.AllowGet);        
        }