jqgrid：网格显示数据库中取出的数据
jqGrid 是一个用来显示网格数据的jQuery插件，用jqgrid可以轻松方便得实现前端页面和后台数据的ajax异步数据操作
- 自行下载所需要的包或者文件，放在相应的根目录下面。
- 页面中的代码：
- head中的引用：（css和js文件的引入只是写了方法，因为我也不知道具体该引入哪些文件，在后续的学习中再添加）
- css文件引入：
" rel="stylesheet" />
- js文件引入：
" >
- js中的代码：
$userGrid = $("#userGrid(document)").jqGrid({
url: "
prmNames: {
id: "nid"
},
mtype: "POST", //提交方式
datatype: "json", //数据的获取方式
colNames: ["nid","内容","更新时间"], //列表中要显示的数据，和表头
colModel: [ {name: "nid", index: "nid", editable: false, edittype: "text",hidden:true,
editrules: {
required: true
},
formoptions: {
elmprefix: "(*)"
}
}, {name: "content", index: "content", editable: false, edittype: "text",//formatter: function (v) { return v.replace(/<[^>]+>/g,'') },//formatter:contentFormater,
editrules: {
required: true
},
formoptions: {
elmprefix: "(*)"
}
}, {name: "creatDate", index: "creatDate", editable: true, edittype: "text",
editrules: {
required: true
},
formoptions: {
elmprefix: "(*)"
}
}
],
jsonReader: {
repeatitems: false, //Important! enable json row like {key1: value1, key2: value2, ...}
id: "userPid"
},
rowNum: 10, //每页显示的数据条数
rowList: [10,20,30], //改变每页显示的条数
pager: "#userPager",
viewrecords: true, //在浏览导航栏显示记录总数
sortable:true, //是否排序
sortname: "creatDate", //要排序的列
sortorder: "desc", //排序方式
autowidth: true,
height: "auto", // 100%
rownumbers: true,
caption: "通知公告列表",
loadError: function(xhr, status, error) {
alert(xhr.status + " - " + status + " - " + error);
},
beforeProcessing: function(data, status, xhr) {
if(data.processResult && data.processResult.success != undefined && !data.processResult.success) {
alert(data.processResult.statusText);
}
}
});
- body中的代码:
补充：
如果在数据库中存储的文本数据是html格式的，想在页面上显示text可以使用
formatter: function (v) { return v.replace(/<[^>]+>/g,'') } 放在colModel中的对应列中
刚刚接触这个东西，所以对formatter不是很了解，之后再学习中再补