强大的jQGrid的傻瓜式使用方法。以及一些注意事项，备有相应的引入文件。

在介绍我的使用前，先按照国际惯例，列上网址http://blog.mn886.net/jqGrid/ 里面第一项就有相应的demo。

好，进入正题：

在学习到node.js的时候，需要使用到jQGrid，这是一个实现前后端交互的一个综合功能表格插件。

以下是需要使用到的文件，链接：https://pan.baidu.com/s/1MatFWKhY-FBvYim8cHN6zw
提取码：4nfw

有这个就不用上官网什么的去找CSS和JS了。

 

1：在使用前，我们首先需要在HTML引入一下4个CSS文件，

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" />           
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.theme.min.css" />     
<link rel="stylesheet" type="text/css" href="/css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/ui.jqgrid.css" />


2：我们在引入JS文件
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/js/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>

这几个文件是运行jQGrid的必备文件，不可忽略。

3：然后，我们了解一下这段代码

<script type="text/javascript">
    //初始化表格
    $("#list").jqGrid({
        datatype: "json",
        url : "/student",
        //列明
        colNames:["学号","姓名","年级","初始密码"],
        //列的模型
        colModel:[
            {name:'sid'   , index:'sid'    , width:50 , key : true , editable : true},
            //editable表示可以被编辑
            {name:'name'  , index:'name'   , width:50 , editable : true},
            //年级的那个列，编辑的时候显示下拉列表框
            {
                name:'grade'   ,
                index:'grade'  ,
                width:50      ,
                editable : true,
                edittype : "select",
                editoptions : {
                    value : "初一:初一;初二:初二;初三:初三;高一:高一;高二:高二;高三:高三"
                }
            } ,
            {name:'password'  , index:'password'   , width:50 , editable : true},
        ],
        rowNum:30,
        rowList:[30,50],
        sortname: 'sid',
        viewrecords: true,
        width:1400,
        pager : '#listnav',
        cellEdit : true,
        cellsubmit : "clientArray",
        height:700
    });

好，看了之后要懵逼了，接下来我们了解一下，下面的参数解释：

• url：提交处理数据的地址。
• datatype：这个参数用于设定将要得到的数据类型。我最常用的是“json”，其余的类型还包括：xml、xmlstring、local、javascript、function。
• mtype: 定义使用哪种方法发起请求，GET或者POST。默认是GET
• height：Grid的高度，可以接受数字、%值、auto，默认值为150。
• width：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
• shrinkToFit：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
• autowidth：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
• pager：定义页码控制条PageBar
• sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到服务端。
• viewrecords：设置是否在PagerBar显示所有记录的总数。
• caption：Grid的标题。如果设置了，则将显示在Grid的Header层 ；如果未设置，则标题区域不显示 。
• rowNum：用于设置Grid中一次显示的行数，默认值为20。
• rowList：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
• prmNames：这是一个数组，用于设置jqGrid将要向服务端传递的参数名称。我们一般不用去改变什么。
• colModel：最重要的数组之一，用于设定各列的参数。
• jsonReader：这又是一个数组，用来设定如何解析从Server端发回来的json数据。

 

其中最重要的是后面二个，colModel和jsonReader

 

我的colModel是这一段：这里面，建议name和index设置统一并且全小写，因为大小写是敏感的，跟你服务器传过来的name要一一对应。

 colModel:[
            {name:'sid'   , index:'sid'    , width:50 , key : true , editable : true},
            //editable表示可以被编辑
            {name:'name'  , index:'name'   , width:50 , editable : true},
            //编辑的时候显示下拉列表框
            {
                name:'grade'   ,
                index:'grade'  ,
                width:50      ,
                editable : true,
                edittype : "select",
                editoptions : {
                    value : "初一:初一;初二:初二;初三:初三;高一:高一;高二:高二;高三:高三"
                }
            } ,
            {name:'password'  , index:'password'   , width:50 , editable : true},
        ],

接下来介绍：jsonReader！！

 

在我上面的代码：

<script type="text/javascript">
    //初始化表格
    $("#list").jqGrid({
        datatype: "json",
        url : "/student",
        //列明
        colNames:["学号","姓名","年级","初始密码"],
        //列的模型
        colModel:[
            {name:'sid'   , index:'sid'    , width:50 , key : true , editable : true},
            //editable表示可以被编辑
            {name:'name'  , index:'name'   , width:50 , editable : true},
            //年级的那个列，编辑的时候显示下拉列表框
            {
                name:'grade'   ,
                index:'grade'  ,
                width:50      ,
                editable : true,
                edittype : "select",
                editoptions : {
                    value : "初一:初一;初二:初二;初三:初三;高一:高一;高二:高二;高三:高三"
                }
            } ,
            {name:'password'  , index:'password'   , width:50 , editable : true},
        ],
        rowNum:30,
        rowList:[30,50],
        sortname: 'sid',
        viewrecords: true,
        width:1400,
        pager : '#listnav',
        cellEdit : true,
        cellsubmit : "clientArray",
        height:700
    });

 

 

 

这个jsonReader 很重要，但是我的代码里面为什么没有写呢？？因为它有默认值。

 

jsonReader用于设置如何解析从服务端发回来的json数据。其默认值为：

 

jsonReader : {

root : "rows", // 实际模型的人口

page : "page", // 当前页码

total : total, // 当前共多少页

records : "records", // 总共多少行数据

repeatitems : true,

cell : "cell",

id : "id",

userdata : "userdata", // 数据

subgrid : {

root : "rows",

repeatitems : true,

cell : "cell"

}

}

 

 

那么我服务器端发送过来的JSON格式的数据按照jsonReader的默认值设置就可以了。

里面的records,page,total,result是不是跟上面的一样呢。

 

student.find({}).sort(sortobj).skip(rows * (page - 1)).exec(function(err,result){

            res.json({"records" : count, "page" : page, "total" : total ,"rows":result});

        })

 

 

下面是服务器传来的JSON：

{records: 353, page: "12", total: 12, rows: [,…]}

1. page: "12"
2. records: 353
3. rows: [,…]

 至此，简单的数据显示与分页完成。