`

jqGrid 行编辑(select事件)动态追加控件(操作)

 
阅读更多





在某个控件后面, 追加一个控件, 在某个控件下面设置change事件即可。
但需要注意,如果用到jqGrid的行编辑, 表单中新增的属性无法提交给后台, 想解决这个问题,需要在editGridRow的options中重新设置postdata

如下:

jqGrid表格配置
{
					name : 'attrType',
					index : 'ATTR_TYPE',
					editable:true,
					formatter: function(cellvalue, options, rowObject) {
						var attrType = "";
						if(cellvalue == "1"){
							attrType = "文本";
						}else{
							attrType = "数据字典";
						}
						return attrType;
					},
					editable:true,
					edittype:'select', 
					editoptions:{
						value:"1:文本;0:数据字典",
						dataEvents: [{type:'change',fn:function(e){
							//TODO 下拉后增加后,选择数据字典项目 
					
							$('#dataItemSpan').html('');
							var $attrTypeSel = $( e.target );
							var attrType = $attrTypeSel.val();
							if (attrType == 0) {
								$attrTypeSel.after('<span id="dataItemSpan"> 数据项:<select id="rule" class="FormElement" role="select"><option value="ttt">tt</option></select></span>');
							}
						}}]
					},
					formoptions:{colpos:1,rowpos:3,elmsuffix:'<font color="red" >*</font>'}



var editDialogOptions = {
top: $(window).height()/4,
    left: $(window).width()/3,
    addCaption: "新增属性",
    editCaption: "编辑属性",
    ......
beforeSubmit : function(postdata, formid) {
		if ($('#rule').length != 0) {
			postdata["attribute.rule"] = $('#rule').val();//Reset data of the rule.
		}
		return[true,"sucessful"];
    }
}
var rowid = jQuery("#attributeList").jqGrid("getGridParam", "selrow");//selarrrow
jQuery("#attributeList").jqGrid('editGridRow',rowid, editDialogOptions);

  • 大小: 5.5 KB
  • 大小: 6.2 KB
0
2
分享到:
评论

相关推荐

    jqgrid行编辑+动态为其他列赋值

    在本例中,我们将深入探讨如何实现"jqgrid行编辑+动态为其他列赋值"这一功能。 首先,我们需要理解jqGrid的行编辑功能。jqGrid允许用户在表格的每一行上进行编辑,这通常通过双击或点击编辑按钮来触发。默认情况下...

    jQGrid动态填充select下拉框的选项值(动态填充)

    动态填充select下拉框的选项值,意味着在表格加载或编辑时,根据服务器返回的数据或特定逻辑来生成并填充这些选项。这个过程通常包括以下步骤: 1. **设置列模型**:在初始化jQGrid时,我们需要为包含下拉框的列...

    jqGrid自定义组合控件范例

    在这个“jqGrid自定义组合控件范例”中,我们将深入探讨如何利用jqGrid的自定义编辑类型(edittype)来创建更符合用户需求的交互式控件,从而提升用户体验。 首先,理解jqGrid的列模型(colModel)是关键。列模型...

    jqgrid 编辑表格 一列

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,包括数据的加载、排序、过滤、编辑和显示。本篇文章将深入探讨如何在 jqGrid 中实现表格的一列编辑功能。 一、...

    jqGrid超详细属性说明(追加整理)

    ### jqGrid超详细属性说明(追加整理) #### 概述 `jqGrid`是一款功能强大的jQuery插件,主要用于在Web应用中展示表格数据。它不仅支持多种数据格式(如XML、JSON等),还提供了丰富的配置选项来实现复杂的前端交互...

    jqGrid .Net控件

    - **行编辑和行添加**: 支持行内编辑和新行添加,提供两种编辑模式:弹出式和内联编辑。 - **自定义事件**: 可以绑定各种服务器端和客户端事件,如LoadComplete、EditRow等。 ### 4. 示例应用 压缩包内的"sample...

    5种最流行好用的表格grid控件

    Guriddo jqGrid是jqGrid的一个分支,它扩展了原版jqGrid的功能,增加了如行内编辑、列固定、自定义操作按钮等特性。Guriddo jqGrid还优化了性能,支持大数据集的高效渲染,对于需要处理大量数据的场景非常适用。 4...

    JqGrid控件 MVC 版

    **JqGrid控件MVC版详解** JqGrid是一款强大的JavaScript表格插件,它在MVC(模型-视图-控制器)框架下有专门的版本,为Web应用提供了丰富的数据展示和操作功能。JqGrid以其高度可配置性和灵活性,广泛应用于数据...

    ASP.NET jqGRID 控件 源代码 示例

    jqGrid支持多种高级功能,如自定义编辑、过滤、搜索、行选择、行操作等。例如,可以使用`beforeSelectRow`事件实现行选中功能,或者通过`loadComplete`事件处理数据加载完成后的一些逻辑。 六、jqGrid与ASP.NET MVC...

    jqgrid合并单元格,合并行、合并列

    jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...

    jqGrid控件导入导出Excel文件

    jqGrid控件导入导出Excel文件,将几个jqgrid导出一份Excel多sheet文件 ,亦可多sheet的excel导入至多个jqGrid表格。

    jqGrid超详细属性说明(追加整理)整合API,示例

    jqGrid 还支持自定义函数和事件,如 `onSelectRow`(行被选中时触发)和 `beforeRequest`(在请求数据前执行)。 总的来说,jqGrid 提供了丰富的配置选项来满足不同场景的需求,通过这些属性和方法,你可以创建功能...

    jqGrid的表格数据呈编辑转态

    ### jqGrid表格数据呈编辑状态知识点详解 #### 一、jqGrid简介 jqGrid是一款功能强大的jQuery插件,用于在网页上实现数据网格展示。它不仅支持数据展示,还提供了丰富的交互功能,如排序、搜索、分页等,并且允许...

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下...

    jqgrid_位于上端的合计行.

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示表格数据。它提供了丰富的功能,包括数据分页、排序、过滤、编辑以及我们关注的主题——上端合计行。"jqgrid_位于上端的合计行" 指的是在 jqGrid ...

    jqGrid 演示最新版 jqgrid 4.4, jQuery 1.8.0, jQuery-ui 1.8.23

    jQuery 1.8.0 是一个稳定版本,提供了一套强大的DOM操作、事件处理、动画和Ajax交互的API,使得开发者能够更高效地编写JavaScript代码。jQuery UI 1.8.23 则是与jQuery配套的用户界面库,它包含了一些可自定义的UI...

    jqgrid中文文档API

    本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、ColModel API等方面的知识点。 原理 jQgrid是典型的B/S架构,服务器端只是提供数据管理,客户端只是提供数据显示。...

    jqgrid动态创建列与列合计事例

    jqgrid初始化时动态创建列并对这些列数值进行合计 生成动态列的数据源可以通过ajax获取或者前端自定义数据集

Global site tag (gtag.js) - Google Analytics