未添加 JQgrid 行

Question

我使用 javascript 和 jqgrid 制作了一个 html 页面我在里面放了一个 table

现在我试图在其中插入一行，但没有发生。请告诉我其中的错误

checkwa.html code =

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Your page title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
    <script src="./jqscript.js">

    </script>
</head>
<body>
<table id="grid1">
</table>
</body>
</html>

Here is my jqscript.js

$(function () {
    "use strict";
    $("#grid1").jqGrid({
            colModel: [
                { name: "id", label: "ID", width: 100 },
                { name: "tHE_name", label: "Name", width: 100, align: "center",  },
                { name: "teamName", label: "team_Name", width: 100, template: "number" },
                { name: "tax", label: "Tax", width: 100, template: "number" },
                { name: "total", label: "Total", width: 100, template: "number" },
                { name: "closed", label: "Closed", width:100, template: "booleanCheckbox", firstsortorder: "desc" },
                { name: "ship_via", label: "Shipped via", width: 87, align: "center", formatter: "select",
                    formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" } }
            ],


            data: [
                { id: "10",  tHE_name: "2015-10-01", teamName: "test",   amount: "" },
                { id: "20",  tHE_name: "2015-09-01", teamName: "test10",  amount: "300.00", tax:"20.00", closed:false, ship_via:"FE", total:"320.00"},
                { id: "30",  tHE_name: "2015-09-01", teamName: "test10",  amount: "400.00", tax:"30.00", closed:false, ship_via:"FE", total:"430.00"},
                { id: "40",  tHE_name: "2015-10-04", teamName: "test10",  amount: "200.00", tax:"10.00", closed:true,  ship_via:"TN", total:"210.00"}

            ],
            defaultSearch: "cn" ,
            toppager: true,
            pager: true, 
            iconSet: "fontAwesome",
            idPrefix: "g1_",
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            caption: "The grid, which uses predefined formatters and templates"
        });

var myfirstrow =  { id: "130",  tHE_name: "2015-sD-01", teamName: "SDSD",  amount: "4300.00", tax:"30.00", closed:false, ship_via:"FE", total:"430.00"};

jQuery("#grid1").addRowData( myfirstrow);
    });

现在没有使用 Javacript/Jquery 添加 myfirstrow，有什么问题吗？

Answer 1

您需要为插入的行设置一个 rowid 参数

尝试以下方法

$(function () {
    "use strict";
    $("#grid1").jqGrid({
            colModel: [
                { name: "id", label: "ID", width: 100 },
                { name: "tHE_name", label: "Name", width: 100, align: "center",  },
                { name: "teamName", label: "team_Name", width: 100, template: "number" },
                { name: "tax", label: "Tax", width: 100, template: "number" },
                { name: "total", label: "Total", width: 100, template: "number" },
                { name: "closed", label: "Closed", width:100, template: "booleanCheckbox", firstsortorder: "desc" },
                { name: "ship_via", label: "Shipped via", width: 87, align: "center", formatter: "select",
                    formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" } }
            ],


            data: [
                { id: "10",  tHE_name: "2015-10-01", teamName: "test",   amount: "" },
                { id: "20",  tHE_name: "2015-09-01", teamName: "test10",  amount: "300.00", tax:"20.00", closed:false, ship_via:"FE", total:"320.00"},
                { id: "30",  tHE_name: "2015-09-01", teamName: "test10",  amount: "400.00", tax:"30.00", closed:false, ship_via:"FE", total:"430.00"},
                { id: "40",  tHE_name: "2015-10-04", teamName: "test10",  amount: "200.00", tax:"10.00", closed:true,  ship_via:"TN", total:"210.00"}

            ],
            defaultSearch: "cn" ,
            toppager: true,
            pager: true, 
            iconSet: "fontAwesome",
            idPrefix: "g1_",
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            caption: "The grid, which uses predefined formatters and templates"
        });

var myfirstrow =  { id: "130",  tHE_name: "2015-sD-01", teamName: "SDSD",  amount: "4300.00", tax:"30.00", closed:false, ship_via:"FE", total:"430.00"};

$("#grid1").jqGrid('addRowData',99,myfirstrow);
//or $("#grid1").addRowData(99,myfirstrow);
//.jqGrid('addRowData',rowid, data, position, srcrowid);
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Your page title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>


    </script>
</head>
<body>
<table id="grid1">
</table>
</body>
</html>

关于方法的更多信息here

未添加 JQgrid 行

JQgrid row is not being added

javascript

jquery

jqgrid