[Grid] ???

2014-03-11 14:05:45by ???

Grid编辑器

大部分情况下我们需要对数据进行编辑,APL的Grid组件可以集成编辑器,只需要在列中配置editor.

普通编辑器

这里我们可以看到Grid中增加了一个editors子标签,在editors标签下定义了几个编辑器.我们可以把ediotrs理解为grid下的一个组件库. 每一个编辑器需要指定一个唯一的id,然后在列上配置editor指定你所需要的编辑器id.这样当你点击grid的某一个单元格的时候,grid 首先回去找列中对应的editor值,然后再去组件中根据id来查找,最后显示到指定的单元格上.

                
<a:grid id="grid" bindTarget="sys_service_result_ds" height="500" navBar="true" style="margin-left:10px;margin-top:10px;" width="1200">
	<a:columns>
		<a:column name="service_name"  editor="sys_service_result_grid_tf" prompt="页面名" width="250"/>
		<a:column name="is_access_checked" editor="sys_service_result_grid_ckb" prompt="是否权限控制" width="100"/>
		<a:column name="is_login_required" editor="sys_service_result_grid_ckb" prompt="是否登录" width="100"/>
		<a:column name="is_system_access" editor="sys_service_result_grid_ckb" prompt="是否系统页面" width="100"/>
	</a:columns>
	<a:editors>
		<a:textField id="sys_service_result_grid_tf"/>
		<a:checkBox id="sys_service_result_grid_ckb"/>
		<a:comboBox id="sys_service_result_grid_cbx"/>
	</a:editors>
</a:grid>
      

动态编辑器

特殊情况下我们需要根据表格当前行的数据来动态设置某个单元格的编辑属性,例如是否编辑,例如动态改变编辑器类型等。

这个时候我们通常通过列上的editorFunction属性来实现。通过制定一个自定义函数来实现动态判断。

下面的例子中,我们通过自定义函数titleEditFunction来实现如下功能:当“启用标志” 是 “启用” 时,页面标题可以编辑。

                
<a:grid id="grid" bindTarget="sys_service_result_ds" height="500" navBar="true" style="margin-left:10px;margin-top:10px;" width="1200">
	<a:columns>
		<a:column name="service_name"  editor="sys_service_result_grid_tf" prompt="页面名" width="250"/>
		<a:column name="editor_flag" editor="sys_service_result_grid_cbx" prompt="启用标志" width="250"/>
		<a:column name="title" editorFunction="titleEditFunction"  prompt="页面标题" width="250"/>
	</a:columns>
	<a:editors>
		<a:textField id="sys_service_result_grid_tf"/>
		<a:checkBox id="sys_service_result_grid_ckb"/>
		<a:comboBox id="sys_service_result_grid_cbx"/>
	</a:editors>
</a:grid>
      
                
 function titleEditFunction(record,name){
	if (record.get('flag') == '1'){
		return 'sys_service_result_grid_tf';
	}else{
		return '';
	}
}
      

titleEditFunction函数中通过获取flag的值来动态设置title字段的编辑器,返回空代表不可编辑,返回id表示动态选择编辑器

Demo
  1. ?????
Attachments
  1. grid_editor.rar

Comments

1 Responses to the article
  1. [email protected] 留言于:2017年06月05日 15:12
    好东西。
发表评论