当前位置:数据库 > mongodb >>

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


看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作。表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB。nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁。由于其本身的“非关系”的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的“ORM”框架。


 
  下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取,并展示在前台Jqgrid表格上。这个“简易系统”的基本设计思想是这样的:我们在视图层展示表格,Jqgrid相关Js逻辑全部放在一个Js文件中,控制层实现了“增删查改”四个业务,MongoDB的基本数据访问放在了模型层实现。下面我们一步步实现。  www.zzzyk.com  

一、实现视图层Jqgrid表格逻辑
 
  首先,我们新建一个MVC空白项目,添加好jQuery、jQueryUI、Jqgrid的前端框架代码:
  然后在Views的Home文件夹下新建视图“Index.aspx”,在视图的body标签中添加如下HTML代码:
<div>
    <table id="table1">
    </table>
    <div id="div1">
    </div>
</div>
  接着新建Scripts\Home文件夹,在该目录新建“Index.js”文件,并再视图中引用,代码如下:
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", "<input id='Button1' type='button' value='提交' onclick='Update(\"" + id + "\")' /><input id='Button2' type='button' value='取消' onclick='Cancel(\"" + id + "\")' />");
                }
            }).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", "<input id='Button1' type='button' value='提交' onclick='Add()' /><input id='Button2' type='button' value='取消' onclick='Cancel(\"newId\")' />");
                }
            });
});
 
//取消编辑状态
function Cancel(id) {
    if (id == "newId") $("#table1").delRowData("newId");
    else $("#table1").restoreRow(id);
<
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,