datagrid行编辑如何实现级联？

待我称王封你为后i 2022-08-13 00:38 187阅读 0赞

还是级联的问题，不过这一次，是在datagrid里，那么难度上肯定比form中的级联要高。

但是只要熟练掌握了datagrid的API，问题还是很容易就可以解决的。

关键点在于——editor，关于datagrid实现编辑功能全要靠它。

## 先实现行编辑 ##

比如在datagrid中要实现某一列可编辑，那么需要在那一列的column中配置editor属性

editor的配置可以只指定type，也就是编辑框的类型，可以是combobox，datebox等easyUI配备的一些类型

若对这些编辑框有额外的属性，需要在editor中再配置一个options的json，比如options:\{data:\[\{1:'a'\},\{2:'b'\}\]\}等

实现了行编辑，下面才能基于行编辑实现级联。

## 实现航编辑级联 ##

这里我们先来说一个具体的需求吧，比如编辑行中有一个接受和拒绝的下拉框，选了拒绝之后需要填写拒绝理由，也就是说若选择接受，拒绝理由那一列是不可编辑的。

怎么做呢？思路还是和form中的级联一样，也就是在选中的(onSelect)事件中来控制，这个倒简单，关键是如何来得到拒绝理由那一列并将其设置成不可编辑的？

还记得前面讲的editor吗？我们配置的editor是可以通过行索引（index）+ 字段名（field）来得到的，试试吧

比如拒绝理由那一栏的field是reason，那么我们根据编辑行索引editIndex和field就可以得到改单元格的editor了

var editor = $('#dg').datagrid('getEditor', {index:editIndex, field:'reason'})

之后可以通过editor.target来得到easyUI的组件，如combobox之类。然后再调用combobox.combobox('disable')就可以将那一列设置为不可编辑了。

之前我们form表单级联举的省市级联的例子也可以用类似的思路来做，这里就不赘述了。

做到这一步就结束了吗？那么我们只处理了选中事件中的级联控制，那么若是保存之后再编辑呢？此时值已经存在于row中了，并不会触发onSelect事件，那么如何完善这些步骤呢？

## 需要完善的步骤 ##

首先，每次“编辑开始”的时候都要检查主combobox中的值是否为拒绝，若是，则将级联项设置为可编辑，否则不可编辑

其中“编辑开始”包括append方法和onRowClick方法

其次，每次主combobox的onSelect事件时都要检查选中的是否为拒绝，若是，则将级联项设置为可编辑，否则不可编辑

这样就完成datagrid行编辑的级联。

## 题外话 ##

其实若是不熟悉datagrid的API的话，想实现级联那是太麻烦了。

我之前就是不知道有editor的API，然后就自己手动去获取元素做级联，

类似于这样的语句：$("\[field='isout'\]", $(".datagrid-body")).nextAll().find('.textbox input:first').attr("disabled", "disabled");

实在是麻烦且容易出错

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 EASYUI DataGrid 获取正在编辑的行index

EASYUI 官方没提供直接获取正在编辑行的index，但是我们可以通过正在编辑行来获取他的行号正处于编辑的有一个class属性为 datagrid-row-editing

分手后的思念是犯贱/ 2023年10月05日 12:09/ 0 赞/ 9 阅读

相关 subGrid实现内外datagrid都可编辑功能

前一篇文章介绍了如何创建一个拥有subGrid的datagrid，不过仅仅是展示数据，并未涉及到编辑那么，若是需要subGrid实现可编辑功能该怎么做呢？要解决这个问题

刺骨的言语ヽ痛彻心扉/ 2022年08月13日 00:41/ 0 赞/ 181 阅读

相关 datagrid行编辑如何实现级联？

还是级联的问题，不过这一次，是在datagrid里，那么难度上肯定比form中的级联要高。但是只要熟练掌握了datagrid的API，问题还是很容易就可以解决的。关键点

待我称王封你为后i/ 2022年08月13日 00:38/ 0 赞/ 188 阅读

相关 easyUI的combobox实现级联

先简单介绍下combobox： easyUI重写了select，取而代之的是combobox，有如下几种方式可以创建一个combobox 1、使用select标签，并加上c

本是古典何须时尚/ 2022年08月12日 00:11/ 0 赞/ 206 阅读

相关 AJAX实现级联列表，入门级实现方式

直接贴代码吧，前台代码用js语言实现 <script type="text/javascript"> var xmlHttp; functio

我不是女神ヾ/ 2022年08月08日 19:56/ 0 赞/ 238 阅读

相关 hibernate的注解方式如何实现级联删除

我们都知道hibernate是面向对象的持久化技术。说到删除肯定是这个方法了 `session.delete(Obj);` 但是注解是怎么配置才能实现删除呢？本人在学习

柔光的暖阳◎/ 2022年08月08日 19:37/ 0 赞/ 209 阅读

相关块级元素、行级（内联）元素、内联块元素的区别

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(paddin

阳光穿透心脏的1/2处/ 2022年05月30日 08:16/ 0 赞/ 272 阅读

相关 voinc+vue实现级联选择

需求： vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title>

川长思鸟来/ 2022年05月21日 01:52/ 0 赞/ 231 阅读

相关 Ext.js datagrid编辑

使用grid的编辑功能的时候，一般都需要保存修改后的信息，这时只需要在store中添加update事件，将修改的数据保存到后台！代码： //在grid中修改的信息在

不念不忘少年蓝@/ 2022年04月25日 09:24/ 0 赞/ 187 阅读

相关 Ajax实现级联

级联代码： //一级下拉框 var categoryLevel1 = $("categoryLevel1"); //拿到一级下拉框元素

秒速五厘米/ 2022年03月26日 02:40/ 0 赞/ 305 阅读