Javascript 将jqGrid与ArrayData一起使用，并使用添加、编辑和删除按钮_Javascript_Jquery

Javascript 将jqGrid与ArrayData一起使用，并使用添加、编辑和删除按钮

javascript jquery

Javascript 将jqGrid与ArrayData一起使用，并使用添加、编辑和删除按钮,javascript,jquery,Javascript,Jquery,我试图为简单的表格输入获取一个基本的数据网格。服务器将发送列信息并呈现相应的表，供用户输入记录，然后用户将其发回服务器我试图让jqGrid只将数据保存为ArrayData，而不使用数据库，因此我编写了以下代码对其进行测试： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="h

我试图为简单的表格输入获取一个基本的数据网格。服务器将发送列信息并呈现相应的表，供用户输入记录，然后用户将其发回服务器

我试图让jqGrid只将数据保存为ArrayData，而不使用数据库，因此我编写了以下代码对其进行测试：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/custom-theme/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: "local",
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55, editable:true,editoptions:{size:10}}, 
      {name:'invdate', index:'invdate', width:90, editable:true}, 
      {name:'amount', index:'amount', width:80, align:'right', editable:true}, 
      {name:'tax', index:'tax', width:80, align:'right', editable:true}, 
      {name:'total', index:'total', width:80, align:'right', editable:true}, 
      {name:'note', index:'note', width:150, sortable:false, editable:true} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',


  }).navGrid('#pager', {add:true, del:true});
  myfirstrow = {
  invid:"1",
  invdate:"2007-10-01",
  note:"note",
  amount:"200.00",
  tax:"10.00",
  total:"210.00"}
  jQuery("#list").addRowData("1", myfirstrow);
});
</script>

</head>
<body>
<table id="list"></table> 
<div id="pager"></div> 
</body>
</html>


我的第一个网格
html，正文{
保证金：0；
填充：0；
字体大小：75%；
}
jQuery（文档）.ready（函数（）{
jQuery（“#list”）.jqGrid({
数据类型：“本地”，
colNames:['Inv No'，'Date'，'Amount'，'Tax'，'Total'，'Notes']，
colModel:[
{名称：'invid'，索引：'invid'，宽度：55，可编辑：true，可编辑选项：{size:10}，
{名称：'invdate'，索引：'invdate'，宽度：90，可编辑：true}，
{名称：'amount'，索引：'amount'，宽度：80，对齐：'right'，可编辑：true}，
{名称：'tax'，索引：'tax'，宽度：80，对齐：'right'，可编辑：true}，
{名称：'total'，索引：'total'，宽度：80，对齐：'right'，可编辑：true}，
{名称：'note'，索引：'note'，宽度：150，可排序：false，可编辑：true}
],
寻呼机：“#寻呼机”，
rowNum:10，
行列表：[10,20,30]，
sortname:'因维德'，
排序器：“desc”，
viewrecords：是的，
描述：“我的第一个网格”，
}).navGrid（'#pager'，{add:true，del:true}）；
我的第一行={
因维人：“1”，
投资日期：“2007-10-01”，
注：“注”，
金额：“200.00”，
税款：“10.00”，
总计：“210.00”}
jQuery（“#list”）.addRowData（“1”，myfirstrow）；
});

单击add row并填写表单后，选择submit会弹出一条“No URI set message”（无URI设置消息），是否有人知道我如何解决这个问题，以便我可以在客户端输入表数据，然后立即将所有数据发送回服务器

谢谢

我认为您收到的消息表明jqGrid需要一个URI集，以便它知道在哪里发送数据。您需要添加“url”或“editurl”设置，并将其值设置为数据应发布到的url。jqGrid将使用AJAX发布数据。

我认为您收到的消息表明jqGrid需要一个URI集，以便知道将数据发送到哪里。您需要添加“url”或“editurl”设置，并将其值设置为数据应发布到的url。jqGrid将使用AJAX发布该数据。

有没有办法设置jqGrid，使其不会将数据发回？我只需要一个简单的表输入，然后将数据作为一个整体传递给其他人？感谢添加记录时出现的表单是jqGrid的一部分，我认为没有办法绕过它。您可以通过指向一个URL来“存根”调用，该URL只返回一个成功代码，而不管您传递给它什么…感谢您提供的信息，我会尝试一下，但我也在看slickgrid，它有我想要的，除了我需要实现下拉选择，如果我想使用它来满足我的需要。有没有办法设置jqGrid，这样它就不会将数据发回？我只需要一个简单的表输入，然后将数据作为一个整体传递给其他人？感谢添加记录时出现的表单是jqGrid的一部分，我认为没有办法绕过它。您可以通过指向一个URL来“存根”调用，该URL只返回一个成功代码，不管您传递给它什么…感谢您提供的信息，我会尝试一下，但我也在看slickgrid，它有我想要的，除了我需要实现下拉选择，如果我想使用它来满足我的需要。