您的位置:首页 > 其它

datagrid行编辑如何实现级联?

2014-10-04 21:02 120 查看
还是级联的问题,不过这一次,是在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");

实在是麻烦且容易出错
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