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等,可自行百度一下,在这就不多说了


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值