jqgrid绑定失败,并在警告框中显示错误“[object Object]”

时间:2014-01-22 08:29:31

标签: javascript jquery jqgrid jqgrid-asp.net

我已将jqgrid 3.5.3与本地json数据一起用于HTML表。

我的代码如下:

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

<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}} !!!“

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

尝试

数据类型:'local',// =&gt;数据类型:'json',