Web jquery表格组件 JQGrid 的使用 - 11.问题研究

系列索引

Webjquery表格组件JQGrid的使用-从入门到精通开篇及索引

Webjquery表格组件JQGrid的使用-4.JQGrid参数、ColModelAPI、事件及方法

Webjquery表格组件JQGrid的使用-5.Pager翻页、搜索、格式化、自定义按钮

Webjquery表格组件JQGrid的使用-6.准备工作&HelloJQGrid

Webjquery表格组件JQGrid的使用-7.查询数据、编辑数据、删除数据

Webjquery表格组件JQGrid的使用-8.Pager、新增数据、查询、刷新、查看数据

Webjquery表格组件JQGrid的使用-全部代码

Webjquery表格组件JQGrid的使用-11.问题研究

JQGrid导出Excel文件

目录

1.翻页按钮不可用

2.编辑和删除时传值

3.一列修改为button按钮

4.动态修改url

5.下拉联动效果

6.使用webservice加载数据

11.问题研究

1.翻页按钮不可用
Grid的

loadonce:true,

2.编辑和删除时传值

Deldata或editdata
delData:{
delId:function(){
varsel_id=
$(grid_selector).jqGrid('getGridParam','selrow');
varvalue=$(grid_selector).jqGrid('getCell',
sel_id,'UserId');
returnvalue;
}
},

如上面的代码，httphandler可以获取到delId这个参数。context.Request.Params里获取

3.一列修改为button按钮
声明一列：

{name:'Manage',index:'Name',width:30,edittype:"button",sortable:false,
align:'center'},
然后去loadComplete事件里增加：
loadComplete:function(){
varrowIds=$(grid_selector).jqGrid('getDataIDs');
if(rowIds){
for(vari=0,j=rowIds.length;i<j;i++){
id=$(grid_selector).jqGrid('getCell',rowIds[i],
'UserId');
varBtn="<ahref='#'id='id-btn-dialog2'class='btnbtninfo
btn-sm'onclick='EditClick("+id+")'>编辑</a>";
$(grid_selector).jqGrid('setRowData',rowIds[i],{'Manage':
Btn});
}
}
},

遍历每一列，找到对应行，新建一个button，EditClick()事件是点击按钮后需要做什么，
id为传的参数。{'Manage':Btn}即为这一行的名为'Manage'的单元格替换为button

4.动态修改url
可以实现传参等方法。如

url:"WebService/UserHandler.ashx?UserID="+userID,
$(grid_selector).jqGrid('setGridParam',{url:"WebService/UserHandler.ashx?UserID="+
userID,});
//重新加载jqgrid
$(grid_selector).jqGrid('setGridParam',{datatype:'json'
}).trigger('reloadGrid');

5.下拉联动效果

edittype类型为‘select’，其editoptions属性中有一个dataEvents可以定义事件

{
name:'a',index:'a',width:90,sortable:true,editable:true,edittype:"select",editrules:{required:true},editoptions:{
value:function(){
vars="";
returns;
},
dataEvents:[{type:'change',fn:function(e){
varID=$("select#ID");//select#ID表示jqgrid的一列，名称为ID，这是需要联动的select
vara=this.value;//a为当前单元格select对象的value
vars="";
try{
$.ajax({
type:"POST",//访问WebService使用post方式请求
contentType:"application/json;utf-8",//WebService会返回json类型
url:"../WebService/a.asmx/a",//调用WebService的地址和方法名称组合
data:"{a:"+a+"}",//传个参数，根据当前select的value获取要联动的内容
dataType:"json",
async:false,//不能异步，需同步
success:function(result){
vartheString=result.d;
varids=[];//一系列id对象，有ID和Name两个字段

ids=eval('('+theString+')');
for(vari=0;i<ids.length;i++){
s=s+"<optionvalue='"+ids[i].ID+"'>"+aaidsi].Name+"</option>";//注意这里是要用option的，不能value:name这样的设置value
}

ID.html(s);//这里要html一下
}
})
}
catch(ex){
bootbox.alert(ex);
}
}}]
}
},

6.使用webservice加载数据

前端页面定义

varreq=newXMLHttpRequest();

并增加函数：

functionresAjaxRequestGetData(){
if(req.readyState==4){
varres=JSON.parse(req.responseText);
varthegrid=$(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
functionAjaxRequestGetData(){
req.open("POST","WebService/WebService.asmx/LoadDataDT",true);
req.setRequestHeader("Content-Type","application/json;charset=utf-8");
req.onreadystatechange=resAjaxRequestGetData;
req.send(null);
}

然后修改Jqgird的属性datatype，此时无需设置url属性

datatype:function(pdata){
AjaxRequestGetData();
},

WebService代码：

[WebMethod]
publicobjectLoadAlarmTodayDT()
{
stringcmdText="SELECTUserId,UserCode,PasswordFROMT_User";
SQLHelpersqlhelper=newSQLHelper();
DataTabledt=sqlhelper.Selectinfo(cmdText);
returnDAL.UserManagerDAL.GetJson(dt);
}

或者：

jqgrid的datatype这样设置：

datatype:function(pdata){
AjaxRequestGetData("LoadDT");
},

js调用webservice：

functionresAjaxRequestGetData(){
if(req.readyState==4){
varres=JSON.parse(req.responseText);
varthegrid=$(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}

functionAjaxRequestGetData(method){
req.open("POST","../WebService/WS.asmx/"+method,true);
req.setRequestHeader("Content-Type","application/json;charset=utf-8");
req.onreadystatechange=resAjaxRequestGetData;
req.send(null);
}