jqgrid：网格显示数据库中取出的数据

来源：互联网发布：webuploader php 返回编辑：程序博客网时间：2024/06/04 18:50

jqGrid 是一个用来显示网格数据的jQuery插件，用jqgrid可以轻松方便得实现前端页面和后台数据的ajax异步数据操作

自行下载所需要的包或者文件，放在相应的根目录下面。

页面中的代码：

head中的引用：（css和js文件的引入只是写了方法，因为我也不知道具体该引入哪些文件，在后续的学习中再添加）

css文件引入：

<link type="text/css" href="/resources/ueditor/themes/default/css/ueditor.css" /（所需要引入包或者文件的详细目录）>" rel="stylesheet" />

js文件引入：

<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.config.js" />" ></script>

js中的代码：

$userGrid = $("#userGrid(document)").jqGrid({
       url: "<c:url value="/exam/manage/notifyinfo/query" />",
       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不是很了解，之后再学习中再补

0 0