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"& ...
随机推荐
- Redis服务器的启动过程分析
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/127.html?1455808771 本文将通过分析代码来介绍Redis的 ...
- PHP标准库 (SPL) 笔记
简介 SPL是Standard PHP Library(PHP标准库)的缩写. The Standard PHP Library (SPL) is a collection of interfaces ...
- 1.安装Redis
首要条件:安装VMware,在虚拟机中安装CentOS. 安装步骤: 1.打开终端(Terminal) 2.在终端输入:wget http://download.redis.io/releases/r ...
- pycharm运行脚本为何不生成测试报告？
今日使用python+selenium编写自动化测试脚本并执行过程中,使用pycharm运行结果后发现脚本运行无报错,脚本中的操作也正常被执行,但就是没有生成测试报告. 为什么呢,为什么呢,生成测试报 ...
- 直接修改.NET程序集 LLBL Gen 2.x-4.x 许可授权方法研究
做数据库开发,如果要用ORM,LLBL Gen是一款优秀的框架和工具,目前最新版本是4.0.同时也推出了Lite免费版本,与Visual Studio的Express版本一样, 免费,但是它仅仅只支持 ...
- java中线程存活和线程执行的问题！
/* 下面的程序会出现下面的情况,当Thread-0, Thread-1, Thread-2都被wait的时候,可能会同时苏醒 Thread-0 put Thread-1 put Thread-2 p ...
- 开发笔记：基于EntityFramework.Extended用EF实现指定字段的更新
今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...
- Cocos2d-x 3.2 学习笔记（十）Joystick 搖杆控件
最近想做格鬥遊戲,那麼就要有搖杆控件,不想去看別人的代碼就自己寫了個搖杆控件,實現起來很簡單. 話不多說,看代碼: #ifndef __Joystick__ #define __Joystick__ ...
- 在使用androidStudio中所遇到的错误
错误如下所示 Error:Execution failed for task ':app:processDebugResources'.> com.android.ide.common.proc ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...