Web jquery表格组件 JQGrid 的使用

系列索引

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.问题研究

JQGrid导出Excel文件

目录

1. 翻页按钮不可用

2. 编辑和删除时传值

3. 一列修改为button 按钮

4. 动态修改url

5.下拉联动效果

6. 使用webservice加载数据

11.问题研究  

1. 翻页按钮不可用

Grid 的

 loadonce: true,

2. 编辑和删除时传值

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 里获取

 

3. 一列修改为button 按钮

声明一列：

{ name: 'Manage', index: 'Name',  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

 

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',  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);
                                }
                            }}]
                        }
                    },

 

6. 使用webservice加载数据

 

前端页面定义

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);
        }