要实现在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()取值,结果正确。
分享到:
相关推荐
jqGrid允许用户在表格的每一行上进行编辑,这通常通过双击或点击编辑按钮来触发。默认情况下,jqGrid提供了两种编辑模式:行编辑和弹出式编辑。行编辑模式下,单元格变为可编辑,用户可以直接在表格内修改数据;而弹...
7. **自定义事件处理**:可以为jqGrid的按钮添加点击事件监听器,比如在“新增”按钮点击时弹出一个模态对话框,让用户输入数据;在“删除”操作前弹出确认提示等。 8. **拦截器与安全性**:Struts2的拦截器可以...
总结,jqGrid是实现数据展示和管理的强大工具,结合C#后台,可以构建出高效、灵活的Web应用。理解其前后端交互机制、增删改查操作以及自定义功能的使用,是开发人员必须掌握的关键技能。通过实例学习和实践,可以...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作大量结构化数据。它提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得开发人员能够轻松地创建交互式的表格。下面将详细介绍...
4. 添加交互功能:根据需求添加编辑、删除、保存等操作的事件处理函数,实现数据的增删改查。 5. 自定义样式:使用CSS调整表格的样式,使其符合项目的视觉风格。 6. 调试与优化:测试表格的各项功能,确保在不同...
此外,JqGrid还允许我们在表格行上添加自定义操作按钮。例如,我们可以在每一行数据旁边添加一个“编辑”按钮,当用户点击时触发编辑操作。这可以通过定义列模型中的`formatter`和`actions`实现。前端可以通过监听...
jqGrid 是一个非常著名的 jQuery 插件,专用于创建数据密集型网格视图。这个"jqGrid-3.5.alfa-2"版本是截至2009年4月2日的最新版本,...对于需要在网页上处理复杂数据展示和交互的项目,jqGrid是一个非常实用的工具。
JQGrid是一款基于jQuery的前端数据网格插件,提供了丰富的表格操作功能,如分页、排序、过滤、编辑等,为用户界面带来优秀的交互体验。 在SSH框架中整合JQGrid,主要目的是在后台处理数据的同时,提供一个前端用户...
同时,你可能还需要处理编辑和删除操作的回调函数,以实现数据的增删改查逻辑。 总之,ASP.NET结合jQGrid提供了一种强大的方式来展示和管理大量数据。通过学习和掌握jQGrid的各种选项和API,开发者可以创建出高度...
在这个"jqGrid与Struts2的结合例子"中,我们将探讨如何将这两者集成,以实现动态加载、数据过滤、编辑和保存等功能。 1. ** jqGrid的基本使用** - 初始化:在HTML页面中,通过`<table>`元素和jQuery初始化jqGrid,...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作大量结构化的数据。它提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得开发者能够轻松构建交互式的表格。在本教程中,我们...
6. 交互功能:jqGrid提供了丰富的用户交互功能,如点击行选中、单元格编辑、行添加和删除。这些功能可以通过设置jqGrid的选项或监听事件来实现,例如,`onSelectRow`事件用于处理行选中操作。 7. 自定义行为:...
jqGrid是一款功能强大的JavaScript库,专门用于创建交互式的表格,支持数据的检索、排序、过滤、编辑等功能。而Struts2则是一个流行的Java Web框架,它简化了MVC(Model-View-Controller)架构的实现,提供了丰富的...
而jqgrid则用于显示和操作表格数据,比如在后台管理系统中展示和编辑记录。通过合理地整合这些工具,开发者可以构建出高效、易用且美观的Web应用。不过要注意的是,尽管这些组件功能强大,但在使用时也需要考虑性能...
2. **视图(View)**:展示数据的界面,这里指网页上的jqGrid表格。视图通过JavaScript代码与模型交互,获取数据并渲染到表格中。 3. **控制器(Controller)**:作为模型和视图之间的桥梁,接收用户的请求,调用...
- 当不希望立即加载数据,即想在需要时动态显示表格,可以将`url`设为空字符串`""`,并把`datatype`设为"local",以避免初始化时的错误,尤其是页面上的其他按钮可能会因此失效。 - 如果需要在开始时就加载数据,`...
综上所述,ASP.NET无刷新编辑表格涉及前端与后端的紧密协作,利用Ajax技术和各种框架、库来实现高效的动态数据更新,提高网页的响应速度和用户体验。开发者可以根据项目需求选择合适的技术栈和实现方式。
除了上述基本功能,jqGrid还提供了许多高级特性,如行内编辑、批量编辑、列动态调整、数据排序、自定义按钮、导出数据到CSV或Excel等。这些特性使得jqGrid成为了一个功能全面的数据管理工具,能满足各种复杂的数据...
8. 可能还需要处理一些交互事件,如点击行、编辑单元格等,这可以通过jqGrid提供的API实现。 这个项目的实际应用可能包括创建一个后台管理系统,用于展示和管理数据库中的记录,例如员工信息、订单数据或者客户资料...
1. **添加(Add)**:用户可以通过前端界面输入新用户的详细信息,点击“添加”按钮后,这些信息将被发送到服务器端,通过S2HH框架处理,将新用户的数据保存到Oracle数据库中。 2. **删除(Delete)**:用户选择一...