0
我是jquery的新手。我的要求是我需要在Jqgrid中显示MultiLine文本框的值，并允许用户编辑它。由于我的网格有很多列，我想当用户在jqgrid中编辑多行文本框时，弹出一个小窗口，用户可以在其中输入值并单击按钮时，该值将返回到jqgrid中的多行文本框。如何从Jqgrid单元格打开一个小窗体或窗口编辑
再次当用户想要看到它们时，单击多行框应打开输入文本的窗口。
任何人都可以帮助我吗？
感谢
下面是我的网details..Its可编辑网格。我的要求是在用户点击Freq Missed问题栏时打开弹出窗口。
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});
}
}
}
});
}
签名被删除，请参阅FAQ。 – 2011-12-28 04:55:10