datagrid行编辑如何实现级联?
2014-10-04 21:02
120 查看
还是级联的问题,不过这一次,是在datagrid里,那么难度上肯定比form中的级联要高。
但是只要熟练掌握了datagrid的API,问题还是很容易就可以解决的。
关键点在于——editor,关于datagrid实现编辑功能全要靠它。
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了
之后可以通过editor.target来得到easyUI的组件,如combobox之类。然后再调用combobox.combobox('disable')就可以将那一列设置为不可编辑了。
之前我们form表单级联举的省市级联的例子也可以用类似的思路来做,这里就不赘述了。
做到这一步就结束了吗?那么我们只处理了选中事件中的级联控制,那么若是保存之后再编辑呢?此时值已经存在于row中了,并不会触发onSelect事件,那么如何完善这些步骤呢?
其中“编辑开始”包括append方法和onRowClick方法
其次,每次主combobox的onSelect事件时都要检查选中的是否为拒绝,若是,则将级联项设置为可编辑,否则不可编辑
这样就完成datagrid行编辑的级联。
我之前就是不知道有editor的API,然后就自己手动去获取元素做级联,
类似于这样的语句:$("[field='isout']", $(".datagrid-body")).nextAll().find('.textbox input:first').attr("disabled", "disabled");
实在是麻烦且容易出错
但是只要熟练掌握了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");
实在是麻烦且容易出错
相关文章推荐
- 下拉列表框只能选择,我想选择后还可以允许用户对选择的内容进行修改,如何实现可编辑的下拉列表框?
- 如何用java实现在网页中保存html编辑器 编辑好的 html 文件?!(如blog里发文章的时候把要发表的内容以html文件的形式保存到服务器上?)
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- 如何在SQL Server 2005中建立主外键关系?如何实现级联删除效果?
- 如何在SQL Server 2005中建立主外键关系?如何实现级联删除效果?
- 如何实现双击GridView 单元格编辑单元格内容
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- 如何利用GridView与UpdatePanel组合实现无刷新:新增、编辑、删除、分页效果?
- [android]How to implement an not editable scrollable EditText?(如何实现一个不可编辑的带滚动条的EditText?) .
- 如何实现TextBox与DropDownList的级联
- 如何简单实现office文档的打开、编辑和上传?
- 在ASP.NET 2.0 下如何实现DataList的编辑功能
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- 关于图形编辑软件undo与redo的编程实现(用c++builder或delphi如何编程 ??)
- 请教方法和例子:VS2003的datagrid控件,如何实现用鼠标拖动的方法选中任意区域的多个单元格,然后进行统一编辑??
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- 如何在DataGrid控件中实现编辑、删除、分类以及分页操作
- android 如何实现EditText从不可编辑状态变成可变成可编辑状态
- 如何通过设计数据库实现外键的级联删除???答: