3. 开发页面

在本例中,我们将完成对学生信息表的查询和修改功能。

3.1 创建页面

点击左测菜单上面添加页面按钮,然后右键编辑菜单节点,输入 学生信息管理

【图一】

创建完毕之后,页面开发区包含了最基本的操作流程图,各图元释义见图内说明。

【图二】

3.2 使用查询组件(enhancer-jqgrid) 完成查询功能

使用 enhancer-jqgrid 组件可以直接以书写 SQL 的方式完成对学生信息表的查询功能。首先右键【窗口】图元选择【组件配置】。然后选中 enhancer-jqgrid【添加组件】。

【图三】

点击下面的【添加】按钮,进入到组件配置界面。 我们把下面调试好的学生信息查询的 SQL 写入组件配置并绑定。

SELECT
  id,
  student_no,
  name,
  gender,
  CASE gender
    WHEN 'M' THEN '男' WHEN 'F' THEN '女'
    END gender_name,
  DATE_FORMAT(birthday, '%Y-%m-%d') birthday,
  province_code,
  p.province,
  address
FROM student s, province p 
WHERE s.province_code = p.code

然后对表格中相关的列做设置,同时开关查询组件的相关功能(排序、分页、查询器等等)。 特别的,为了实现对选中行编辑的效果,我们添加一个名为【编辑的行操作按钮】

【图四】

设置完毕之后点击最下面的【保存】按钮,然后点击左下角【返回流程图】。

【图五】

点击预览页面按钮,可以查看页面运行起来的样子。

【图六】

此时,我们可以打开顶部工具栏的控制台,观察执行的数据源参数以及返回结果,这是一个非常常用的功能,可以用来快速排查错误。

【图七】

默认情况下,窗口的位置位于左上角,大小为 600x400。为了调整窗口大小和位置,我们需要对页面进行布局。

3.3 页面布局

返回流程图,双击【帧】进入页面布局界面,可以对本帧下挂载的所有窗口进行布局。

【图八】

我们将刚刚配置完成的查询窗口修改为学生信息表,同时设置宽为 80% 高为 480,点击底部【保存】按钮之后,再点击【预览】按钮,可以预览布局之后的效果。

【图九】

results matching ""

    No results matching ""