强大的jQGrid的傻瓜式使用方法。以及一些注意事项,备有相应的引入文件。
在介绍我的使用前,先按照国际惯例,列上网址http://blog.mn886.net/jqGrid/ 里面第一项就有相应的demo。
好,进入正题:
在学习到node.js的时候,需要使用到jQGrid,这是一个实现前后端交互的一个综合功能表格插件。
以下是需要使用到的文件,链接:https://pan.baidu.com/s/1MatFWKhY-FBvYim8cHN6zw
提取码:4nfw
有这个就不用上官网什么的去找CSS和JS了。
个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: [,…]
至此,简单的数据显示与分页完成。
强大的jQGrid的傻瓜式使用方法。以及一些注意事项,备有相应的引入文件。的更多相关文章
- R软件中 文本分析安装包 Rjava 和 Rwordseg 傻瓜式安装方法四部曲
这两天,由于要做一个文本分析的内容,所以搜索了一天R语言中的可以做文本分析的加载包,但是在安装包的过程,真是被虐千百遍,总是安装不成功.特此专门写一篇博文,把整个心塞史畅快的释放一下. ------- ...
- SSH Secure Shell Client的傻瓜式使用方法
说明:本记录仅是使用此软件的一种简单的操作方式,如果想深入研究,请做如下三件事: 1)到其官网了解她的前世今生 2)下载她.安装她.操作她(这一步需要不断的尝试.不断的深入.不断的探索,当然最好理论结 ...
- 【简单易用的傻瓜式图标设计工具】Logoist 3.1 for Mac
[简介] Logoist 是一款Mac上强大易用的傻瓜式图标设计制作工具,通过使用内置模板和预设效果,您可以立即创建高质量的图形内容和艺术作品.通过使用该应用程序,可用于制作图标LOGO. 一款用于创 ...
- M-Renamer方法名修改器,iOS项目方法名重构,Objective-C/Swift,代码模型预判,减少误改的机率,替换速度更快,可视化操作,傻瓜式操作,一键操作,引用处自动修改,马甲包的福音
M-Renamer M-Renamer(Method-Name-Renamer)类方法名修改器,采用链式解析头文件,代码模型预判,减少误改的机率,替换速度更快:可以解析整个项目大多数类的方法,可视化操 ...
- 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程
对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...
- [翻译] C# 8.0 新特性 Redis基本使用及百亿数据量中的使用技巧分享(附视频地址及观看指南) 【由浅至深】redis 实现发布订阅的几种方式 .NET Core开发者的福音之玩转Redis的又一傻瓜式神器推荐
[翻译] C# 8.0 新特性 2018-11-13 17:04 by Rwing, 1179 阅读, 24 评论, 收藏, 编辑 原文: Building C# 8.0[译注:原文主标题如此,但内容 ...
- NOSDK--关于android傻瓜式的分包设想
一直以来,我总是以“够用就好”为理由,很少再维护过自己的一键打包的项目.最近接触了棱镜的sdk,感觉将apk包上传到棱镜服务器,后台来进行分包这种简单的方式很招人待见. 原理似乎不难,apk即zip压 ...
- 傻瓜式理解递归之php递归
写程序这么久了,有时候别人会问道一些算法比如排序啊,递归啊,总是不知道该怎么去说,今天就来整理一下,让更多的人去傻瓜式的理解递归.递归在网络上有很多定义,但有这么一句话听的最多:递归就是自己调用自己! ...
- ubuntu16.04下安装windows10(傻瓜式)
参考如下博文,首先利用ubuntu的16.04的启动U盘,对原有的系统的磁盘分出一个区来,并使用gparted工具格式化为nyfs格式 http://blog.csdn.net/oct11/artic ...
随机推荐
- 解决修改css或js文件后,浏览器缓存未更新问题
问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...
- Unity2018.3全新Prefab预制件系统深入介绍视频教程+PPT+Demo源码
Unity在2018.3推出了重新设计的Prefab预制件系统.这一全新的设计终于为一个长达十年的问题画上了完美的句号, 这个问题就是:“什么时候Unity可以提供嵌套式的预制件系统,俗称Nested ...
- LAB7 REST
r需要初始化才能赋值. 不要盲目抄doGet方法,要理解题目的意思
- java_32 SQLyog中创建数据库表
USE test; /*1.创建账务表 id name mony*/ CREATE TABLE zhangwu(id INT PRIMARY KEY AUTO_INCREMENT, sname VAR ...
- mysql数据库分区和分表
转载自 https://www.cnblogs.com/miketwais/articles/mysql_partition.html https://blog.csdn.net/vbirdbest/ ...
- windows下运行Eigen
参看:https://blog.csdn.net/zhujiahui622/article/details/50504678## 下载C++下的一个线性代数运算库Eigen并解压:http://eig ...
- LaTeX入门
原写于我的洛谷博客,由于洛谷的\(\mathtt{markdown}\)编辑器和博客园的\(\mathtt{markdown}\)编辑器有点差别,所以实在懒得进行微调,就直接挂一个到洛谷博客的链接好了 ...
- 在linux上添加硬盘
首先呢我们需要添加一个硬盘,如下所示: 接着我们需要新建一个硬盘 代码如下: mkdir /bak fdisk -l 接着我们继续第二步,分区 代码如下: fdisk /dev/sdb n add ...
- 序列化还是JSON存储对象?
2018-11-10 先对比一下存诸空间大小:https://pan.baidu.com/s/1I3K8ARfl4x8pC__B-T_vbA 输出的结果是 json: 序列化: 序列化Map: 用JS ...
- GPS坐标系
本次测试之坑,人车定位偏差,分析如下 车的定位由后台提供,由gps上报位置,采用WGS-84坐标系 前端(app/小程序)使用腾讯地图,或者高德地图,采用的是GCJ-02坐标系,或者在GCJ-02基础 ...