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门 ...
随机推荐
- 知方可补不足～sqlserver中使用ROW_NUMBER进行的快速分页
回到目录 这个在SQL2005之后最见的一种分页方式,也是Linq默认生成的执行分页的方法(skip,take),当然在性能上小数量没有问题,在数据达到百万时会很慢,这是我们要清楚的,有时我们在LIN ...
- 3 分钟轻松搭建 Ruby 项目自动化持续集成
任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这是一篇关于 Ruby 项目持续集成的快速指导教程,教大家如何使用 f ...
- WebBrowser设置Cookie
在winform里面经常会用到WebBrowser,这是一个难点就是如何设置cookies,注意,Docment对象是只读的,所以WebBrowser.Docment.cookie也就只有get方法, ...
- 为什么项目的jar包会和tomcat的jar包冲突？
为什么项目的jar包会和tomcat的jar包冲突? 碰到这个问题,猜测tomcat启动时会将自己的lib和项目的lib在逻辑上归并为一个大的lib,但是并没有做版本区分以及去重,这样相同的包可能就有 ...
- vsCode 添加浏览器调试和js调试的方法
1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: { "version": "0. ...
- 如何下载android官网Lib包
例如:https://dl-ssl.google.com/android/repository/sources-23_r01.zip
- js选择目录
找了好久,终于找到了! function browseFolder(path) {//打开本地目录(目录选择功能) try { var Message = "\u8bf7\u9009\u62 ...
- 邻接矩阵有向图(三)之 Java详解
前面分别介绍了邻接矩阵有向图的C和C++实现,本文通过Java实现邻接矩阵有向图. 目录 1. 邻接矩阵有向图的介绍 2. 邻接矩阵有向图的代码说明 3. 邻接矩阵有向图的完整源码 转载请注明出处:h ...
- 轻松自动化---selenium-webdriver(python) (六)
本节知识点: 操作对象: · click 点击对象 · send_keys 在对象上模拟按键输入 · clear 清除对象的内容,如果可以的话 WebElement 另一些常用方法: · text ...
- web接口开发与测试
最近一直在学习和整理web开发与接口测试的相关资料.接口测试本身毫无任何难度,甚至有很多工具和类库来帮助我们进行接口测试.大多测试人员很难深入了解web接口测试的原因是对web开发不太了解,当你越了解 ...