我之前已经多次使用过jqgrid而没有太多问题,除了这次我碰到了一堵砖墙。
我正在构建一个网站,要求用户通过管理员前端访问产品数据库表,这是JQGRID的用武之地。此表有许多列,例如有一个模态框弹出添加新行是不切实际的(模态框比窗口高)。
因此我使用内联方法来编辑,添加和删除行,除了保存新记录之外,这种方法很有效。单击添加行按钮,在表的顶部创建一个新行,我可以随意填充该行,但是当我单击保存行时,没有任何反应!
如果我突出显示一行并编辑某些内容然后单击“保存行”,它将使用所有参数触发对服务器端脚本所需的ajax调用,并修改该行。因此,我知道按钮确实有效,而不是简单地没有启用按钮。突出显示一行并单击删除也可以。
让我感到困惑的是,在添加新行时点击保存行什么都不做,(好吧它不会尝试触发ajax请求 - 使用Firebug监控),也不会出现任何错误。我正在使用最新版本的JQGRID
这是我的代码。
<div style='overflow: auto;'>
<table id='list3'></table>
<div id='pager3'></div>
</div>
<script>
jQuery('#list3').jqGrid({
url:'/accent/index.php?id=39',
datatype: 'json',
colNames:['ID','Brand', 'Item Code', 'S. Desc','L. Desc','Range',
'Colour/Finish','Category','Fitment','No of Bulbs','Type of Lamp','Light Socket','Max W',
'Max LE Lamp','IP','Width','Length','Height','Min Drop','Max Drop',
'Projection','Weight','Shade Code','RRP','Price','Clearance','Featured'
],
colModel:[
{name:'id',index:'id', width:40,align:'center',editable:true},
{name:'brand',index:'brand', width:70,align:'center',editable:true},
{name:'itemCode',index:'itemCode', width:75,align:'center',editable:true},
{name:'shortDesc',index:'shortDesc', width:100,editable:true},
{name:'longDesc',index:'longDesc', width:200,editable:true},
{name:'range',index:'range', width:100,align:'center',editable:true},
{name:'colourFinish1',index:'colourFinish1',width:100,align:'center',editable:true},
{name:'groupOfLights',index:'groupOfLights',width:100,align:'center',editable:true},
{name:'typeOfFitting',index:'typeOfFitting',width:100,align:'center',editable:true},
{name:'noOfLamp1',index:'noOfLamp1',width:80,align:'center',editable:true},
{name:'typeOfLamp1',index:'typeOfLamp1',width:80,align:'center',editable:true},
{name:'lightSocketLamp1',index:'lightSocketLamp1',width:50,align:'center',editable:true},
{name:'maxWattageLamp1',index:'maxWattagelamp1',width:50,align:'center',editable:true},
{name:'maxLowEnergyLamp',index:'maxLowEnergyLamp',width:50,align:'center',editable:true},
{name:'ipRating',index:'ipRating',width:50,align:'center',editable:true},
{name:'width',index:'width',width:50,align:'right',editable:true},
{name:'length',index:'length',width:50,align:'right',editable:true},
{name:'height',index:'height',width:50,align:'right',editable:true},
{name:'minimumDrop',index:'minimumDrop',width:60,align:'right',editable:true},
{name:'maximumDrop',index:'maximumDrop',width:60,align:'right',editable:true},
{name:'projection',index:'projection',width:100,align:'right',editable:true},
{name:'weight',index:'weight',width:50,align:'right',editable:true},
{name:'shadeCode1',index:'shadeCode1',width:50,align:'right',editable:true},
{name:'rrp',index:'rrp',width:50,align:'right',editable:true},
{name:'price',index:'price',width:50,align:'right',editable:true},
{name:'clearance',index:'clearance',width:50,align:'center',editable:true},
{name:'featured',index:'featured',width:50,align:'center',editable:true}
],
rowNum:25,
rowList:[25,50,100],
pager: '#pager3',
sortname: 'id',
viewrecords: true,
sortorder: 'desc',
caption:'Edit Products',
height: '500px',
editurl:'/accent/core/components/productsdatabase/editJSON.php?&u=admin
});
jQuery('#list3').jqGrid('navGrid','#pager3',{edit:false,add:false,del:true});
jQuery('#list3').jqGrid('inlineNav','#pager3',{edit:true,add:true,del:false});
</script>