HAP框架学习之——LOV使用

LOV的作用：通过自定义SQL语句或者调用mapper中的方法查询数据库，通过弹出窗口的形式提供数据选择的组件。

例子：查询学生表，通过输入学生学号模糊查询学生信息。

1、数据库中创建学生表并插入原始数据。

2、创建LOV

新建属性解释：

• 代码：该LOV的唯一标识，在viewModel中调用的值。
• ValueField：选中的查询记录代表的值。
• TextField：选中的查询记录显示的值，与ValueField配对，如性别显示的值（TextField）为：男、女，但实际用0代表男，用1代表女，这里的0，1就对应ValueFiled。在本例中则代表：显示的是姓名，但该姓名关联的是学号。
• SQL类型：
  • 1、自定义SQL：该SQL类型需要自己在自定义SQL文本域中按照mybatis的语句格式定义SQL语句。
  • 2、SQL ID：选中该SQL类型，在SQL ID文本框中输入mapper中对应的查询方法，格式为：StudentMapper.findStuByID，在StudentMapper,java类中需要定义该方法。
  • 3、URL：对应一个可以查询出数据的URL，例如Controller中的某个URL路径。
• 高度/宽度：LOV弹出框的高度和宽度。
• 列数：Lov弹出窗口中，查询字段输入框布局的列数。值域为[0,4]。
• 描述/标题/提示：分别对应LOV的描述（在LOV管理页面中显示）、LOV弹出窗口标题、LOV输入框的提示（placeholder）
• 页大小：每页显示的记录数。
• 行信息：
  • 显示：列名
  • 字段名：对应SQL语句中返回的类型。
  • 表格列：是否在搜索出来的记录中显示。
  • 查询字段：是否作为查询字段，如果是，则会出现对应的搜索框。

自定义查询语句为【符合Mybatis的语句规范】：

select stu_id,stu_name,stu_age from hmall_hnuc_student 
<where>
    <if test="stuId != null">
        stu_id like concat("%",#{stuId},"%")
    </if>
</where>

3、预览结果为：

          

        搜索框的出现是勾选了学号作为查询字段的结果，而下面表格显示的列名对应新建LOV时的行信息。显示的值是新建LOV时行信息的字段名命名为SQL语句查询字段的驼峰命名对应的结果。也就是stu_id对应stuId，stu_name对应stuName，stu_age对应stuAge。

4、双击选择学生记录后搜索框会消失，在文本框中显示TextField对应的值，即上图创建LOV时的stuName：

5、最后在html中用kendoUI调用过程如下：

<input data-bind="value:model.stuName"
                   id="searchStu"
                   style="width: 100%">
<script>
    $("#searchStu").kendoLov(<@lov "LOV_SEARCHSTUDENTBYID" />);
</script>

到此基本LOV的使用就完成了。