ajax在jqgrid中的cellselect中不起作用 [英] ajax is not working in cellselect in jqgrid

问题描述

我在我的项目中使用jqgrid有需求，当在gridview中选择一个单元格不同时，网页中的其他字段将填充，所以我使用的是返回列表的web方法，但问题是在cellclick上，命令不会to aspx.cs page

< script type =  < span class =code-string> text / javascript> 
 $（ function （）{
  var  appsurl = ' <％= ConfigurationManager.AppSettings [localpath]。ToString（）％>'; 
 < span class =code-keyword> var  urlpath = appsurl + '  GetAllLeaveAdjustmentRetirementView'; 
   use strict; 
  var  oItemGrid = $（ ＃UsersGrid）; 
 oItemGrid。 jqGrid（{
 url：urlpath，
 mtype：  GET，
数据类型：  json，
 ajaxGridOptions：{
 contentType：  application / json 
}，
 serializeGridData： function （data）{
  return   JSON  .stringify（数据）; 
}，
 colNames：[' '，' 应用程序编号'，'  Date'，' 员工姓名'，'  Department'，' 名称'，' 退休日期'，' ']，
 colModel：[
 {
 name：'  enbl'，index：'  enbl'，width： 20 ，对齐：'  center'，
格式化程序：'  checkbox'，editoptions：{value：'  1：0'}，
格式选项：{已禁用： false } 
}，
 {name：'  RetirementProposalNo'，index：'  RetirementProposalNo'，width： 90 }，
 {name：'  DateOfJoining'，index：'  DateOfJoining' ，width： 90 }，
 {name：'  EmployeeName'，index：'  EmployeeName' ，width： 100 }，
 {name：' 部门'，索引：' 部门'，宽度： 120 }，
 {名称：' 指定' ，index：' 名称'，宽度： 90 }，
 {name：'  DateOfRetirement'，index：'  DateOfRetirement'，宽度： 90 }，
{name：'  EmpPorfessionalId'，index：'  EmpPorfessionalId'，隐藏： true } 
]，
 autowidth：< span class =code-keyword> true ，
 height：'  auto'，
 rowNum： 10 ，
 rowList：[ 10 ， 20 ， 30 ]，
 pager：' ＃pager1'，
 sortname：' 部门'，
 loadonce： true ，
 viewrecords： true ，
 sortorder：  desc，
 rownumbers： true ，
 onCellSelect： function （row，col，content，event）{ 
  //   alert（amit）;  
 Id = jQuery（< span class =code-string> ＃UsersGrid）。jqGrid（'  getCell'，row，'  EmpPorfessionalId' ）; 
 FillDetails（Id）; 
  //   window.location.href =HRMS_LeaveAdjustmentAdd.aspx？id =+ content;  
 
}，
 
 jsonReader：{
 root：  d 
 
} 
 
}）; 
  //  编辑并显示//  
 
 
 
 jQuery（  #UsersGrid）。jqGrid（'  navGrid'，'  ＃pager1'，{edit： false ，添加： false ，del： false }，{}，{}，{}，{multipleSearch： true ，multipleGroup： true ，showQuery： true ，closeAfterSearch： true }）; 
}）; 
  function  FillDetails（Id）{
 alert（ 阿米特）; 
 alert（Id）; 
 调试器; 
 $ .ajax（{
 type：  POST，
 contentType：  application / json; charset = utf-8，
 url：< span class =code-string>  HRMS_LeaveAdjustmentView.aspx / FillDetails，
 data：'  {Id：' + Id + ' }'，
 dataType：  json，
成功： function （数据）{
 $ .each（data， function （ index，emprs）{
 $（' ＃ContentPlaceHolder1_lblFinalDecision'）VAL（emprs.FinalDecission）。 
 $（' ＃ContentPlaceHolder1_lblChargesHandedFrom'）。val（emprs.ChargesHandedOverFrom）; 
 $（' ＃ContentPlaceHolder1_lblRetirementProposalNo'）。val（emprs.RetirementProposalNo）; 
 $（' ＃ContentPlaceHolder1_lblRetirementProposalDate'）。val（emprs.RetirementProposalDate）; 
 $（' ＃ContentPlaceHolder1_lblRetirementDate'）。val（emprs.DateofRetirement）; 
 $（' ＃ContentPlaceHolder1_lblJobType'）。val（emprs.JobType）; 
 $（' ＃ContentPlaceHolder1_lblDepartment'）。val（emprs.DepartmentName）; 
 $（' ＃ContentPlaceHolder1_lblDesignation'）。val（emprs.DesignationName）; 
 $（' ＃ContentPlaceHolder1_lblAppointmentDate'）。val（emprs.DateOfAppointment）; 
 $（' ＃ContentPlaceHolder1_lblScaleCode'）。val（emprs.ScaleCode）; 
}）; 
 
}，
失败： function （响应）{
 alert（response.d）; 
} 
}）; 
} 
  function  OnSuccess（响应）{
 alert（  done）; 
} 
< / script> 

