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

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

jqgrid:网格显示数据库中取出的数据_第1张图片

  1. 自行下载所需要的包或者文件,放在相应的根目录下面。
  • 页面中的代码:
  1. 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不是很了解,之后再学习中再补


你可能感兴趣的:(jquery)