我使用javascript和jqgrid制作了一个html页面,并在其中放置了表格
现在我正尝试在其中插入未发生的行。请告诉我其中的错误
checkwa.html代码=
<!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>
这是我的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,这是怎么回事?
答案 0 :(得分:2)
您需要为插入的行添加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
的更多信息