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

最新推荐文章于 2024-04-13 07:06:41 发布

小何同学_

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量1.4k

点赞数

分类专栏： [02] MVC随笔 [04] MongoDB随笔 [12] EasyUI 文章标签： easyui MVC MongoDB

本文链接：https://blog.csdn.net/heyangyi_19940703/article/details/51614093

版权

[12] EasyUI 同时被 3 个专栏收录

12 篇文章 2 订阅

订阅专栏

[02] MVC随笔

11 篇文章 0 订阅

订阅专栏

[04] MongoDB随笔

6 篇文章 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; }
    }

展示结构如下：