JQGrid与C#以及Layer的结合使用



可视化编辑器,alt+1到9键,切换到工具区,tab键,选择按钮,esc键,返回编辑


一.后台代码

     1.访问数据库，读取出数据，将数据处理成json格式（以下以数据库Student为例）

       首先在方法上定义几个参数，当然也可以从前端传输过来，如下：

     public JsonResult functionName(int ? page,int ? rows,string sidx,string sord)

      page:存储数据的页数

      rows:每页数据显示的行数

      sidx:按照sidx排序

      sord:控制sidx升序还是降序显示（不管是升序还是降序必须先把数据库中的数据排好顺序）

     下面是读取数据的两种方式：

       （1）若按某一条件查询数据（以student中的id为例，db为数据库实体类的对象）

           List<Student> list=db.Student.Where(x=>x.id==id).ToList();

       （2）若查询某些字段

          var list=（from c in Student where(where这个可加可不加，根据实际需要来)

                                  select new

                                      {

                                           NAME=c.NAME,

                                            AGE=c.AGE,

                                             ，，，此处按要求添加所要使用的字段

                                        }）.ToList();

          将从数据库读取出的数据处理成符合jqgrid显示的json格式，如下所示

               int pageNum=page.HasValue ? page.Value:1;

               int pageSize=rows.HasValue ? rows.Value:10;

              int totalRecords=list.Count();

              int totalPage=(int) Math.Ceiling((float)totalRecords/(float)pageSize);

              var list111=list.Skip((pageNum-1)*pageSize).Take(pageSize);

              var jsonData=new

                            {

                            total=totalPages,

                            page=pageNum,

                            records=totalRecords,

                            list111,//分页

                            rows=list111.Select(c=>new

                            {

                                          NAME=c.NAME,

                                          。。。所要显示的字段

                            }

                            ).ToArray()

                            };

                            return Json(jsonData,JsonRequestBehavior.AllowGet);

前端代码：

1.首先建两个标签：一个是表格标签，用来显示jqgrid显示的数据，一个是div标签用来存放表格的，还有一个jqgrid自动适应窗口的方法

<table id="list2"></table> <div id="pager2"></div> Java Scrpt code

$(function(){
            $(window).resize(function(){  
         $("#list2").setGridWidth($(window).width());
        });
       });

2. jQuery("#list2").jqGrid({

            datatype: "json",

            colNames:['Inv No','姓名', '年龄', 。。。],

           colModel:[ {name:'id',index:'id', width:55},

                                   {name:'NAME',index:'NAME', width:90},

                                   {name:'AGE',index:'AGE', width:100},

                                  {name:'TIME',index:'TIME', width:100，formatter:function(val){return formatDate(val,"yyyy-MM-dd hh:mm:ss");}},

                                     。。。。

                                   ],
        url:处理的路径(也就是上边那个action的路径)

        autowidth:true,

        height:$(window).height()-330,

        multiselect:true,//多选框

        multiboxonly:true,//只能选择条记录

        colActionsTitle:'操作',

        ondblClickRow:function(rowid){//双击某条记录显示出该条记录相应的姓名

                var ID=$("#list2").jqGrid("getRowData",rowid).ID;

                var arr=$("#list2").jqGrid("getRowData",rowid);

                len=arr['NAME'].length;

                openStudentName("查看姓名",ID,len);

            },

        jsonReader:[

                root:"rows",

                page:"page",

                total:"total",

                records:"records",

                userdata:"userdata",

                id:"STUDENTID"

            ],

        rownumbers:true,

        datatype:'json',

        mtype:'GET',
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"学生信息"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

function openStudentName(title,pId,len){

 if(len>300){

winWidth=530;

winheight=500;

} else{

winWidth=310;

winheight=420;

}

var width=winWidth+"px";

var hight=winheight+"px";

top.layer.open({

   type:2,

   title:title,

   closeBtn:[1,true],

   maxmin:true,

   shadeclose:true,

   shade:0.8,

   area:[hight,width],

  full:function(){},

   content:"reginfo?pId"+pId   //处理的路径

});

layer.iframeAuto(parent.layer.getFrameIndex(window.name));

}

介绍到此结束。

注意：别忘记添加jqgrid以及layer所需的js和css等，可自行百度一下，在这就不多说了