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

来源：互联网发布：高端保险知乎编辑：程序博客网时间：2024/04/29 02:41

一.下载并引用：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" onclick="saveUrlInfo()" style="width:90px">Save</a>        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="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; }    }

展示结构如下：

0 0