EasyUI-扩大在DataGrid显示次网格的行
一.下载并引用：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; }
}
展示结构如下：
EasyUI-扩大在DataGrid显示次网格的行的更多相关文章
- easyui datagrid显示进度条控制操作
在当我们需要控制时间前台实际项目页面datagrid显示进度条的数据加载时运行,和datagrid默认情况下只在有url加载运行时的数据显示方式的进度条.下面的代码手动控制: 打开一个进度条: $(' ...
- jQuery EasyUI教程之datagrid应用（三）
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用（二）
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...
- jQuery EasyUI教程之datagrid应用（一）
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建复杂树形网格
jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...
- EasyUi控件Datagrid
很久没有打开我的博客园,刚刚大概扫了一眼我之前写的笔记,关于Devexpress那篇居然有四千多的浏览记录,不知道对浏览过的博友有没有起到一点点作用.当然我写笔记仅仅只是给自己留个记忆,如果歪打正着帮 ...
- EasyUI 在aspx页面显示高度不正常解决办法
<body class="easyui-layout"> <form id="form1" runat="server"& ...
随机推荐
- js笔记——js数据类型转换
以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『数据类型转换』,以做备忘.更多内容请查看原文. JavaScript是一种动态类型语言,变量 ...
- jQuery实现全选、全不选、反选
如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...
- 22．编写一个类A，该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B，子类B创建的对象不仅可以调用方法showA输出小写的英文字母表，而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C，在主类的main方法 中测试类A与类B。
22．编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表.然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法sh ...
- 在 lua 中实现函数的重载
在 lua 中实现函数的重载.注:好吧,lua中原来可以实现重载...local function create() local arg_table = {} local function dispa ...
- Python字符进度条
Python字符进度条 看看这个神奇的module from tqdm import trange from time import sleep for r in trange(10, 1, -1): ...
- 使用maven下载jar包的source和javadoc
使用maven菜单下载sources和javadocs没什么反应,还是命令给力. 使用参数下载源码包与doc包: -DdownloadSources=true 下载源代码jar -DdownloadJ ...
- 快速了解SPA单页面应用
简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...
- 【WP 8.1开发】解决调用真实摄像头会死机的问题
无论你是用Silverlight还是用RT的API来开发,在使用MediaCapture拍照片或录视频时,要是在模拟器上运行会万事大吉:但是,一旦放到真实手机上运行,肯定有人发现了,细心的朋友肯定发现 ...
- Android自定义Dialog及其布局
实际项目开发中默认的Dialog样式无法满足需求,需要自定义Dialog及其布局,并响应布局中控件的事件. 上效果图: 自定义Dialog,LogoutDialog: 要将自定义布局传入构造函数中, ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...