(FAQ)如何在WEB列表界面将布尔值显示为checkbox
942次浏览
编辑于2015年03月02日 00:00:00
【问题】: (FAQ)如何在WEB列表界面将布尔值显示为checkbox
版本: 7.0.1
模块: WEB框架及设计器
【答复】:
目前布尔值在列表界面默认显示true或false,如果想显示成其他格式需要自己写代码 解决方法。 步骤 1 打开TestListUI.webui,在大纲中选中是否产品化这一列,在属性窗口中找到"杂项"-->"clientFormatter"在其"value"下定义事件grid_tip_renderer 步骤 2 在工作空间下,自己的项目目录中以下目录webwebRoot esource定义自己的js文件,此名为 test.js,在test.js中写grid_tip_renderer方法: 如果需要列表界面显示“是”或“否”则只需要grid_tip_renderer方法和方法中注释掉的那一句未注释的部分是为了在列的单元格中显示一个checkBOX,勾选上表示true,未勾选上表示false <script> function grid_tip_renderer(v) { //return v == 'true' ? '是' : '否'; if(v == 'true') return '<input type="checkbox" checked="checked" onclick="keep(this)"/>'; else return '<input type="checkbox" onclick="keep(this)"/>'; } function keep(chk){ chk.checked = !chk.checked; } 步骤 3 定义好该js文件后就需要在TestListUI.webui中引入该js文件。打开TestListUI.webui,并在大纲中选中UI,在属性窗口中找到“包含的脚本”,点击该项右边按钮,添加一项/resource/test.js 步骤 4 发布元数据。由于目前设计器还做不到将checkBox放在列单元格中,所以此处需要手动修改代码。在生成的testListUI.xhtml中找到对应id为"isProduct"对应的列,修改成如下所示即可: <w: outputColumn id="isProductColumn" header="#{extraMsgs['isProductColumn.header']}" width="100" clientFormatter="grid_tip_renderer" value="#{data['isProduct']}" align="center"> <w:checkBox></w:checkBox> </w: outputColumn>
版本: 7.0.1
模块: WEB框架及设计器
【答复】:
目前布尔值在列表界面默认显示true或false,如果想显示成其他格式需要自己写代码 解决方法。 步骤 1 打开TestListUI.webui,在大纲中选中是否产品化这一列,在属性窗口中找到"杂项"-->"clientFormatter"在其"value"下定义事件grid_tip_renderer 步骤 2 在工作空间下,自己的项目目录中以下目录webwebRoot esource定义自己的js文件,此名为 test.js,在test.js中写grid_tip_renderer方法: 如果需要列表界面显示“是”或“否”则只需要grid_tip_renderer方法和方法中注释掉的那一句未注释的部分是为了在列的单元格中显示一个checkBOX,勾选上表示true,未勾选上表示false <script> function grid_tip_renderer(v) { //return v == 'true' ? '是' : '否'; if(v == 'true') return '<input type="checkbox" checked="checked" onclick="keep(this)"/>'; else return '<input type="checkbox" onclick="keep(this)"/>'; } function keep(chk){ chk.checked = !chk.checked; } 步骤 3 定义好该js文件后就需要在TestListUI.webui中引入该js文件。打开TestListUI.webui,并在大纲中选中UI,在属性窗口中找到“包含的脚本”,点击该项右边按钮,添加一项/resource/test.js 步骤 4 发布元数据。由于目前设计器还做不到将checkBox放在列单元格中,所以此处需要手动修改代码。在生成的testListUI.xhtml中找到对应id为"isProduct"对应的列,修改成如下所示即可: <w: outputColumn id="isProductColumn" header="#{extraMsgs['isProductColumn.header']}" width="100" clientFormatter="grid_tip_renderer" value="#{data['isProduct']}" align="center"> <w:checkBox></w:checkBox> </w: outputColumn>
推荐阅读