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