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>