Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
Web jquery表格组件 JQGrid 的使用 - 全部代码
Web jquery表格组件 JQGrid 的使用 - 11.问题研究
目录
1. 翻页按钮不可用
2. 编辑和删除时传值
3. 一列修改为button 按钮
4. 动态修改url
5.下拉联动效果
6. 使用webservice加载数据
11.问题研究
Grid 的
loadonce: true,
Deldata 或editdata
delData: {
delId: function () {
var sel_id =
$(grid_selector).jqGrid('getGridParam', 'selrow');
var value = $(grid_selector).jqGrid('getCell',
sel_id, 'UserId');
return value;
}
},
如上面的代码，http handler 可以获取到delId 这个参数。context.Request.Params 里获取
声明一列：
{ name: 'Manage', index: 'Name', width: 30, edittype: "button", sortable: false,
align: 'center' },
然后去loadComplete 事件里增加：
loadComplete: function () {
var rowIds = $(grid_selector).jqGrid('getDataIDs');
if (rowIds) {
for (var i = 0, j = rowIds.length; i < j; i++) {
id = $(grid_selector).jqGrid('getCell', rowIds[i],
'UserId');
var Btn = "<a href='#' id='id-btn-dialog2' class='btn btninfo
btn-sm' onclick='EditClick(" + id + ")'>编辑</a>";
$(grid_selector).jqGrid('setRowData', rowIds[i], { 'Manage':
Btn });
}
}
},
遍历每一列，找到对应行，新建一个button，EditClick()事件是点击按钮后需要做什么，
id 为传的参数。{ 'Manage': Btn } 即为这一行的名为'Manage'的单元格替换为button
可以实现传参等方法。如
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');
edittype类型为‘select’，其editoptions属性中有一个dataEvents可以定义事件
{
name: 'a', index: 'a', width: 90, sortable: true, editable: true, edittype: "select", editrules: { required: true }, editoptions: {
value: function () {
var s = "";
return s;
},
dataEvents:[{type:'change',fn:function(e){
var ID= $("select#ID");//select#ID 表示jqgrid的一列，名称为ID，这是需要联动的select
var a= this.value; //a为当前单元格select对象的value
var s = "";
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) {
var theString = result.d;
var ids= [];//一系列id对象，有ID和Name两个字段
ids= eval('(' + theString + ')');
for (var i = 0; i < ids.length; i++) {
s = s + "<option value='" + ids[i].ID+ "'>" + aaidsi].Name+ "</option>"; //注意这里是要用option的，不能value:name这样的设置value
}
ID.html(s); //这里要html一下
}
})
}
catch (ex) {
bootbox.alert(ex);
}
}}]
}
},
前端页面定义
var req = new XMLHttpRequest();
并增加函数：
function resAjaxRequestGetData() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
function AjaxRequestGetData() {
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]
public object LoadAlarmTodayDT()
{
string cmdText = "SELECT UserId, UserCode, Password FROM T_User";
SQLHelper sqlhelper = new SQLHelper();
DataTable dt = sqlhelper.Selectinfo(cmdText);
return DAL.UserManagerDAL.GetJson(dt);
}
或者：
jqgrid的datatype这样设置：
datatype: function (pdata) {
AjaxRequestGetData("LoadDT");
},
js调用webservice：
function resAjaxRequestGetData() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
function AjaxRequestGetData(method) {
req.open("POST", "../WebService/WS.asmx/" + method, true);
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = resAjaxRequestGetData;
req.send(null);
}
