easyui datagrid 行编辑 初始开启一个单元格，有值后再开启同行的其他单元格的方法

心之所向0 2017-02-07 02:15:39
datagrid编辑行的时候先是开启一个单元格（下拉框），当这个单元格选择后再在onSelect里开启同行的其他单元格。
我现在用的是先禁用整行，再启用整行，但这样会报easyui的错误，不影响功能，请教下其他的方法
...全文
781 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
我只是一个程序员 2017-09-08
  • 打赏
  • 举报
 回复
你好，我跟你碰到了类似的问题： 我现在要实现datagrid中一个combobox的单元格的的 是否 选择事件 选 是 的时候 同行的另一个单元格 赋给一个a标签超链接 选 否 的时候 则没有超链接，单元格的内容为空 我的思路跟你差不多，也是在 combobox中添加一个onChange事件，里面调用datagrid的endEdit方法,再开启编辑此行， 就相当于刷新了该行，要存a标签的单元格就能识别到改变后的值，并做出是否加a标签的动作 现在也是跟你一样，onChange中调用endEdit方法就报错: Uncaught TypeError: Cannot read property 'panel' of undefined 请问你是怎么解决的？
心之所向0 2017-02-27
  • 打赏
  • 举报
 回复
可能这个用法不对吧，我还是改成整行可编辑然后禁用的方法好了。
redlz2500 2017-02-16
  • 打赏
  • 举报
 回复
引用 22 楼 qq_26286987 的回复:
[quote=引用 21 楼 redlz2500 的回复:] 也就是说，如果你是用editcell来处理，他会自己处理editor以及editor1的转换，但是如果你不是用editor，而是自己手动查找编辑器并生成，在没有endedit前，应该获取editor1属性才对 官网实例应该是editcell，然后点击另外的cell，然后endedit，然后重新editce 的
其实方法跟editcell关系不大，你提供的是点击后开启编辑的方法，我现在是想通过第一个单元格去自动开启后面的单元格，editor我是没动过。报错就是在onSelect里调用了关闭再开启的方法后才出现的，在onHidePanel里是没报错的，只不过有其他的问题，所以现在要解决的是我在onSelect里调用了关闭再开启的方法的错误。 错误信息是 

jquery.easyui.min.js:12881 Uncaught TypeError: Cannot read property 'panel' of undefined
_9a5	@	jquery.easyui.min.js:12881
(anonymous function)	@	jquery.easyui.min.js:13007
m.extend.each	@	jquery.min.js:2
m.fn.m.each	@	jquery.min.js:2
$.fn.combo.methods.hidePanel	@	jquery.easyui.min.js:13006
$.fn.combo	@	jquery.easyui.min.js:12965
(anonymous function)	@	jquery.easyui.min.js:13322
m.event.dispatch	@	jquery.min.js:4
r.handle	@	jquery.min.js:4
如果开启多个单元格可以在onSelect里实现也是可以的[/quote] 你把文件打个包发给我吧，我周末看看 redlz2500@163.com
心之所向0 2017-02-16
  • 打赏
  • 举报
 回复
引用 23 楼 redlz2500 的回复:
你把文件打个包发给我吧，我周末看看 redlz2500@163.com
文件加密的发不了，你只用在onSelect里面测试关闭再开启就知道了
心之所向0 2017-02-15
  • 打赏
  • 举报
 回复
引用 21 楼 redlz2500 的回复:
也就是说，如果你是用editcell来处理，他会自己处理editor以及editor1的转换，但是如果你不是用editor，而是自己手动查找编辑器并生成，在没有endedit前，应该获取editor1属性才对 官网实例应该是editcell，然后点击另外的cell，然后endedit，然后重新editce 的
其实方法跟editcell关系不大，你提供的是点击后开启编辑的方法，我现在是想通过第一个单元格去自动开启后面的单元格，editor我是没动过。报错就是在onSelect里调用了关闭再开启的方法后才出现的，在onHidePanel里是没报错的，只不过有其他的问题，所以现在要解决的是我在onSelect里调用了关闭再开启的方法的错误。 错误信息是 

jquery.easyui.min.js:12881 Uncaught TypeError: Cannot read property 'panel' of undefined
_9a5	@	jquery.easyui.min.js:12881
(anonymous function)	@	jquery.easyui.min.js:13007
m.extend.each	@	jquery.min.js:2
m.fn.m.each	@	jquery.min.js:2
$.fn.combo.methods.hidePanel	@	jquery.easyui.min.js:13006
$.fn.combo	@	jquery.easyui.min.js:12965
(anonymous function)	@	jquery.easyui.min.js:13322
m.event.dispatch	@	jquery.min.js:4
r.handle	@	jquery.min.js:4
如果开启多个单元格可以在onSelect里实现也是可以的
redlz2500 2017-02-15
  • 打赏
  • 举报
 回复
