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架构~使用boxy和knockoutjs实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
- 第2讲 Redis常用命令与高级应用
目录 一.redis数据类型 5. sorted sets类型和操作 二.Redis常用命令 1.键值相关命令 2.服务器相关命令 三. redis高级应用 1. 给redis服务器设置密码 2.持久 ...
- 关于python的最大递归层数详解
在阅读http://www.cnblogs.com/skabyy/p/3451780.html这篇文章的时候,实验yield的流式迭代素数的时候发现有个问题,故详细记录下来. 首先来看看python默 ...
- Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针
Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针 1.1. java方法引用(Method References) 与c#委托与脚本语言js ...
- 《鸟哥的linux私房菜》 - linux命令温故而知新
在公司的某角落里,看到了<鸟哥的linux私房菜>,顿时想看看是什么鬼. 其他时候还要自己去买才有,现在正好,比图书馆方便.看完了,写点啥! 编辑器很重要,一个vim就主要是我的使用方向: ...
- ubuntu下在apache部署python站点
ubuntu下在apache部署python站点 我的是ubuntu14 32为的虚拟机,默认安装的python为3.4 环境:apache + mysql + django + python3 软件 ...
- 利用border属性制作各种图形。
这是一个比较正常的 但如果我们把宽度和高度去掉呢? 好像看不太出来对吧,我们来给边框加上不同颜色. 看出啥了没,分明就是每个边都是一个三角形啊. 那假如我想要一个朝下的三角形是不是我只要把border ...
- WCF传输1-你是否使用过压缩或Json序列化？
1.当遇到需要传输大量数据时,怎么样传输数据? 2.压缩数据有哪几种常见的方式? 问题1解答:通过压缩来传输数据 问题2解答: (1)WCF自带的压缩方式 (2)自定义WCF binding进行压缩 ...
- java JFileChooser选择文件和保存文件
//文件过滤器import java.io.File; import javax.swing.filechooser.FileFilter; public class MyFilter extends ...
- 浅谈AngularJS中的$parse和$eval
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...