datagrid行编辑如何实现级联?

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

实在是麻烦且容易出错


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值