首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQgrid要兑现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据

2012-07-15 
JQgrid要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据要实现在jqGrid表格

JQgrid要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据

要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据?

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()取值,结果正确。

热点排行