也就是说，如果你是用editcell来处理，他会自己处理editor以及editor1的转换，但是如果你不是用editor，而是自己手动查找编辑器并生成，在没有endedit前，应该获取editor1属性才对 官网实例应该是editcell，然后点击另外的cell，然后endedit，然后重新editce 的
redlz2500 2017-02-15
  • 打赏
  • 举报
 回复
晕……还没完……拖太长实在没时间看了 这个是我的代码，参考下，这个代码是根据数据仅允许某一列后面的单元格可以编辑，因为是直接在官方代码上面改的，而且注释都保留的，你参考下吧，这个 
	$.extend($.fn.datagrid.methods, {
		editSpecialRow: function(jq,param){
			return jq.each(function(){
				var opts = $(this).datagrid('options');
				var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
				var row=$(this).datagrid('getSelected');
				//检查获得签字的位置，以及是否有数据，有无数据通过changes来进行判断
				var field_name;
				//var break_points=[];
				var disable_index=-1;
				for(var i=0;i<fields.length;i++){
					field_name=fields[i].split('_');
					if(field_name[0]=='u'){
//						break_points.push({
//							index:i,value:row[fields[i]],changes:row.changes[fields[i]]
//						});
						if(
							!row[fields[i]] || row[fields[i]]==999999 ||
							(row[fields[i]] && row.changes && typeof(row.changes[fields[i]])!='undefined' )
						){
							//并未提供清空功能的
						}else{
							disable_index=i+1;//在此以及其之前的都不能编辑
						}
					}
				}
				//因为修改后就会变化，但是由于没有原始数据的记录，因此在客户端的检查方式为：
				//如果value有效且changes有数据，或者value无效则认为可以编辑
//				if(disable_index==-1){
//					//disable_index=fields.length;
//				}
				for(var i=0;i<disable_index;i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
					col.editor1 = col.editor;
					col.editor = null;
				}
//				for(var i=0; i<fields.length; i++){
//					var col = $(this).datagrid('getColumnOption', fields[i]);
//					col.editor1 = col.editor;
//					//修改方式，从最开始的进行处理，也就是说，查询最开始的没有数据的内容来进行处理
//					//后面的才可以编辑
//					if (fields[i] != param.field){
//						col.editor = null;
//					}
//				}
				$(this).datagrid('beginEdit', param.index);
//				var ed = $(this).datagrid('getEditor', param);
//				if (ed){
//					if ($(ed.target).hasClass('textbox-f')){
//						$(ed.target).textbox('textbox').focus();
//					} else {
//						$(ed.target).focus();
//					}
//				}
				for(var i=0; i<fields.length; i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
					if(col.editor1){
						col.editor = col.editor1;
					}
				}
			});
		},
		//下面是用于hijack的代码，封装了editIndex，将其修改，用click来返回是否允许修改，false是禁止。
		enableSpecialRowEditing: function(jq){
			return jq.each(function(){
				var dg = $(this);
				var opts = dg.datagrid('options');
				opts.oldOnClickCell = opts.onClickCell;
				opts.onClickCell = function(index, field){
					if (opts.editIndex != undefined){
						if (dg.datagrid('validateRow', opts.editIndex)){
							//允许同一行多个编辑
							if(opts.editIndex!=index){
								dg.datagrid('endEdit', opts.editIndex);
								opts.editIndex = undefined;
							}
						} else {
							return;
						}
					}
					if(!opts.oldOnClickCell.call(this, index, field)){
						return;
					}
					dg.datagrid('selectRow', index).datagrid('editSpecialRow', {
						index: index
					});
					opts.editIndex = index;
					//opts.oldOnClickCell.call(this, index, field);
				}
			});
		}
	});
我又想了下，editcell自己本身是会将默认的editor全部替换为editor1，用这样的方式来调用原本的beginedit来处理的，你看是不是你的代码调用了editcell后，在没有endedit前原来配置的editor全部都丢失了的缘故
心之所向0 2017-02-14
  • 打赏
  • 举报
 回复
引用 18 楼 apollokk 的回复:
事件不要写在onSelect里面，写在onHidePanel里面，或者用setTimeout延时，这样就不会出现找不到的情况
改在onHidePanel里后，行编辑的关闭再开启不报错了，但有新的问题，隐藏面板后需要定义全局变量来获得选择的值，下拉框同样需要再次调用，选择另一行时还是需要关闭再开启的方法，所以是治标不治本
Hello World, 2017-02-13
  • 打赏
  • 举报
 回复
