【EasyUI-扩大在DataGrid显示次网格的行】

落日映苍穹つ 2022-08-23 05:43 159阅读 0赞

一.下载并引用：datagrid-detailview.js脚本文件

二.添加UrlInfo控制器,添加Index页面代码如下：

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Content/Scripts/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div style="margin-left:4px">
            <table id="dg"
                   url="SiteInfo/DataSiteInfo"
                   data-options="rowStyler: function(index,row){return 'background-color:#04477c;color:#fff;font-weight:bold;';}"
                   title="URL管理"
                   singleselect="true"
                   rownumbers="true"
                   fitcolumns="true"
                   pagination="true">
                <thead>
                    <tr>
                        <th field="_id" sortable="true" width="46">站点ID</th>
                        <th field="SiteNam" sortable="true" width="50">站点名称</th>
                        <th field="SiteDomainName" sortable="true" width="50">站点域名</th>
                        <th field="SiteDescription" sortable="true" width="50">站点描述</th>
                    </tr>
                </thead>
            </table>
        </div>
    
        <div id="dlg_UrlInfo" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons-UrlInfo" data-options="border:'thin'">
            <div class="ftitle" id="uriTitle"></div>
            <form id="fm_UrlInfo" method="post">
                <div class="fitem">
                    <label>URl名称:</label>
                    <input name="UrlName" class="easyui-textbox" required="true">
                </div>
                <div class="fitem">
                    <label>Url地址:</label>
                    <input name="UrlPath" class="easyui-textbox" required="true">
                </div>
                <div class="fitem">
                    <label>Url描述:</label>
                    <input name="UrlDescribe" class="easyui-textbox">
                </div>
            </form>
        </div>
    
        <div id="dlg-buttons-UrlInfo">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" οnclick="saveUrlInfo()" style="width:90px">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript: $('#dlg_UrlInfo').dialog('close')" style="width:90px">Cancel</a>
        </div>
    
        <script type="text/javascript">
            var SiteID;
            var UrlPath;
    
            $(function () {
                $('#dg').datagrid({
                    view: detailview,
                    detailFormatter: function (index, row) {
                        return '<div style="padding:2px"><table class="ddv" id="'+row._id+'"></table></div>';
                    },
                    onExpandRow: function (index, row) {
                        var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
                        ddv.datagrid({
                            url: 'urlinfo/Select?SiteID=' + row._id,
                            title: row.SiteNam,
                            fitColumns: true,
                            singleSelect: true,
                            rownumbers: true,  //显示行号的列
                            pagination: true,  //显示分页栏
                            singleSelect:false,//允许多行
                            loadMsg: '',
                            height: 'auto',
                            columns: [[
                                { field: '', checkbox: 'true', width: 30 }, //设置复选框
                                { field: '_id', title: 'ID', width: 100 },
                                { field: 'UrlPath', title: 'URL地址', width: 100, align: 'left', styler: cellStylerB },
                                { field: 'UrlName', title: 'URL名称', width: 100, align: 'left' },
                                { field: 'UrlDescribe', title: 'URL描述', width: 100, align: 'left' },
                                { field: 'CreateTime', title: '添加时间', width: 100, align: 'left' }
                            ]],
                            onResize: function () {
                                $('#dg').datagrid('fixDetailRowHeight', index);
                            },
                            onLoadSuccess: function () {
                                setTimeout(function () {
                                    $('#dg').datagrid('fixDetailRowHeight', index);
                                }, 0);
                            },
                            toolbar: [{
                                text: '添加',
                                iconCls: 'icon-add',
                                handler: function () {
                                    SiteID = row._id;
                                    UrlPath = "UrlInfo/Insert?SiteID=" + row._id;
                                    $("#uriTitle").html("站点：" + row.SiteNam);
                                    $('#dlg_UrlInfo').dialog('open').dialog('center').dialog('setTitle', '添加Url');
                                    $('#fm_UrlInfo').form('clear');
                                }
                            }, '-', {
                                text: '编辑',
                                iconCls: 'icon-edit',
                                handler: function () {
                                    //alert(row._id);
                                    SiteID = row._id;
                                    updateUrlInfo();
                                }
                            }, '-', {
                                text: '删除',
                                iconCls: 'icon-remove',
                                handler: function () {
                                    SiteID = row._id;
                                    deleteUrlInfo();
                                }
                            }]
                        });
                        $('#dg').datagrid('fixDetailRowHeight', index);
                    }
                });
            });
    
            //保存
            function saveUrlInfo() {
                //alert(SiteID)
                $('#fm_UrlInfo').form('submit', {
                    url: UrlPath,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        var result = eval('(' + result + ')');
                        //alert(result);
                        if (result.success) {
                            topCenter(result.msg, 1000);
                            $('#dlg_UrlInfo').dialog('close');          // close the dialog
                            $('#' + SiteID).datagrid('reload');         // reload the user dat
                        } else {
                            topCenter(result.msg, 1000);
                        }
                    }
                });
            }
    
            //删除
            function deleteUrlInfo() {
                var ids = [];
                var rows = $('#' + SiteID).datagrid('getSelections');
                if (rows.length > 0) {
                    $.messager.confirm('提示', '确定删除选中这些数据吗?', function (r) {
                        if (r) {
                            for (var i = 0; i < rows.length; i++) {
                                ids.push(rows[i]._id);
                            }
                            // alert(ids.join(','));
                            $.ajax({
                                url: "UrlInfo/Delete",
                                type: "post",
                                data: {
                                    _ids: ids.join(',')
                                },
                                success: function (result) {
                                    if (result.success) {
                                        topCenter(result.msg, 1000);
                                        $('#' + SiteID).datagrid('reload');           // reload the user dat
                                        $('#' + SiteID).datagrid('clearSelections');  //取消选择行
                                    } else {
                                        topCenter(result.msg, 1000);
                                    }
                                }
                            });
                        }
                    });
                } else { topCenter("请选择你需要删除的数据", 1000) };
            }
    
            //编辑
            function updateUrlInfo() {
                var row = $('#'+SiteID).datagrid('getSelected'); //编辑ID
                if (row) {
                    $('#dlg_UrlInfo').dialog('open').dialog('center').dialog('setTitle', '编辑URL'); //
                    $('#fm_UrlInfo').form('load', row);     //将选中行的数据填充进去
                    UrlPath = 'UrlInfo/Update?_id=' + row._id; //编辑地址
                } else {
                    topCenter("请选择你需要修改的数据", 1000)
                }
            }
    
            function cellStyler(value, row, index) {
                return 'background-color:#BD7803;color:red;';
            }
    
            function cellStylerB(value, row, index) {
                return 'background-color:#065fb9;color:#d4d4d4;';
            }
        </script>
    </body>
    </html>

