Javascript jqgrid绑定失败，错误为“；[对象对象]”；在警报框中

我已经将

jqgrid

3.5.3与本地

json

数据一起使用到

HTML

表中

我的代码如下：

HTML

用户详细信息
名称*：
DOB*：
年龄：
组*：
选择值
金
银
青铜

剧本

var username=新数组（）；
出生年份；
var len=username.length；
变量年龄；
$（函数（）{
$（“#txtDOB”）.datepicker({
onSelect：函数（日期文本，inst）{
var birthdate=新日期（dateText）；
var cur=新日期（）；
var diff=cur-出生日期；
年龄=数学楼层（差异/31536000000）；
$（“#lblAge”）。文本（年龄）；
}
});
});
函数fnValidate（）{
if（$（“#txtName”）.val（）=“”）{
警报（“请输入用户名”）；
$（“#txtName”）.focus（）；
返回false；
}
否则{
var alphaValidate=/^[a-zA-Z]*$/；
如果（！alphaValidate.test（$（“#txtName”）.val（））{
警报（“请仅在用户名中输入文本”）；
$（“#txtName”）.val（）=”；
$（“#txtName”）.focus（）；
返回false；
}
}
if（jQuery.inArray（$（“#txtName”）.val（）.toUpperCase（），username）==0）{
警报（“请输入唯一用户名”）；
返回false；
}
if（$（“#txtDOB”）.val（）=”）{
警告（“请输入出生日期”）；
返回false；
}
//if（$（“#txtDOB”）.val（）.match（/（\d+）（-\d+）（\d+）（-\d+）（？：（\d+）\s+（\d+）：（\d+））（？：\（\d+）？/）{
//警报（“请仅在DOB中输入数字值！（允许输入：0-9）”）
//返回false；
//            }
如果（$（“#lblAge”）.val（）.length>2）{
警惕（“年龄应小于100岁”）；
返回false；
}
if（$（“#ddlGroup选项：选中”）.val（）==0）{
警报（“请选择组！”）；
$（“#ddlGroup”）.focus（）；
返回false；
}
用户名[len]=$（“#txtName”）.val（）.toUpperCase（）；
调试器；
fnAddDetails（）；
返回true；
}
函数fnAddDetails（）{
调试器；
var内容={}；
content.name=$（“#txtName”）.val（）；
//content.dob=$（“#txtDOB”）.val（）；
content.group=$（“#ddlGroup选项：选中”）.text（）；
content.active=“非活动”；
content.age=年龄；
如果（$（“#chkActive”）.attr（“选中”））{
content.active=“active”；
}
var jsonText=JSON.stringify（内容）；
调试器；
$.ajax({
类型：“POST”，
url:“Test\u sspl142\u jQuery\u JavaScript.aspx/GetDate”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
数据：jsonText，
成功：功能（数据）{
调试器；
var dataget=$.parseJSON（data.d）；
if（data.d！=“错误”）{
//jQuery（“#tblData”）.addJSONData（eval（dataget））；
$（“#tblData”）.jqGrid({
数据类型：“本地”，
数据：dataget，
mtype:'获取'，
colNames:['Name'，'Group'，'Active'，'Age']，
colModel：[
{name:'name'，index:'name'，宽度：60}，
{name:'group'，index:'group'，宽度：90}，
{name:'active'，index:'active'，宽度：100}，
{名称：'age'，索引：'age'，宽度：80，对齐：“right”}
],
rowNum:10，
行列表：[10,20,30]，
viewrecords：是的，
有一次：是的，
默认值：{
emptyrecords:“没有要查看的记录”，
loadtext:“正在加载…”
}
});
}
否则{
警报（“分配给jQGrid时出错！”）；
<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>

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);
            }
        });
    }