EasyUI-datagrid数据展示+MongoDB数据操作
使用EasyUI-datagrid进行数据展示：进行添加，修改，删除操作逻辑代码，数据源来自MongoDB.
一.新建SiteInfo控制器，添加Index页面：http://www.cnblogs.com/heyangyi/p/5703904.html
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Content/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
@*展示区域*@
<div style="margin-left:4px;">
<table id="dg_Siteinfo" title="站点管理" class="easyui-datagrid"
url="SiteInfo/DataSiteInfo"
toolbar="#toolbar_Siteinfo"
pagination="true"
idfield="_id"
rownumbers="true"
fitcolumns="true"
singleselect="fales">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th field=">站点ID</th>
<th field=">站点名称</th>
<th field=">站点域名</th>
<th field=">站点描述</th>
<th field=">添加时间</th>
</tr>
</thead>
</table>
<div id="toolbar_Siteinfo">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">添加站点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">编辑站点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">删除站点</a>
</div>
</div>
@*添加面板*@
<div id="dlg_Siteinfo" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
<div class="ftitle">Site Information</div>
<form id="fm_Siteinfo" method="post">
<div class="fitem">
<label>站点名称:</label>
<input name="SiteNam" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>站点域名:</label>
<input name="SiteDomainName" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>站点描述:</label>
<input name="SiteDescription" class="easyui-textbox">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#dlg_Siteinfo').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg_Siteinfo').dialog('open').dialog('center').dialog('setTitle', '添加站点');
$('#fm_Siteinfo').form('clear');
url = 'SiteInfo/Insert';//添加地址
}
function editUser() {
var row = $('#dg_Siteinfo').datagrid('getSelected'); //编辑ID
if (row) {
$('#dlg_Siteinfo').dialog('open').dialog('center').dialog('setTitle', '编辑站点'); //
$('#fm_Siteinfo').form('load', row); //将选中行的数据填充进去
url = 'SiteInfo/Update?_id=' + row._id; //编辑地址
} else {
topCenter()
}
}
function saveUser() {
$('#fm_Siteinfo').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
//alert(result);
if (result.success) {
topCenter(result.msg, );
$('#dlg_Siteinfo').dialog('close'); // close the dialog
$('#dg_Siteinfo').datagrid('reload'); // reload the user dat
} else {
topCenter(result.msg, );
}
}
});
}
function destroyUser() {
var ids = [];
var rows = $('#dg_Siteinfo').datagrid('getSelections');
) {
$.messager.confirm('提示', '确定删除选中这些数据吗?', function (r) {
if (r) {
; i < rows.length; i++) {
ids.push(rows[i]._id);
}
// alert(ids.join(','));
$.ajax({
url: "SiteInfo/Delete",
type: "post",
data: {
_ids: ids.join(',')
},
success: function (result) {
if (result.success) {
topCenter(result.msg, );
$('#dg_Siteinfo').datagrid('reload'); // reload the user dat
$('#dg_Siteinfo').datagrid('clearSelections'); //取消选择行
} else {
topCenter(result.msg, );
}
}
});
}
});
} ) };
}
</script>
</body>
</html>
新增以下类：使用MongoDB进行数据存储，MongoDB.NET 操作参考:
public interface IDateFactory
{
object GetInsert(RequestContext request);
object GetSelect(RequestContext request);
object GetUpdate(RequestContext request);
object GetDelete(RequestContext request);
}
public class MongoLink
{
public MongoDbHelper mh { get; set; }
public MongoLink()
{
try
{
string MongoDBHost= ConfigurationManager.AppSettings["MongoDBHost"];//MongoDB所在IP地址
string MongoDBPort=ConfigurationManager.AppSettings["MongoDBPort"]; //MongoDB端口
string MongoDBTimeOut=ConfigurationManager.AppSettings["MongoDBTimeOut"];//请求超时时间
mh = new MongoDbHelper(MongoDBHost, MongoDBPort, MongoDBTimeOut);
}
catch (Exception ex)
{
mh = ");
}
}
}
public class Site :MongoLink, IDateFactory
{
public Site() : base() { }
public object GetInsert(RequestContext request)
{
var Request = request.HttpContext.Request;
try
{
string SiteNam = Request["SiteNam"];
string SiteDomainName = Request["SiteDomainName"];
string SiteDescription = Request["SiteDescription"];
DateTime dt = DateTime.Now.ToLocalTime();
bool result= this.mh.Insert<tbSite>(new tbSite() {
_id = Guid.NewGuid().ToString(),
CreateTime = dt ,
CreateUserID="a",
SiteDescription = SiteDescription,
SiteDomainName = SiteDomainName,
SiteNam=SiteNam,
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
{
var order = Request["order"];
var page = Request["page"];
var rows = Request["rows"];
var sort = Request["sort"];
"; } //1升序 -1降序
if (sort == null) { sort = "CreateTime"; }
), int.Parse(page), int.Parse(rows), new SortByDocument(sort, int.Parse(order)))
.Select(x => new
{
SiteNam = x.SiteNam,
SiteDomainName = x.SiteDomainName,
SiteDescription = x.SiteDescription,
_id = x._id,
CreateTime = x.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")
});
));
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 _id = Request.QueryString["_id"];
string SiteNam = Request["SiteNam"];
string SiteDomainName = Request["SiteDomainName"];
string SiteDescription = Request["SiteDescription"];
DateTime dt = DateTime.Now.ToLocalTime();
bool result = this.mh.Update<tbSite>(Query.EQ("_id", _id),
Update.Set("SiteNam", SiteNam).
Set("SiteDomainName", SiteDomainName).
Set("SiteDescription", SiteDescription).
Set("CreateUserID", "b").
Set("UpdateTime", dt)
, "tbSite");
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++)
{
), "tbSite");
}
return new { success = true, msg = "删除成功" };
}
catch (Exception ex)
{
return new { success = false, msg = "删除失败" };
}
}
}
二.添加效果:
三.修改效果：
四.删除效果
五.使用MongoSVG工具查看数据：
EasyUI-datagrid数据展示+MongoDB数据操作的更多相关文章
- Jquery easyUI datagrid载入复杂JSON数据方法
1.JSON数据为: { "total":28, "rows": [ { "itemNo": "1&q ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- jquery easyui datagrid 远程加载数据----javascript法
jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- easyui datagrid 动态加载数据 渲染问题，表格错位问题
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...
- jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案
起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...
- easyui datagrid 后台返回所有数据，前台分页
function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'fu ...
- Easyui datagrid 绑定本地Json数据
var jsonstr = '{"total":1,"rows":[{"id":"M000005","name ...
- Java电商项目-6.实现门户首页数据展示_Redis数据缓存
目录 项目的Github地址 需求介绍 搭建Redis集群环境 下面先描述单机版redis的安装 下面将进行Redis3主3从集群环境搭建 基于SOA架构, 创建门户ashop-portal-web门 ...
随机推荐
- MVVM架构~knockoutjs系列之验证信息自定义输出~续
返回目录 上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...
- Atitit.架构设计趋势 设计模式 ---微服务架构 soa
Atitit.架构设计趋势 设计模式 ---微服务架构 soa 什么是微服务架构?1 .微服务与SOA的关系 :微服务架架构师面向服务架构(SOA)的一种特定实现1 微服务与康威定律2 微服务的一些 ...
- iOS-应用打包发布常见问题
这个月公司安排我一个人做iOS客户端开发,由于急着用,我先发布一个版本,由于第一次发布iOS应用,期间出了不少问题,记录于此. 1.使用Application Loader 发布时报错:Communi ...
- IBM appscan 9.0破解版分享
简介:IBM AppScan该产品是一个领先的 Web 应用安全测试工具,曾以 Watchfire AppScan 的名称享誉业界.Rational AppScan 可自动化 Web 应用的安全漏洞评 ...
- 【总结】探索Newlife组件：服务代理利器XAgent的前世今生
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html Newlife XCode组件相关文章目录:http://www.cn ...
- SharePoint Server 2013开发之旅（四）：配置工作流开发和测试环境
工作流这个功能,在SharePoint Server 2013中做了很大的改动.我们可以从微软官方的文档中了解一下大概的情况 http://technet.microsoft.com/zh-cn/li ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- C语言打印记事本内搜索字符串所在行信息
本程序采用C语言编写,使用方法: 1.双击“甲骨文字符串查询作品.exe”运行程序; 2.运行前请确保此可执行程序目录下有1.txt文件. 3.根据提示输入一个字符串,程序将显示存在所搜索字符串的所有 ...
- Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编
Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编 对于许多在windows 上调试代码的人而言, Intel IA32格式的汇编代码可能并不陌生,因为种 ...