和我的aspx.cs页面是这样的，我有一个返回列表的web方法

 [WebMethod] 
  public  静态列表<详细信息> FillDetails（ int  Id）
 {
} 

解决方案

（ function （）{
var appsurl = ' <％= ConfigurationManager.AppSettings [localpath]。ToString（）％>';
var urlpath = appsurl + ' GetAllLeaveAdjustmentRetirementView';
use strict;
var oItemGrid =

（ ＃UsersGrid ）;
oItemGrid.jqGrid（{
url：urlpath，
mtype： GET，
数据类型： json，
ajaxGridOptions：{
contentType： application / json
}，
serializeGridData： function （data）{
return JSON .stringify（数据）;
}，
colNames：[' '，' 应用程序编号'，' Date'，' 员工姓名'，' Department'，' 名称'，' 退休日期'，' ']，
colModel：[
{
name：' enbl'，index：' enbl'，width： 20 ，对齐：' center'，
格式化程序：' checkbox'，editoptions：{value：' 1：0'}，
格式选项：{已禁用： false }
}，
{name：' RetirementProposalNo'，index：' RetirementProposalNo'，width： 90 }，
{name：' DateOfJoining'，index：' DateOfJoining' ，width： 90 }，
{name：' EmployeeName'，index：' EmployeeName' ，width： 100 }，
{name：' 部门'，索引：' 部门'，宽度： 120 }，
{名称：' 指定' ，index：' 名称'，宽度： 90 }，
{name：' DateOfRetirement'，index：' DateOfRetirement'，宽度： 90 }，
{name：' EmpPorfessionalId'，index：' EmpPorfessionalId'，隐藏： true }
]，
autowidth：< span class =code-keyword> true ，
height：' auto'，
rowNum： 10 ，
rowList：[ 10 ， 20 ， 30 ]，
pager：' ＃pager1'，
sortname：' 部门'，
loadonce： true ，
viewrecords： true ，
sortorder： desc，
rownumbers： true ，
onCellSelect： function （row，col，content，event）{
// alert（amit）;
Id = jQuery（< span class =code-string> ＃UsersGrid）。jqGrid（' getCell'，row，' EmpPorfessionalId' ）;
FillDetails（Id）;
// window.location.href =HRMS_LeaveAdjustmentAdd.aspx？id =+ content;

}，

jsonReader：{
root： d

}

}）;
// 编辑并显示//



jQuery（ #UsersGrid）。jqGrid（' navGrid'，' ＃pager1'，{edit： false ，添加： false ，del： false }，{}，{}，{}，{multipleSearch： true ，multipleGroup： true ，showQuery： true ，closeAfterSearch： true }）;
}）;
function FillDetails（Id）{
alert（ 阿米特）;
alert（Id）;
调试器;

.ajax（{
type： POST，
contentType： application / json; charset = utf-8，
url： HRMS_LeaveAdjustmentView.aspx / FillDetails，
data：' {Id：' + Id + ' }'，
dataType： json，
成功： function （data）{

i am using jqgrid in my project there is requirement,when a cell is select in gridview different other fields in webpage will fill so i am using a web method that return a list but problem is that on cellclick,command is not going to aspx.cs page

<script type="text/javascript">
        $(function () {            
            var appsurl = '<%=ConfigurationManager.AppSettings["localpath"].ToString() %>';
            var urlpath = appsurl + 'GetAllLeaveAdjustmentRetirementView';
            "use strict";
            var oItemGrid = $("#UsersGrid");
            oItemGrid.jqGrid({
                url: urlpath,
                mtype: "GET",
                datatype: "json",
                ajaxGridOptions: {
                    contentType: "application/json"
                },
                serializeGridData: function (data) {
                    return JSON.stringify(data);
                },
                colNames: ['','Application No.', 'Date', 'Employee Name', 'Department', 'Designation', 'Date Of Retirement',''],
                colModel: [
                    {
                        name: 'enbl', index: 'enbl', width: 20, align: 'center',
                        formatter: 'checkbox', editoptions: { value: '1:0' },
                        formatoptions: { disabled: false }
                    },
                    { name: 'RetirementProposalNo', index: 'RetirementProposalNo', width: 90 },
                           { name: 'DateOfJoining', index: 'DateOfJoining', width: 90 },
                           { name: 'EmployeeName', index: 'EmployeeName', width: 100 },
                           { name: 'Department', index: 'Department', width: 120 },
                           { name: 'Designation', index: 'Designation', width: 90 },
                           { name: 'DateOfRetirement', index: 'DateOfRetirement', width: 90 },                           
                            { name: 'EmpPorfessionalId', index: 'EmpPorfessionalId', hidden: true }
                ],
                autowidth: true,
                height: 'auto',
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager1',
                sortname: 'Department',
                loadonce: true,
                viewrecords: true,
                sortorder: "desc",
                rownumbers: true,
                onCellSelect: function (row, col, content, event) {
                    //alert("amit");
                    Id = jQuery("#UsersGrid").jqGrid('getCell', row, 'EmpPorfessionalId');
                    FillDetails(Id);
                    //window.location.href = "HRMS_LeaveAdjustmentAdd.aspx?id=" + content;
                   
                },

                jsonReader: {
                    root: "d"

                }

            });
            // Edit and display //



            jQuery("#UsersGrid").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true, closeAfterSearch: true });
        });
        function FillDetails(Id) {
            alert("amit");
            alert(Id);
            debugger;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "HRMS_LeaveAdjustmentView.aspx/FillDetails",
                data: '{Id : "' + Id + '" }',
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, emprs) {
                        $('#ContentPlaceHolder1_lblFinalDecision').val(emprs.FinalDecission);
                        $('#ContentPlaceHolder1_lblChargesHandedFrom').val(emprs.ChargesHandedOverFrom);
                        $('#ContentPlaceHolder1_lblRetirementProposalNo').val(emprs.RetirementProposalNo);
                        $('#ContentPlaceHolder1_lblRetirementProposalDate').val(emprs.RetirementProposalDate);
                        $('#ContentPlaceHolder1_lblRetirementDate').val(emprs.DateofRetirement);
                        $('#ContentPlaceHolder1_lblJobType').val(emprs.JobType);
                        $('#ContentPlaceHolder1_lblDepartment').val(emprs.DepartmentName);
                        $('#ContentPlaceHolder1_lblDesignation').val(emprs.DesignationName);
                        $('#ContentPlaceHolder1_lblAppointmentDate').val(emprs.DateOfAppointment);
                        $('#ContentPlaceHolder1_lblScaleCode').val(emprs.ScaleCode);
                    });

                },
                failure: function (response) {
                    alert(response.d);
                }
            });           
        }
        function OnSuccess(response) {
            alert("done");
        }
    </script>

