一.下载并引用：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</th>
<th field=">站点名称</th>
<th field=">站点域名</th>
<th field=">站点描述</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: }, //设置复选框
{ field: },
{ field: , align: 'left', styler: cellStylerB },
{ field: , align: 'left' },
{ field: , align: 'left' },
{ field: , align: 'left' }
]],
onResize: function () {
$('#dg').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}, );
},
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, );
$('#dlg_UrlInfo').dialog('close'); // close the dialog
$('#' + SiteID).datagrid('reload'); // reload the user dat
} else {
topCenter(result.msg, );
}
}
});
}
//删除
function deleteUrlInfo() {
var ids = [];
var rows = $('#' + SiteID).datagrid('getSelections');
) {
$.messager.confirm('提示', '确定删除选中这些数据吗?', function (r) {
if (r) {
; 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, );
$('#' + SiteID).datagrid('reload'); // reload the user dat
$('#' + SiteID).datagrid('clearSelections'); //取消选择行
} else {
topCenter(result.msg, );
}
}
});
}
});
} ) };
}
//编辑
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()
}
}
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 = ,
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"];
"; } //1升序 -1降序
if (sort == null) { sort = "CreateTime"; }
), 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")
});
), 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(',');
; i < _ids.Length; i++)
{
), "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; }
}
展示结构如下：