2010-04-12 54 views
1

我试图获取简单表格输入的基本数据网格。服务器将发送列信息并为用户呈现相应的表格,以便将记录输入并将它们发回服务器。与ArrayData一起使用jqGrid并使用添加,编辑和删除按钮

我试图得到的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> 

点击添加行,并填写后选择提交弹出一个“没有URI设置消息”的表单,没有人知道我可以如何解决这个问题,这样我就可以在客户端输入表数据,然后将所有数据一次发送回服务器?

感谢

回答

1

我认为你得到的消息表明的jqGrid需要一个URI组,以便知道向何处发送数据。您需要添加“url”或“editurl”设置,并将其值设置为应将数据发布到的URL。 jqGrid会使用AJAX发布这些数据。

+0

有没有办法设置jqGrid,所以它不会发回数据?我只是想要一个简单的表格输入并稍后传递整个数据? 谢谢 – Sam 2010-04-12 16:07:27

+1

添加记录时出现的表单是jqGrid的一部分,我认为没有办法绕过这个。你可以通过指向一个简单地返回成功代码的URL来“存根”电话,而不管你传递给它的是什么... – 2010-04-12 16:24:34

+0

感谢您的信息,我会试试这个,但我也在看slickgrid哪有我想要什么,除非我需要实现下拉选择,如果我想用它来满足我需要的。 – Sam 2010-04-12 22:24:38

相关问题