and my aspx.cs page is like this,i have a web method that return a list

[WebMethod]
        public static List<Details> FillDetails(int Id)
        {
}

解决方案

(function () { var appsurl = '<%=ConfigurationManager.AppSettings["localpath"].ToString() %>'; var urlpath = appsurl + 'GetAllLeaveAdjustmentRetirementView'; "use strict"; var oItemGrid =

("#UsersGrid"); oItemGrid.jqGrid({ url: urlpath, mtype: "GET", datatype: "json", ajaxGridOptions: { contentType: "application/json" }, serializeGridData: function (data) { return JSON.stringify(data); }, colNames: ['','Application No.', 'Date', 'Employee Name', 'Department', 'Designation', 'Date Of Retirement',''], colModel: [ { name: 'enbl', index: 'enbl', width: 20, align: 'center', formatter: 'checkbox', editoptions: { value: '1:0' }, formatoptions: { disabled: false } }, { name: 'RetirementProposalNo', index: 'RetirementProposalNo', width: 90 }, { name: 'DateOfJoining', index: 'DateOfJoining', width: 90 }, { name: 'EmployeeName', index: 'EmployeeName', width: 100 }, { name: 'Department', index: 'Department', width: 120 }, { name: 'Designation', index: 'Designation', width: 90 }, { name: 'DateOfRetirement', index: 'DateOfRetirement', width: 90 }, { name: 'EmpPorfessionalId', index: 'EmpPorfessionalId', hidden: true } ], autowidth: true, height: 'auto', rowNum: 10, rowList: [10, 20, 30], pager: '#pager1', sortname: 'Department', loadonce: true, viewrecords: true, sortorder: "desc", rownumbers: true, onCellSelect: function (row, col, content, event) { //alert("amit"); Id = jQuery("#UsersGrid").jqGrid('getCell', row, 'EmpPorfessionalId'); FillDetails(Id); //window.location.href = "HRMS_LeaveAdjustmentAdd.aspx?id=" + content; }, jsonReader: { root: "d" } }); // Edit and display // jQuery("#UsersGrid").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true, closeAfterSearch: true }); }); function FillDetails(Id) { alert("amit"); alert(Id); debugger;

.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "HRMS_LeaveAdjustmentView.aspx/FillDetails", data: '{Id : "' + Id + '" }', dataType: "json", success: function (data) {

这篇关于ajax在jqgrid中的cellselect中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！