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

安稳与你 提交于 2020-03-29 19:16:10

 

系列索引

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' 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 () {
                                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);
        }
 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!