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

 

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', 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' οnclick='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 () {
                                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); }

转载于:https://www.cnblogs.com/jhlong/p/5627802.html