我已将jqgrid 3.5.3与本地json数据一起用于HTML表。
我的代码如下：
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div align="center">
<fieldset style="">
<legend style="text-align: Left; font-size: medium;"><strong>User Details </strong>
</legend>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<table style="width: auto; max-width: 60%">
<tr>
<td style="text-align: right">
<strong style="font-size: small">Name* :</strong>
</td>
<td style="text-align: left">
<asp:TextBox runat="server" ID="txtName" placeholder="Enter Name" TabIndex="1"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<strong style="font-size: small">DOB* :</strong>
</td>
<td style="text-align: left">
<input type="text" id="txtDOB" tabindex="2" />
<%--<asp:TextBox runat="server" ID="datepicker" placeholder="Enter DOB"></asp:TextBox>--%>
</td>
<td style="text-align: right">
<strong style="font-size: small">Age :</strong>
</td>
<td style="text-align: left">
<asp:TextBox runat="server" ID="txtAge" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<strong style="font-size: small">Group* :</strong>
</td>
<td style="text-align: left">
<asp:DropDownList runat="server" ID="ddlGroup" TabIndex="3">
<asp:ListItem Selected="True" Value="0">Select Value</asp:ListItem>
<asp:ListItem Value="1">Gold</asp:ListItem>
<asp:ListItem Value="2">Silver</asp:ListItem>
<asp:ListItem Value="3">Bronze</asp:ListItem>
</asp:DropDownList>
</td>
<td style="text-align: right">
<asp:CheckBox runat="server" ID="chkActive" Text="Active" TabIndex="4" />
</td>
</tr>
<tr>
<td colspan="100%" align="center">
<asp:Button runat="server" ID="btnAdd" Text="ADD" OnClientClick="fnValidate();" TabIndex="5" />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnAdd" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
<table id="tblData">
</table>
</div>
</form>
<script type="text/javascript">
var username = new Array();
var birthYear;
var len = username.length;
var age;
$(function() {
$("#txtDOB").datepicker({
onSelect: function(dateText, inst) {
var birthdate = new Date(dateText);
var cur = new Date();
var diff = cur - birthdate;
age = Math.floor(diff / 31536000000);
$("#lblAge").text(age);
}
});
});
function fnValidate() {
if ($("#txtName").val() == "") {
alert("Please Enter UserName");
$("#txtName").focus();
return false;
}
else {
var alphaValidate = /^[a-zA-Z ]*$/;
if (!alphaValidate.test($("#txtName").val())) {
alert("Please Enter Only Text in User Name");
$("#txtName").val() = "";
$("#txtName").focus();
return false;
}
}
if (jQuery.inArray($("#txtName").val().toUpperCase(), username) == 0) {
alert("Please Enter Unique UserName.");
return false;
}
if ($("#txtDOB").val() == "") {
alert("Please Enter Birth Date.");
return false;
}
// if ($("#txtDOB").val().match(/(\d+)(-|\/)(\d+)(?:-|\/)(?:(\d+)\s+(\d+):(\d+)(?::(\d+))?(?:\.(\d+))?)?/)) {
// alert("Please Enter Only Numeric Value In DOB! (Allowed input:0-9)")
// return false;
// }
if ($("#lblAge").val().length > 2) {
alert("Age Should be Less than 100.");
return false;
}
if ($("#ddlGroup option:selected").val() == 0) {
alert("Please Select Group!");
$("#ddlGroup").focus();
return false;
}
username[len] = $("#txtName").val().toUpperCase();
debugger;
fnAddDetails();
return true;
}
function fnAddDetails() {
debugger;
var content = {};
content.name = $("#txtName").val();
//content.dob = $("#txtDOB").val();
content.group = $("#ddlGroup option:selected").text();
content.active = "InActive";
content.age = age;
if ($("#chkActive").attr("checked")) {
content.active = "Active";
}
var jsonText = JSON.stringify(content);
debugger;
$.ajax({
type: "POST",
url: "Test_sspl142_jQuery_JavaScript.aspx/GetDate",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonText,
success: function(data) {
debugger;
var dataget = $.parseJSON(data.d);
if (data.d != "error") {
//jQuery("#tblData").addJSONData(eval(dataget));
$("#tblData").jqGrid({
datatype: 'local',
data: dataget,
mtype: 'GET',
colNames: ['Name', 'Group', 'Active', 'Age'],
colModel: [
{ name: 'name', index: 'name', width: 60 },
{ name: 'group', index: 'group', width: 90 },
{ name: 'active', index: 'active', width: 100 },
{ name: 'age', index: 'age', width: 80, align: "right" }
],
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
loadonce: true,
defaults: {
emptyrecords: "No records to view",
loadtext: "Loading..."
}
});
}
else {
alert("Error While Assigning to jQGrid!");
}
},
error: function(ex) {
alert("Error Occured while saving data in grid...");
console.log(ex);
return false;
}
});
return false;
}
</script>
我想问题出在jQuery("#tblData").jqGrid({...});。它没有成功执行。谁能给我一些解决方案？
在尝试使用此代码时，我还注意到了一件事......
“当我在浏览器中进行调试时，它不会进入error的{{1}}部分。但如果我直接执行此代码，则会显示{ {1}} !!!“
答案 0 :(得分：0)
function fnAddDetails() {
debugger;
var content = {};
content.name = $("#txtName").val();
content.dob = $("#txtDOB").val();
content.group = $("#ddlGroup option:selected").text();
content.active = "No";
if ($("#chkActive").attr("checked")) {
content.active = "Yes";
}
var jsonText = JSON.stringify(content);
debugger;
$.ajax({
type: "POST",
url: "Test_sspl142_jQuery_JavaScript.aspx/GetDate",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonText,
success: function(data) {
debugger;
var dataget = $.parseJSON(data.d);
jQuery("#tblData").jqGrid({
datatype: 'local',
data: dataget,
colNames: ['active', 'age', 'group', 'name'],
colModel: [
{ name: 'name', index: 'name', width: 60 },
{ name: 'group', index: 'group', width: 90 },
{ name: 'active', index: 'active', width: 100 },
{ name: 'age', index: 'age', width: 80, align: "right" }
],
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
loadonce: true
});
},
error: function(ex) {
alert("Error Occured while saving data in grid...");
console.log(ex);
}
});
}