强大的jQGrid的傻瓜式使用方法。以及一些注意事项,备有相应的引入文件。
强大的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: [,…]}
- page: “12”
- records: 353
- rows: [,…]
至此,简单的数据显示与分页完成。