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"& ...
随机推荐
- MVVM架构~使用boxy和knockoutjs实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
- Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1Python 3_x 新特性1python3.4新特性1python3.5新特性1值得关注的新特性1Pyth
Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1 Python 3_x 新特性1 python3.4新特性1 python3.5新特性1 值得关注的新特性1 ...
- iOS-数据持久化基础-沙盒机制
沙盒详解 1.IOS沙盒机制 IOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文 ...
- 比较Java数组,ArrayList,LinkedList,Vector 性能比较
public class PerformanceTester { public static final int TIMES=100000; public static abstract class ...
- C# 进制转换 （没有数值的长度限制）
曾经在大学时做过一个c的进制转换算法,那时由于技术的局限性,数值的大小受到限制(系统数据类型长度限制),多年以后,自己那台学习机陈旧后感觉要报废了,整理了一下里面的东西,偶尔在一个角落里发现了这个转换 ...
- CentOS 下运维自动化 Shell 脚本之 expect
CentOS 下运维自动化 Shell脚本之expect 一.预备知识: 1.在 Terminal 中反斜杠,即 "" 代表转义符,或称逃脱符.("echo -e与pri ...
- JavaScript将输入的数字金额转换成对应的中文大写金额
// 将输入的数字金额转换成对应的中文大写金额 // idNumber输入的数字金额,idCHN输出的中文大写金额 function TransformNumberIntoCHN(idNumber, ...
- 【WP 8.1开发】如何处理摄像头翻转的问题
模拟器就像我们儿时的梦境,在其上运行应用程序时,一切总是那么美好的:而真机测试如同我们这个纷乱无章的现实世界,你会遇到各种小人和畜生,常常会遭受莫名的挫折.面对挫折,有人迎难而上,或不予理采,走自己的 ...
- MVVM模式下，ViewModel和View，Model有什么区别
摘自正美的5群 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就是展现出来的用户界面. 基本上,绝大多数软件所做的工 ...
- 总结整理 -- python系列
python系列 python--基础学习(一)开发环境搭建,体验HelloWorld python--基础学习(二)判断 .循环.定义函数.继承.调用 python--基础学习(三)字符串单引号.双 ...