HAP框架学习之——LOV使用

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

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

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

HAP框架学习之——LOV使用_第1张图片

2、创建LOV

HAP框架学习之——LOV使用_第2张图片

新建属性解释:

  • 代码:该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 

    
        stu_id like concat("%",#{stuId},"%")
    

3、预览结果为:

HAP框架学习之——LOV使用_第3张图片          HAP框架学习之——LOV使用_第4张图片

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

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

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


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

你可能感兴趣的:(HAP框架学习)