要实现在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()取值,结果正确。
分享到:
相关推荐
table表格样式利用jqgrid实现
下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下...
jqgrid 表格的增删改查4种操作,以及表格分页,还有修改以及添加时候的modal弹出框。代码是个project项目文件,需要自己建个解决方案将项目包含进去。
该方式是在jqgrid的列基础上进行编辑,为列添加保存事件,文本域和输入框采用blur失去焦点的方式进行保存,该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
jqGrid实例下载(数据交互,统计,时间插件都已实现)
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
; charset=utf-8"> <title>Insert title here ...<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> ...
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
无刷新增删改查,网上都有免费下载,所以就不设置积分了。
jqGrid数据调用实例
jqgrid+struts2+jdbc实现的增删改查
jqgrid 编辑表格 一列
jqgrid加载本地数据并且分页例子,下载直接搭环境使用
jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid...
本Demo利用Jquery的jqgrid插件利用本地资源数据,实现分页。
我这代码是jqgrid后台连接数据库的代码!很实用
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
NULL 博文链接:https://vipshow.iteye.com/blog/1812381
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。