我是jquery的新手。我的要求是我需要在Jqgrid中显示MultiLine文本框值并允许用户编辑它。由于我的网格有很多列，我想当用户在jqgrid中编辑多行文本框时，弹出一个用户可以输入值的小窗口，点击一个按钮，该值将返回到jqgrid中的多行文本框。
再次当用户想要查看它们时，单击“多行”框将打开包含输入文本的窗口。
有人可以帮我吗？
由于
下面是我的网格细节..它是一个可编辑的网格。我的要求是在用户点击Freq Missed Questions列时打开弹出窗口。
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});
}
}
}
});
}
答案 0 :(得分：1)
首先参考此页面：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
找到onCellSelect的选项，这是您需要侦听绑定的事件。
onCellSelect : function (rowid,iCol, cellcontent, e) {
// ...
}
在该事件中，检查以确保iCol是特定文本框单元格的索引（因为此事件将针对每个单元格触发，并且您只需要特定文本框架的此功能）。如果它是正确的单元格，那么您可以通过几种方式完成实际编辑。我会通过弹出一个嵌入了表单的jQuery UI modal dialog来执行此操作。我还将使用jquery使用单击的记录的rowID填充表单内容，并使用单元格的当前值加载textarea字段（在事件处理程序中可用作cellcontent）。然后，您可以使用jQuery的Ajax表单提交选项（请参阅.serialize()和$.ajax()）将新值发回服务器，以便在后端更新值（例如，数据库更新）。最后，在Ajax成功处理程序中，关闭模式对话框并在表上运行.trigger("reloadGrid");，以使用当前值重新加载网格。