如何从Jqgrid单元格编辑中打开一个小窗体或窗口
如何从Jqgrid单元格编辑中打开一个小窗体或窗口
提问于 2011-12-27 15:06:53
我对jquery很陌生。我的要求是，我需要在Jqgrid中显示一个MultiLine文本框值，并允许用户编辑它。因为我的网格有很多列，所以我认为当用户编辑jqgrid中的Multiline textbox时，会弹出一个用户可以输入值的小窗口，然后单击一个按钮，该值将返回给jqgrid中的多行文本框。
再次，当用户想要看到他们时，点击多行框应该打开窗口，输入文本。
有人能帮我吗？
谢谢
下面是我的网格details..Its，一个可编辑的网格。我的要求是在用户单击Freq遗漏的问题列时，随时打开一个弹出。
function loadCustomerBenefitResultsGrid()
{
var lastsel;
jQuery("#CustomerSavingsView").jqGrid(
{
dataType:"local",
colNames: ['UID','Date','QPlus Savings',
'Savings Available',
'Consignment Savings','Cost Increases','Distribution Fees',
'Clinical Review', 'Inventory Red','Clinical Time',
'Logistical Time',
'SpaceUtil Time','GreenSmart Savings','Gold Standard',
'%Staff Engaged in Courses','InsertUpdateDel','IsEdited',
'CustomerID','GreenItems in Trays','SSF Layout',
'StaffTest Scores','Freq Missed Questions','Popular Courses','Delete'],
colModel: [
{name:'UID',index:'UID', width:40, sorttype:'string',"key": true,hidden:true},
{name:'Date', index:'Date',width:100,align:'center', sorttype: 'string',editable:true, editoptions:{size:20,
dataInit:function(el)
{
$(el).datepicker({dateFormat:'mm/dd/yy'});
},
defaultValue: function()
{
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0"+month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0"+day : day;
var year = currentTime.getFullYear();
return month+"/"+day + "/"+year;
}
}
},
{ name: 'ProductSavings', index: 'ProductSavings',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'SavingsstillAvailable', index: 'SavingsstillAvailable',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'Consignment', index: 'Consignment',width:105,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'CostIncreases', index: 'CostIncreases',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'Distribution', index: 'Distribution',width:110,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'ClinicalReview', index: 'ClinicalReview',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'InventoryRed', index: 'InventoryRed',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'ClinicalTime', index: 'ClinicalTime',width:70,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'LogisticalTime', index: 'LogisticalTime',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'SpaceUtilTime', index: 'SpaceUtilTime',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'GreenSmart', index: 'GreenSmartSavings',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'GoldStandard', index: 'GoldStandard',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text',editoptions: { size: 10} },
{ name: 'StaffTestScores', index: 'StaffTestScores',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'InsertUpdateDel', index: 'InsertUpdateDel',width: 100, align:'center', sorttype: 'string',hidden:true},
{ name: 'IsEdited', index: 'IsEdited',width: 40, align:'center', sorttype: 'string',hidden:true},
{ name: 'CustomerID', index: 'CustomerID',width: 40, align:'center', sorttype: 'string',hidden:true},
{ name: 'GreenItemsinTray', index: 'GreenItemsinTray',width:90,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'SpacestoragefacultyAnalysis', index: 'SpacestoragefacultyAnalysis',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'StaffEducationalCourses', index: 'StaffEducationalCourses',width:80,align:'center', sorttype: 'string',editable: true,edittype: 'text', editoptions: { size: 10} },
{ name: 'FreqMissedQuestions', index: 'FreqMissedQuestions',width:200, sorttype: 'string',editable: true,edittype:"textarea", editoptions:{rows:"3",cols:"25"}} ,
{ name: 'PopularCourses', index: 'PopularCourses',width:150,sorttype: 'string',editable: true,edittype:"textarea", editoptions:{rows:"3",cols:"20"}} ,
{ name: 'Delete', index: 'Delete',width: 90, align:'center' }
],
height: 250,
width:1175,
gridview:true,
hidegrid: false,
viewrecords:true,
sortable: true,
sortname: 'Date',
sortorder: "asc",
editurl: "clientArray",
onSelectRow: function(id) {
if (id && id !== lastsel)
{
jQuery("#CustomerSavingsView").saveRow(lastsel,false,'clientArray');
jQuery("#CustomerSavingsView").editRow(id,true);
lastsel = id;
//Get the current row
var currentRow = jQuery("#CustomerSavingsView").getRowData(id);
//For Insert
if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Inserted")
{
changedRowsBeforeInsert.push(id);
}
//For Update
if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Updated")
{
changedRows.push(id);
}
} else
{
jQuery("#CustomerSavingsView").saveRow(lastsel,false,'clientArray');
jQuery("#CustomerSavingsView").editRow(id,true);
lastsel = id;
//Get the current row
var currentRow = jQuery("#CustomerSavingsView").getRowData(id);
//For Insert
if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Inserted")
{
changedRowsBeforeInsert.push(id);
}
//For Update
if(currentRow['InsertUpdateDel']!= null && currentRow['InsertUpdateDel'] == "Updated")
{
changedRows.push(id);
}
}
//Limit the Keypress
$('input[name=ProductSavings]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=Consignment]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=CostIncreases]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=Distribution]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=ClinicalReview]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ });
$('input[name=InventoryRed]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=ClinicalTime]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=LogisticalTime]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ });
$('input[name=SpaceUtilTime]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=GreenSmart]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=StaffTestScores]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=SavingsstillAvailable]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=GreenItemsinTray]').limitkeypress({ rexp:/^[+]?\d*\.?\d*$/ });
$('input[name=SpacestoragefacultyAnalysis]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
$('input[name=StaffEducationalCourses]').limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ });
},
gridComplete: function () {
var ids = jQuery("#CustomerSavingsView").jqGrid('getDataIDs');
if (ids.length > 0)
{
for (var i = 0; i < ids.length; i++)
{
var cl = ids[i];
cb = "<input type='checkbox' id='chkDelete"+cl+"' value='" + cl + "' />";
jQuery("#CustomerSavingsView").jqGrid('setRowData', cl, { Delete: cb});
}
}
}
}); }
回答 1
Stack Overflow用户
发布于 2011-12-27 15:18:14
从引用此页面开始：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
找到onCellSelect的选项，这就是您需要侦听绑定的事件。
onCellSelect : function (rowid,iCol, cellcontent, e) {
// ...
}在该事件中，检查以确保iCol是特定文本框单元格的索引(因为此事件将为每个单元单元触发，而且您只希望对特定的单元格具有此功能)。如果它是正确的单元格，那么您有几种方法可以完成实际的编辑。我会通过弹出一个嵌入表单的jQuery UI模式对话框来做到这一点。我还将使用jquery来使用单击记录的rowID填充表单内容，并加载一个textarea字段，其中包含单元格的当前值(在您的事件处理程序中可以作为单元格内容使用)。然后，您可以使用jQuery的Ajax表单提交选项(请参阅.serialize()和$.ajax())将新值发回服务器，以便在后端更新值(例如，数据库更新)。最后，在Ajax成功处理程序中，关闭模式对话框并在表上运行.trigger("reloadGrid");，用当前值重新加载网格。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8650181
复制相关文章
相似问题
腾讯云开发者
