HAP框架学习之—— LOV级联

2024-04-21 12:32
文章标签 学习 框架 级联 hap lov

本文主要是介绍HAP框架学习之—— LOV级联,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这几天接触比较多的就是LOV,最开始是写一个简单的LOV用来查询,慢慢地涉及到LOV之间,以及LOV与其他控件之间的联动。

今天总结一下两种LOV联动的用法:

1、LOV之间的联动:

例子:省市联动。(真的是为了联动而联动,将就一下吧,知道基本上就是这么用就行)

需求:创建一个搜索省份的LOV命名为LOV_PROVINCE,创建一个搜索城市的LOV命名为LOV_CITY,LOV_CITY中需要将LOV_PROVINCE中选中的值作为查询条件。

数据库表t_d_area:

CREATE TABLE t_d_areainfo (id int(11) NOT NULL,name varchar(48) NOT NULL DEFAULT '' COMMENT '名称',arealevel tinyint(2) NOT NULL DEFAULT '0' COMMENT '层级标识: 1  省份, 2  市, 3  区县',parent_id int(11) DEFAULT NULL COMMENT '父节点',PRIMARY KEY (`id`)
) 

创建查询省份的LOV_PROVINCE

自定义SQL语句:

select id pro_id, name pro_name from t_d_areainfo 
<where><if test="1==1">arealevel = 1</if><if test="proName!=null">and name LIKE concat( concat("%",#{proName}),"%")</if>
</where>

创建查询城市LOV_CITY

自定义SQL语句:

select id city_id,name city_name from t_d_areainfo
<where><if test="1==1">parent_id = #{parentId}</if><if test="cityName != null">AND name LIKE concat("%",#{cityName},"%")</if>
</where>

在html文件中的使用:

在表格中作为列使用:

{field: "proId",title: '省份',width: 120,template: function (dataItem) {return dataItem['proName'] || ''; /* 数据列默认显示值 */},editor: function (container, options) {$('<input name="'+ options.field +'" />').appendTo(container).kendoLov($.extend(<@lov "LOV_PROVINCE" />, {query: function (e) {// 查询时的操作},select: function (e) {// 将选择的省份id存入model,在城市那一列进行查询时会使用到options.model.set('proId', e.item.proId);options.model.set('cityId', "");options.model.set('cityName', "");},textField: 'proName', /* 编辑器显示的值 */model: options.model}));}},{field: "cityId",title: '城市',width: 120,template: function (dataItem) {return dataItem['cityName'] || ''; /* 数据列默认显示值 */},editor: function (container, options) {$('<input name="'+ options.field +'" />').appendTo(container).kendoLov($.extend(<@lov "LOV_CITY" />, {query: function (e) {// 将选择省份设置的proId取出来,作为查询的参数e.param['parentId'] = options.model.get("proId");//options.model.set('userId',null);//options.model.set('userName', null);},select: function (e) {// 将选择后的属性更新到数据模型中以保存options.model.set('cityId', e.item.cityId);},textField: 'cityName', /* 编辑器显示的值 */model: options.model}));}}],

在表单中的使用,使用input标签:

<!--省份LOV搜索-->
<input placeholder='省份' id="provinceId" style="width: 100%">
<script>$("#provinceId").kendoLov(<@lov "LOV_PROVINCE" />);
</script>
<!--城市LOV搜索-->
<input placeholder='城市' id="cityId" style="width: 100%">
<script>$("#cityId").kendoLov($.extend(<@lov "LOV_CITY" />,{query: function (e) {// 在查询时将省份的值取出来作为城市查询的参数var proId= $("#provinceId").data("kendoLov").value();e.param['proId'] = proId;}}));
</script>

 显示结果:选择湖南省之后联动湖南省的城市

完成啦!!!!!!

 

2、其他组件(下拉框,文本框...)与LOV之间的级联

需求:通过下拉框选择学院,LOV查询选中学院的学生信息。

数据库表结构以及初始数据:

创建根据选择的院系查询学生的LOV(LOV_SEARCHSTUDENTBYDEPT):

自定义SQL语句:

select stu_id,stu_name,dept from hmall_hnuc_student 
<where><if test="dept != null">dept = #{dept}</if>
</where>

准备工作完毕!!!

在html中的使用如下:

  • 学院下拉框的定义如下:
<input id="dept" style="width: 100%"><script>$("#dept").kendoComboBox({filter: "contains",dataTextField: "text",dataValueField: "value",valuePrimitive: true,dataSource: [{text:"会计学院",value:"会计学院"}, {text:"计信学院",value:"计信学院"}],}).data("kendoComboBox");</script>

  显示效果如下:

  • 根据学院查询学生信息定义如下:
<input id="stuinfo" style="width: 100%">
<script>$("#stuinfo").kendoLov($.extend(<@lov "LOV_SEARCHSTUDENTBYDEPT" />,{// 打开LOV时执行的查询方法query: function (e) {// 根据学院下拉框取得选中的值var dept = $("#dept").data("kendoComboBox").value();// 设置查询SQL中的dept学院参数e.param['dept'] = dept;}}));
</script>

显示效果,以及没有选择学院之前的查询结果如下:

       

联动效果:选择了计信学院、以及根据选择的计信学院搜索出的学生信息:

                  

完成啦!!!

注意的问题:

选取kendoui控件的值时,直接使用$("#id").val()方法在很多时候是取不到值的,使用如下方法:

<input id="box" style="width: 100%">
<script>$("#box").kendoComboBox({......})// 先取得控件 data(控件类型:kendoComboBox、kendoDropdownList、kendoLov)var box = $("#id").data("kendoComboBox");// 在取得空间中的值var value = box.value();
</script>

 

 

这篇关于HAP框架学习之—— LOV级联的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/923082

相关文章

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Python GUI框架中的PyQt详解

《PythonGUI框架中的PyQt详解》PyQt是Python语言中最强大且广泛应用的GUI框架之一,基于Qt库的Python绑定实现,本文将深入解析PyQt的核心模块,并通过代码示例展示其应用场... 目录一、PyQt核心模块概览二、核心模块详解与示例1. QtCore - 核心基础模块2. QtWid

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依