系列索引

{ 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 = "编辑"; $(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: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

你可能感兴趣的文章

爬虫之动态HTML处理（Selenium与PhantomJS ）动态页面模拟点击