我有一个这样的表格:
<form id='myForm'>
<input type='text' name='search' />
<input type='text' name='maxPrice' />
</form>
Run Code Online (Sandbox Code Playgroud)
和我的jqGrid表:
<table id='myGrid'></table>
Run Code Online (Sandbox Code Playgroud)
我需要POST(不要GET)数据从myForm我的服务器方法,以获取行数据并填充网格.到目前为止,我还没有能够让jqGrid发布任何东西.我仔细检查了我的数据序列化,并正确地序列化我的表单数据.这是我的jqGrid代码:
$("#myGrid").jqGrid({
url: '/Products/Search") %>',
postData: $("#myForm").serialize(),
datatype: "json",
mtype: 'POST',
colNames: ['Product Name', 'Price', 'Weight'],
colModel: [
{ name: 'ProductName', index: 'ProductName', width: 100, align: 'left' },
{ name: 'Price', index: 'Price', width: 50, align: 'left' },
{ name: 'Weight', index: 'Weight', width: 50, align: 'left' }
],
rowNum: 20,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '700',
//pager: $('#pager'), …Run Code Online (Sandbox Code Playgroud) 我的jqGrid可以很好地从我的数据库中提取数据,但是我无法理解Add New Row功能的工作原理.
现在,我可以编辑内联数据,但是我无法使用模态框创建新行.我错过了额外的逻辑,说"如果这是一个新行,将其发布到服务器端URL"而不是修改现有数据.(现在,点击提交只会清除表单并重新加载网格数据.)
文档指出Add New Row是:
jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
Run Code Online (Sandbox Code Playgroud)
但我不确定如何正确使用它.我花了很多时间研究演示,但他们似乎都使用外部按钮来激活新的行命令,而不是使用我想要的模态形式.
我的完整代码在这里:
<!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>jqGrid</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll c1"></div>
<script type="text/javascript">
var lastSelectedId;
jQuery('#list').jqGrid({
url:'grid.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID','Name', 'Price', 'Promotion'],
colModel:[
{name:'product_id',index:'product_id', width:25,editable:false},
{name:'name',index:'name', width:50,editable:true, …Run Code Online (Sandbox Code Playgroud) 我的行的主键是我的jQGrid中的隐藏字段.它被称为"UserId"
colNames: ['UserId', "Details" ...],
colModel: [{ name: 'UserId', index: 'UserId', editable: false, hidden: true },
{ name: 'Details', index: 'Details', editable: true, editactioniconscolumn: true },
...]
Run Code Online (Sandbox Code Playgroud)
我得到了创建和更新案例,但我有删除问题
因为当删除我Id在控制器上得到一个网格行而不是UserId,我可以保留所有UserId's的网格ID,这是我目前所做的删除工作,但我想知道是否有任何方法让我隐藏UserId得到发布而不是网格行Id.