引用 15 楼 qq_26286987 的回复:
[quote=引用 14 楼 apollokk 的回复:] 你那启用的代码一执行后下拉框就消失了，再去访问当然是出错了。 可以在编辑时启用整行的编辑功能，但把某些关联的字段给禁止编辑（只读），等条件符合后再修改为可写
这个之前实现过，禁用后面的，不过我觉得样式不好看，就想实现表格的启用方式[/quote] onSelect得到值后不能马上去操作那个下拉框，因为已经没有了。 启用整行编辑，等到下拉框重新初始化后再去设置选定值为刚才下拉框的值。 或者，你已经说不影响功能了，最粗暴的办法就是用try..cathc块包裹出错的代码，这样就没提示了
心之所向0 2017-02-13
  • 打赏
  • 举报
 回复
引用 14 楼 apollokk 的回复:
你那启用的代码一执行后下拉框就消失了，再去访问当然是出错了。 可以在编辑时启用整行的编辑功能，但把某些关联的字段给禁止编辑（只读），等条件符合后再修改为可写
这个之前实现过，禁用后面的，不过我觉得样式不好看，就想实现表格的启用方式
Hello World, 2017-02-13
  • 打赏
  • 举报
 回复
你那启用的代码一执行后下拉框就消失了，再去访问当然是出错了。 可以在编辑时启用整行的编辑功能，但把某些关联的字段给禁止编辑（只读），等条件符合后再修改为可写
心之所向0 2017-02-13
  • 打赏
  • 举报
 回复
引用 12 楼 apollokk 的回复:
你在onSelect事件里面去“激活”了其他单元格，又是怎样个“激活”法？“激活”后又做了啥？
启用其他单元格就是上面描述的先结束编辑再开启，这样的话设置过编辑器的都会在开启行编辑后启用，我的目的就是启用，不过启用后前面的那个下拉框报了错误，现在就是要解决这个问题，上面代码都有贴出来
Hello World, 2017-02-13
  • 打赏
  • 举报
 回复
你在onSelect事件里面去“激活”了其他单元格，又是怎样个“激活”法？“激活”后又做了啥？
Hello World, 2017-02-13
  • 打赏
  • 举报
 回复
不知道你完整的代码，没法测试。 不过你的需求应该是要求某项必填，可以在结束编辑前去验证数据就可以了。
心之所向0 2017-02-13
  • 打赏
  • 举报
 回复
引用 9 楼 apollokk 的回复:
getPosList();里面是什么？
因为我用的是先关闭再启用，报easyui的错会把下拉框的面板清空，所以调用了加载下拉框的方法
Hello World, 2017-02-13
  • 打赏
  • 举报
 回复
事件不要写在onSelect里面，写在onHidePanel里面，或者用setTimeout延时，这样就不会出现找不到的情况
心之所向0 2017-02-13
  • 打赏
  • 举报
 回复
引用 16 楼 apollokk 的回复:
[quote=引用 15 楼 qq_26286987 的回复:] [quote=引用 14 楼 apollokk 的回复:] 你那启用的代码一执行后下拉框就消失了，再去访问当然是出错了。 可以在编辑时启用整行的编辑功能，但把某些关联的字段给禁止编辑（只读），等条件符合后再修改为可写
这个之前实现过，禁用后面的，不过我觉得样式不好看，就想实现表格的启用方式[/quote] onSelect得到值后不能马上去操作那个下拉框，因为已经没有了。 启用整行编辑，等到下拉框重新初始化后再去设置选定值为刚才下拉框的值。 或者，你已经说不影响功能了，最粗暴的办法就是用try..cathc块包裹出错的代码，这样就没提示了[/quote] 实际上已经是你说的那个方法了，重新开启行编辑的时候再赋值给下拉框，报错就是因为那个禁用再启用，跟其他无关，这个我测试好几次了。我给你贴下这个方法完整的代码 

