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"& ...
随机推荐
- [Java面试一]面试复习大纲.
一.Java基础部分 (搞定所有技术之后才考虑复习的技术点) 1.数组中的排序问题(笔试或者机试,前者可能性更大) 2.面向对象的理解 3.集合相关的问题,比如hashmap跟hashtable的区别 ...
- 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编 赵静 译 ISBN 978-7-121-21769-2 2 ...
- C#学习系列-抽象方法与虚拟方法的区别
参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9838&ct=31054 如 ...
- ftp下载目录下所有文件及文件夹内(递归)
ftp下载目录下所有文件及文件夹内(递归) /// <summary> /// ftp文件上传.下载操作类 /// </summary> public class FTPH ...
- sdk更新代理设置
sdk更新代理设置 http://www.cnblogs.com/zhoujg/p/4560998.html
- javascript类型系统——字符串String类型
× 目录 [1]定义 [2]引号 [3]反斜线[4]特点[5]转字符串 前面的话 javascript没有表示单个字符的字符型,只有字符串String类型,字符型相当于仅包含一个字符的字符串 字符串S ...
- android target unknown and state offline解决办法
没有错,将adb的版本升级一下就好了! 下载地址为:http://files.cnblogs.com/files/hujunzheng/adb1.0.32.zip
- poj 1950 Dessert（dfs枚举,模拟运算过程）
/* 这个代码运行的时间长主要是因为每次枚举之后都要重新计算一下和的值! 如果要快的话,应该在dfs,也就是枚举的过程中计算出前边的数值(这种方法见第二个代码),直到最后,这样不必每一次枚举都要从头再 ...
- 单机redis 主从实例
环境windows xp sp3 1.redis 安装 redis windows安装文件下载地址:http://code.google.com/p/servicestack/wiki/RedisWi ...
- Spark入门实战系列--3.Spark编程模型（下）--IDEA搭建及实战
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 . 安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语 ...