datagrid行编辑如何实现级联？

2024-07-25 14:48:50 220人阅读

还是级联的问题，不过这一次，是在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");