关于jqgrid表格的使用

一、首先关于jqgrid中js/css的声明：

        jqgrid中css 和 js相关文档在官网上下载和在http://blog.mn886.net/jqGrid/网站上下载还是略有区别的，下面演示中管jqgrid表格的css个js均来自http://blog.mn886.net/jqGrid/。有任何描述不正确的地方欢迎指出。

二、CSS的引入

<link rel="stylesheet" href="../../../Content/jqGrid/css/flick/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" href="../../../Content/jqGrid/ui.jqgrid.css">

三、关于JS的引入

<script type="text/javascript" src="../../../Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="../../../Scripts/grid.locale-cn.js"></script>

四、HTML的编写

<div>
    <table class="tableCenter" id="usertable"></table>
    <div id="pgr"></div>
</div>

五、JS的编写

$("#usertable").jqGrid({
    url:"/api",
    jsonReader:{
        root:"data",
        total:"pageCount",
        record:"count",
    },
    mtype:"POST",
    prmNames:{
        page:"pageNo",
        rows:"pageSize",
    },
    viewrecords:true,
    rowNum:25,
    pager: '#pgr',
    shrinkToFit:true,
    datatype:"json",
    height:"auto",
    colModel:[
        {name:"userCode",label:"用户编码",align:"left",sortable:false},
        {name:"userStatus",label:"用户状态",aligh:"left",sortable:false,width:100,formatter:function (cellvalue,options,rowObject) {
            var userState;
            if(rowObject.userStatus==0){
                userState = "正常";
            }else if(rowObject.userStatus==9){
                userState = "停用";
            }
            return userState;
        }},
   
})

六、重点讲解部分

      colmodel前面的部分是一些基础的参数 可以在http://blog.mn886.net/jqGrid/中的初始化参数大全中找到相关对应的描述，这边不多做解释

 {name:"userCode",label:"用户编码",align:"left",sortable:false},

    （1） colmodel中的name是在后台给的字段名称 label是你显示的名称。 

    （2） algin是指文字的对齐方式这边采用的是向左对齐。

    （3）sortable是指是否排序这年是不排序。

  {name:"userStatus",label:"用户状态",aligh:"left",sortable:false,width:100,formatter:function (cellvalue,options,rowObject) {
            var userState;
            if(rowObject.userStatus==0){
                userState = "正常";
            }else if(rowObject.userStatus==9){
                userState = "停用";
            }
            return userState;
        }},

   （1）这边由于后台定义的userStatus字段是有两种情况：一种0代表用户状态是正常，另一种9代表用户状态是停用，这个时候我们需要在做出对应的判断，我们要借助到ColModel中的formatter参数进行展示该信息具体写法如上。

   七、打开网页我们就可以看到表格了