function getPosList() {
    var posName = $('#dg').datagrid('getEditor', {index: editIndex, field: 'posName'});
    if (!posName) {
        return;
    }
    posName = posName.target;
    var dicname = $(posName).combobox("getValue");
    $(posName).combobox({
        valueField: 'posname',
        textField: 'posname',
        disabled: false,
        panelHeight: 'auto',
        onShowPanel: function () {
            var lList = [];
            for (var i = 0; i < 30; i++) {
                if (i != editIndex && $('#dg').datagrid('getRows')[i]['posId']) {
                    lList.push($('#dg').datagrid('getRows')[i]['posId']);
                }
            }
            $.ajax({
                url: formUrl + '/tposComInfoAdjust/getPosList.do?lList=' + lList + '&instId=' + instId + '&zposId=' + zposId,
                success: function (data) {
                    $(posName).combobox('loadData', data);
                }
            });
        },
        onSelect: function (data) {
            $('#dg').datagrid('endEdit', editIndex);
            $('#dg').datagrid('beginEdit', editIndex);
            $('#dg').datagrid('getRows')[editIndex]['posId'] = data.id;
            findDgTD('signcode', editIndex).text((data.signcode && data.signcode != 1 ) ? data.signcode : "");
            writeDgTextbox('posMobile', data.posMobile);
            writeDgTextbox('posShort', data.posShort);
            writeDgTextbox('posPhone', data.posPhone);
            writeDgTextbox('fax', data.fax);
            writeDgTextbox('posMail', data.posMail);
            writeDgTextbox('posQq', data.posQq);
            getPosList();
        }
    });
    if (dicname) {
        $(posName).combobox("setValue", dicname);
    }
}
Hello World, 2017-02-11
  • 打赏
  • 举报
 回复
getPosList();里面是什么？
心之所向0 2017-02-10
  • 打赏
  • 举报
 回复
引用 5 楼 redlz2500 的回复:
首先功能都用editcell扩展，而不用datagrid自带的beginedit以及endedit 其次，editcell方法中会调用endedit方法将原来的edited cell给关闭掉，需要自己修改下代码 这块很简单的，如果editindex相同，则屏蔽endedit方法即可，或者按照你自己的需求来进行其他的逻辑判断。 editcell中写得很清楚了，多看下它的代码，又不长又简单
我调用的就是官网上的例子，不说新方法，关闭再开启报错的原因我不清楚，还有就是我开启单个单元格的时候正常，选择后同样的方法报错，这些都是datagrid自带的方法
心之所向0 2017-02-10
  • 打赏
  • 举报
 回复
引用 4 楼 showbo 的回复:
同一行的其他单元格也要用editCell来编辑试试，而不是用行编辑beginEdit

    function onClickRow(index) {
        if (!canEdit || !instId) {
            return;
        }
        //点击一行，关闭之前开启的行
        if (editIndex != index) {
            if (editIndex != undefined) {
                $('#dg').datagrid('endEdit', editIndex);
            }
            $('#dg').datagrid('beginEdit', index);
            editIndex = index;
            if (!$('#dg').datagrid('getRows')[editIndex]['posId']) {
                $('#dg').datagrid('endEdit', editIndex);
                $('#dg').datagrid('editCell', {index: editIndex, field: 'posName'});
            }
            getPosList();
        }
        $('#dg').datagrid('uncheckAll');
    }
开始点击行这样都可以，点击后的就报错
加载更多回复（6）
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
废话不多说了，直接给大家贴代码了。 关键代码如下所示： /// 最近一次使用编辑行 一切正常 /// ///初始化数据容器 /// function InitGrid(){ var lastIndex; $(#grid).datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblClickRow:function(rowIndex,rowData){ lastIndex=rowIndex; $(#grid
easyui datagrid动态设置行、列、单元格不允许编辑
Easyui datagrid 行编辑、列编辑、单元格编辑设置 功能： 动态对datagrid 进行行、列、单元格编辑进行设置不允许编辑。 禁用行编辑： 在编辑方法调用前，对选择的行进行判断，如果不允许编辑，就返回不调用编辑方法，如果允许编辑，则继续。 e.g: var row = $("#dg").datagrid("getSelected"); ...
easyui datagrid 表格内改变数据，改变其他单元格数据 (3)
easyui datagrid 获取数据后，编辑，其实就相当于表格的修改界面说下遇到的问题1）表格中有几个combobox ,当其中一个combobox变化的时候，触发另外一个combobox变化2）combobox的值只能初始化的时候，加载进来，因此当其中一个combobox变化的时候，触发另外一个combobox变化，第二个combobox的初始值，有问题，只能全部加载进来3）当编辑的时候遇到...
EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单，在需要编辑的列添加 editor 【编辑器】就可以了。 单行编辑 // 初始化数据列表 function initDatagrid() { $('#dg').datagrid({ loadMsg: '数据加载中请稍后……', striped: true, url: '/api/Employ
easyui datagrid实现行内编辑一列数据
这篇文章主要想介绍一下easyui 的datagrid控件实现行内编辑的功能。 我着这里主要实现的大概功能就是：可以行内编辑人员类别的功能 一、实现的效果如下：             图1： 当我们点击【设置】的时候可以编辑人员类别,如图2 所示         图2： 从图2可以看出，我们可以人员类别下拉框中的选中我们希望设置的类别，然后保存到数据库 也可以点击取
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章