MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是服务器系列之：【MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据】，下面是详细的分享！

MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

jQuery(document).ready(function () {

//jqGrid初始化
jQuery("#table1").jqGrid({
url: '/Home/UserList',
datatype: 'json',
mtype: 'POST',
colNames: ['登录名', '姓名', '年龄', '手机号', '邮箱地址', '操作'],
colModel: [
{ name: 'UserId', index: 'UserId', width: 180, editable: true },
{ name: 'UserName', index: 'UserName', width: 200, editable: true },
{ name: 'Age', index: 'Age', width: 150, editable: true },
{ name: 'Tel', index: 'Tel', width: 150, editable: true },
{ name: 'Email', index: 'Email', width: 150, editable: true },
{ name: 'Edit', index: 'Edit', width: 150, editable: false, align: 'center' }
],
pager: '#div1',
postData: {},
rowNum: 5,
rowList: [5, 10, 20],
sortable: true,
caption: '用户信息管理',
hidegrid: false,
rownumbers: true,
viewrecords: true
}).navGrid('#div1', { edit: false, add: false, del: false })
.navButtonAdd('#div1', {
caption: "编辑",
buttonicon: "ui-icon-add",
onClickButton: function () {
var id=$("#table1").getGridParam("selrow");
if (id==null) {
alert("请选择行！");
return;
}
if (id=="newId") return;
$("#table1").editRow(id);
$("#table1").find("#" + id + "_UserId").attr("readonly","readOnly");
$("#table1").setCell(id, "Edit", "");
}
}).navButtonAdd('#div1', {
caption: "删除",
buttonicon: "ui-icon-del",
onClickButton: function () {
var id=$("#table1").getGridParam("selrow");
if (id==null) {
alert("请选择行！");
return;
}
Delete(id);
}
}).navButtonAdd('#div1', {
caption: "新增",
buttonicon: "ui-icon-add",
onClickButton: function () {
$("#table1").addRowData("newId", -1);
$("#table1").editRow("newId");
$("#table1").setCell("newId", "Edit", "");
}
});
});

//取消编辑状态
function Cancel(id) {
if (id=="newId") $("#table1").delRowData("newId");
else $("#table1").restoreRow(id);
}

//向后台ajax请求新增数据
function Add() {
var UserId=$("#table1").find("#newId" + "_UserId").val();
var UserName=$("#table1").find("#newId" + "_UserName").val();
var Age=$("#table1").find("#newId" + "_Age").val();
var Tel=$("#table1").find("#newId" + "_Tel").val();
var Email=$("#table1").find("#newId" + "_Email").val();

$.ajax({
type: "POST",
url: "/Home/Add",
data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email,
success: function (msg) {
alert("新增数据: " + msg);
$("#table1").trigger("reloadGrid");
}
});
}

//向后台ajax请求更新数据
function Update(id) {
var UserId=$("#table1").find("#" + id + "_UserId").val();
var UserName=$("#table1").find("#" + id + "_UserName").val();
var Age=$("#table1").find("#" + id + "_Age").val();
var Tel=$("#table1").find("#" + id + "_Tel").val();
var Email=$("#table1").find("#" + id + "_Email").val();

$.ajax({
type: "POST",
url: "/Home/Update",
data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email,
success: function (msg) {
alert("修改数据: " + msg);
$("#table1").trigger("reloadGrid");
}
});
}

//向后台ajax请求删除数据
function Delete(id) {
var UserId=$("#table1").getCell(id, "UserId");
$.ajax({
type: "POST",
url: "/Home/Delete",
data: "UserId=" + UserId,
success: function (msg) {
alert("删除数据: " + msg);
$("#table1").trigger("reloadGrid");
}
});
}

以上就是关于MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据的服务器维护教程分享，更多电脑教程请移步到>>电脑教程频道。