JQGRID CELLEDIT 编辑模式下怎样取行数据
1个回答
展开全部
示例:
var lastFlag ;
$gridTable = $("#gridTable").jqGrid( {
datatype : 'json',
colNames : ['age', 'sex' ],
colModel : [
{name : 'age',index : 'age',width : 80,editable:true,edittype:'text',editrules:{required:true}},
{name : 'sex',index : 'sex',width : 160,editable:true,edittype:'text',editrules:{required:true}}
],
rowNum : 10,
pager : "#tablePager",
multiselect : false,
viewrecords : true,
sortorder : "desc",
jsonReader : {
root : "dataRows",
repeatitems : false
},
caption : "数据列表",
height : "auto",
rownumbers : true,
onSelectRow : function(id){
if(id && id!=lastFlag){
$('#gridTable').jqGrid('saveRow',lastFlag);
lastFlag=id;
}
$('#gridTable').jqGrid('editRow',id,true);
},
editurl : "../propManage.do?method=doNothing"
})
/** 设置增行按钮的click事件处理 */
$("#addButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
age: "",
sex: ""
};
var ids = jQuery("#gridTable").jqGrid('getDataIDs');
var rowid = getMaxId(ids) + 1;
if (selectedId) {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "after", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");
}
})
/** 设置删行按钮的click事件处理 */
$("#removeButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam","selrow");
if(!selectedId){
alert("请选择要删除的行");
return;
}else{
$("#gridTable").jqGrid("delRowData", selectedId);
}
})
问题1:JQGRID 编辑模式下怎样取行数据?
用户操作模拟:用户新增一行,鼠标点进去,该行进入编辑状态,填写数据,点击保存。
问题出现了: 点击保存以后,需要通过getRowData()获取表格里的数据传回后台,但是当行在编辑状态下时,getRowData()取得的值为类似<input ....></input> 的html标签,不是编辑框中输入的值。
解决办法:
alert getRowData()获取出的数据,你会发现<input>标签的id是5_age, 6_age之类的,也就是行id+“_colModel name”,这就好办了,
做法就是找到编辑行的单元格的id,然后得到单元格里的内容,通过"setRowData"将其保存起来,然后再通过getRowData()取值。
示例:
var selectedId = $('#gridTable').jqGrid("getGridParam", "selrow");
var ageId = selectedId + "_age";
var sexId = selectedId + "_sex";
var age= $('#'+ageId).val();
var sex= $('#'+sexId).val();
$('#gridTable').jqGrid('setRowData',selectedId,{age:age,sex:sex},'');
再通过getRowData()取值,结果正确。
var lastFlag ;
$gridTable = $("#gridTable").jqGrid( {
datatype : 'json',
colNames : ['age', 'sex' ],
colModel : [
{name : 'age',index : 'age',width : 80,editable:true,edittype:'text',editrules:{required:true}},
{name : 'sex',index : 'sex',width : 160,editable:true,edittype:'text',editrules:{required:true}}
],
rowNum : 10,
pager : "#tablePager",
multiselect : false,
viewrecords : true,
sortorder : "desc",
jsonReader : {
root : "dataRows",
repeatitems : false
},
caption : "数据列表",
height : "auto",
rownumbers : true,
onSelectRow : function(id){
if(id && id!=lastFlag){
$('#gridTable').jqGrid('saveRow',lastFlag);
lastFlag=id;
}
$('#gridTable').jqGrid('editRow',id,true);
},
editurl : "../propManage.do?method=doNothing"
})
/** 设置增行按钮的click事件处理 */
$("#addButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
age: "",
sex: ""
};
var ids = jQuery("#gridTable").jqGrid('getDataIDs');
var rowid = getMaxId(ids) + 1;
if (selectedId) {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "after", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");
}
})
/** 设置删行按钮的click事件处理 */
$("#removeButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam","selrow");
if(!selectedId){
alert("请选择要删除的行");
return;
}else{
$("#gridTable").jqGrid("delRowData", selectedId);
}
})
问题1:JQGRID 编辑模式下怎样取行数据?
用户操作模拟:用户新增一行,鼠标点进去,该行进入编辑状态,填写数据,点击保存。
问题出现了: 点击保存以后,需要通过getRowData()获取表格里的数据传回后台,但是当行在编辑状态下时,getRowData()取得的值为类似<input ....></input> 的html标签,不是编辑框中输入的值。
解决办法:
alert getRowData()获取出的数据,你会发现<input>标签的id是5_age, 6_age之类的,也就是行id+“_colModel name”,这就好办了,
做法就是找到编辑行的单元格的id,然后得到单元格里的内容,通过"setRowData"将其保存起来,然后再通过getRowData()取值。
示例:
var selectedId = $('#gridTable').jqGrid("getGridParam", "selrow");
var ageId = selectedId + "_age";
var sexId = selectedId + "_sex";
var age= $('#'+ageId).val();
var sex= $('#'+sexId).val();
$('#gridTable').jqGrid('setRowData',selectedId,{age:age,sex:sex},'');
再通过getRowData()取值,结果正确。
ZESTRON
2024-09-04 广告
2024-09-04 广告
在Dr. O.K. Wack Chemie GmbH,我们高度重视ZESTRON的表界面分析技术。该技术通过深入研究材料表面与界面的性质,为提升产品质量与可靠性提供了有力支持。ZESTRON的表界面分析不仅涵盖了相变化、化学反应、吸附与解吸...
点击进入详情页
本回答由ZESTRON提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询