`

jqgrid 多行添加,删除

阅读更多
jqgrid 多行添加,删除
遇到了一些问题:

1)用户添加行,需要将为编辑状态的行的checbox 置为未选中,去掉高亮显示效果

2)grid中存在未保存行时,非编辑状态的行 单击,双击没有效果,且checkbox不能选中


解决办法:


/*-------获取当前grid中需要编辑的行数 开始-----------*/
function getEditRowCount($jqgrid){
	var $editTr = getEditRow($jqgrid) ;
	if ( $editTr && $editTr.length > 0){
		return $editTr.length ;
	}
	return 0;
}
/*-------获取当前grid中需要编辑的行数 结束-----------*/

/*-------获得当前grid中编辑的行 开始----------------*/
function getEditRow($jqgrid){
	return $jqgrid.find("tr[editable=1]") ;
}

/*-------获得当前grid中编辑的行 结束----------------*/

//设置去掉高亮
$jqgrid.removeClass("ui-state-highlight");


//给grid 添加两个事件
ondblClickRow: function (rowid,iRow,iCol,e) {
        	if(getEditRowCount($jqgrid)>0)
        	$("#"+rowid).find("input:first").attr("checked",false);
},
onSelectRow:function(rowid,status){
        	if (getEditRowCount($jqrid)>0){
        		//如果当前行不是编辑行 checkbox不可选中,去掉高亮效果
	        	if ($("#"+rowid).attr("editable") != 1){
	        		//单击行,checkbox不选中
		        	$("#"+rowid).find("input:first").attr("checked",false);
		        	//点击行无高亮效果
		        	$("#"+rowid).removeClass("ui-state-highlight");
	        	}
        	}
},


分享到:
评论

相关推荐

    jqgriddemo,样式漂亮,可以直接使用

    它允许用户进行数据排序、筛选、分页、编辑、添加、删除和查看,同时还支持远程数据源,如JSON、XML、CSV等格式,能够与各种后端服务器技术(如PHP、ASP.NET、Java等)无缝集成。 **主要特性** 1. **数据展示**:...

    jqgrid demo

    其次,jqGrid支持添加、编辑和删除功能,使得用户可以直接在网页上对表格中的数据进行操作。这些操作通常通过弹出对话框或行内编辑模式实现,方便快捷。同时,它还支持数据的搜索功能,用户可以通过指定字段和条件来...

    jquery.jqGrid-4.5.4

    - **添加事件处理**:通过`jQuery("#grid_id").jqGrid('navGrid', '#pager', {edit: true, add: true, del: true})`添加导航栏并设置编辑、添加、删除等功能。 - **自定义功能**:根据需求使用jqGrid提供的API进行...

    jqGrid官方I文档

    - **方法**:提供了一系列方法来控制网格的行为,如添加行、删除行等。 #### 九、分页器(导航条) - **属性**:配置分页器的样式和行为。 - **事件**:与分页器相关的事件。 - **方法**:控制分页器的方法。 - **...

    jqGrid模板

    4. 添加交互功能:根据需求添加编辑、删除、保存等操作的事件处理函数,实现数据的增删改查。 5. 自定义样式:使用CSS调整表格的样式,使其符合项目的视觉风格。 6. 调试与优化:测试表格的各项功能,确保在不同...

    jqGrid所需js和css

    2. **编辑功能**:用户可以直接在表格中编辑数据,支持单行和多行编辑模式,以及添加、删除和保存记录的操作。 3. **列自定义**:开发者可以根据需求自由配置列的显示,包括列宽、标题、对齐方式、格式化等。 4. *...

    最新JQGrid4+ API

    通过`addRowData`、`delRowData`和`editRow`方法,可以实现数据的添加、删除和编辑。对于编辑,还有单行编辑、多行编辑和弹出式编辑模式。 三、功能扩展 1. **排序**:JQGrid默认支持列点击排序,通过`sortname`和`...

    jqGrid_5.3.1

    - **数据展示**:jqGrid支持多列、多行数据展示,可自定义列宽、排序、分页、搜索等。 - **编辑功能**:提供单元格、行级别的编辑,支持添加、删除、修改数据。 - **过滤和搜索**:内置高级搜索功能,用户可以按...

    jqgrid 3.5 beta demo

    它提供了丰富的功能,包括数据分页、排序、过滤、编辑、添加和删除等。3.5 beta版本是jqGrid的一个重要迭代,引入了更多改进和新特性。 1. **基本概念**:jqGrid是一种客户端数据管理组件,它使用HTML表格(`...

    jqgrid帮组文档

    - **添加行**:在表格中添加新行。 - **编辑行**:编辑表格中的某一行数据。 - **删除行**:移除表格中的某一行。 - **内联编辑**:提供内联编辑模式,允许用户直接在单元格中编辑数据。 - **多选功能**:支持多行...

    jqGrid 3.5 beta

    - **编辑与添加记录**: 支持行内编辑和弹出式编辑模式,可以添加、修改或删除记录。 - **多列自定义**: 开发者可以定制每列的显示样式和行为,如宽度、对齐方式、格式化等。 - **行选择**: 支持单行、多行和全选...

    jquery.jqGrid-3.5.3.zip

    1. **jqGrid的基本概念**:jqGrid是一个JavaScript库,它提供了丰富的界面和功能,如排序、分页、过滤、编辑、添加、删除和查看记录。它支持多种数据源,包括JSON、XML、HTML以及服务器端处理的数据。 2. **css目录...

    jqGrid表格应用之新增与删除数据附源码下载

    在jqGrid中,我们可以利用其内置的API和Ajax技术实现数据的动态交互,包括新增和删除操作。本文将深入探讨如何使用jqGrid与后端(如PHP)进行交互,以实现数据的增删功能。 首先,为了实现jqGrid的增删功能,我们...

    jquery的jqgrid 3.2 demo for sql 2000版本

    2. **数据交互**:用户可以进行添加、编辑、删除等操作,这些操作可以通过Ajax异步完成,无需刷新整个页面。 3. **自定义列**:开发者可以自由配置列的显示样式、宽度、对齐方式,甚至可以添加自定义的列模板。 4. *...

    jquery.jqGrid-3.6.4

    jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。

    jqgrid总结

    - `.navGrid`: 添加导航栏,提供添加、编辑、删除和查看等功能。 - `add`, `edit`, `del`, `view`: 分别表示是否启用这些操作。 - `addtext`, `editText`: 自定义操作按钮的文本。 7. **行操作**: - `editRow`...

    jquery.jqGrid-3.8.12.zip

    jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等

    Bootstrap Table 删除和批量删除

    在 Bootstrap Table 中,删除操作可以通过在表格中添加删除按钮来实现。例如: ```html <th data-field="id" data-align="center" data-halign="center">ID ...

    LaravelJqGrid:在Laravel中使用JqGrid插件的示例

    7. **扩展功能**:根据需要,你可以利用 JqGrid 提供的 API 实现更复杂的功能,如自定义编辑器、行级操作、行内添加和删除等。 通过以上步骤,你可以在 Laravel 项目中成功地集成和使用 JqGrid 插件。LaravelJqGrid...

    OpenREST-开源

    5. **API接口**:丰富的JavaScript API使得开发者可以轻松地控制表格的行为,如添加、删除、更新记录,以及处理用户交互事件。 6. **本地化和国际化**:jqGrid支持多种语言,方便不同地区的用户使用。 7. **数据...

Global site tag (gtag.js) - Google Analytics