控制器代码如下：提供接口调用

// GET: UrlInfo
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Insert()
            {
                return Json(new Url_DAL().GetInsert(Request.RequestContext), JsonRequestBehavior.AllowGet);
            }
    
            public ActionResult Select()
            {
                return Json(new Url_DAL().GetSelect(Request.RequestContext), JsonRequestBehavior.AllowGet);
            }
    
            public ActionResult Delete()
            {
                return Json(new Url_DAL().GetDelete(Request.RequestContext), JsonRequestBehavior.AllowGet);
            }
    
            public ActionResult Update()
            {
                return Json(new Url_DAL().GetUpdate(Request.RequestContext), JsonRequestBehavior.AllowGet);
            }

数据逻辑处理如下：

public class Url_DAL : MongoLink, IDateFactory
        {
            public Url_DAL() : base() { }
    
            public object GetInsert(RequestContext request)
            {
                var Request = request.HttpContext.Request;
                try
                {
                    string SiteID = Request.QueryString["SiteID"];
                    string UrlDescribe = Request["UrlDescribe"];
                    string UrlName = Request["UrlName"];
                    string UrlPath = Request["UrlPath"];
                    DateTime dt = DateTime.Now.ToLocalTime();
                    bool result = this.mh.Insert<tbUrl>(new tbUrl()
                    {
                        _id = Guid.NewGuid().ToString(),
                        CreateTime = dt,
                        CreateUserID = "a",
                        UrlDescribe = UrlDescribe,
                        UrlName = UrlName,
                        UrlPath = UrlPath,
                        SiteID = SiteID,
                        State = 1,
                        UpdateID = "a",
                        UpdateTime = dt
                    });
                    if (result)
                        return new { success = true, msg = "添加成功" };
                    else
                        return new { success = false, msg = "添加失败" };
                }
                catch (Exception ex)
                {
                    return new { success = false, msg = "系统异常" };
                }
            }
    
            public object GetSelect(RequestContext request)
            {
                var Request = request.HttpContext.Request;
                try
                {
                    string SiteID = Request.QueryString["SiteID"];
                    var order = Request["order"];
                    var page = Request["page"];
                    var rows = Request["rows"];
                    var sort = Request["sort"];
                    if (order == null || order == "asc") { order = " -1"; } else { order = "1"; } //1升序 -1降序
                    if (sort == null) { sort = "CreateTime"; }
                    var SiteList = this.mh.Find<tbUrl>(Query.And(Query.EQ("State",1), Query.EQ("SiteID",SiteID )), int.Parse(page), int.Parse(rows), new SortByDocument(sort, int.Parse(order)))
                        .Select(x => new
                        {
                            UrlName = x.UrlName,
                            UrlPath = x.UrlPath,
                            UrlDescribe = x.UrlDescribe,
                            _id = x._id,
                            CreateTime = x.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")
                        });
                    long total = this.mh.GetCount<tbUrl>(Query.And(Query.EQ("State", 1), Query.EQ("SiteID", SiteID)));
                    var obj = new { total = total, rows = SiteList };
                    return obj;
                }
                catch (Exception ex)
                {
                    return null;
                }
            }
    
            public object GetUpdate(RequestContext request)
            {
                var Request = request.HttpContext.Request;
                try
                {
                    //string SiteID = Request.QueryString["SiteID"];
                    string _id = Request.QueryString["_id"];
                    string UrlDescribe = Request["UrlDescribe"];
                    string UrlName = Request["UrlName"];
                    string UrlPath = Request["UrlPath"];
                    DateTime dt = DateTime.Now.ToLocalTime();
                    bool result = this.mh.Update<tbUrl>(Query.EQ("_id", _id),
                        Update.Set("UrlName", UrlName).
                        Set("UrlDescribe", UrlDescribe).
                        Set("UrlPath", UrlPath).
                        Set("CreateUserID", "b").
                        Set("UpdateTime", dt)
                        , "tbUrl");
                    if (result)
                        return new { success = true, msg = "修改成功" };
                    else
                        return new { success = false, msg = "修改失败" };
                }
                catch (Exception ex)
                {
                    return new { success = false, msg = "系统异常" };
                }
            }
    
            public object GetDelete(RequestContext request)
            {
    
                var Request = request.HttpContext.Request;
                try
                {
                    string[] _ids = Request["_ids"].Split(',');
                    for (int i = 0; i < _ids.Length; i++)
                    {
                        this.mh.Update<tbUrl>(Query.EQ("_id", _ids[i]), Update.Set("State", 0), "tbUrl");
                    }
                    return new { success = true, msg = "删除成功" };
                }
                catch (Exception ex)
                {
                    return new { success = false, msg = "删除失败" };
                }
            }
        }

/// <summary>
        /// URL详情表
        /// </summary>
        public class tbUrl:MongoBase
        {
            /// <summary>
            /// 站点ID
            /// </summary>
            public string SiteID { get; set; }
            /// <summary>
            /// URL地址
            /// </summary>
            public string UrlPath { get; set; }
            /// <summary>
            /// URL名称
            /// </summary>
            public string UrlName { get; set; }
            /// <summary>
            /// URL描述
            /// </summary>
            public string UrlDescribe { get; set; }
        }

展示结构如下：

![20160608163946251][]

[20160608163946251]: /images/20220721/487848872dff4a3da922929536499cf6.png