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

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

好,进入正题:

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

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

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

 

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

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

 

其中最重要的是后面二个,colModeljsonReader

 

我的colModel是这一段:这里面,建议nameindex设置统一并且全小写,因为大小写是敏感的,跟你服务器传过来的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: [,…]

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

posted on 2019-03-04 16:06 大步流星 阅读() 评论() 编辑 收藏

版权声明:本文为maoyuxun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/maoyuxun/p/10471292.html