下拉框直接实现联动

2021-06-10 16:55:42

说明

页面代码

数据模型

Ajax联动

后台action

结语

说明

我们通过给两个下拉列表赋值案例来说明，下拉框1值通过属性值绑定AvailableCategories直接从后台获取，下拉框2值SensorList实现与下拉框1值变化而联动。

页面代码

下拉框1:

@Html.DropDownListFor(model => model.Cid, Model.AvailableCategories, new { @class = "form-control" })

下拉框2:

@Html.DropDownListFor(model => model.Sensor, Model.SensorList, new { @class = "form-control" })

数据模型

///

/// 下拉框1

///

public IList AvailableCategories { get; set; }

///

/// 下拉框1值

///

[NopResourceDisplayName("Search.Category")]

public int Cid { get; set; }

///

/// 下拉框2

///

public List SensorList { get; set; }

///

/// 下拉框2值

///

[AllowHtml]

public string Sensor { get; set; }

Ajax联动

$(function () {

$('#Cid').change(function () {

var data = "cid=" + $(this).val();

var disoptioan = {

url: "@Url.Action("GetCamaraSensors", "Catalog")",

type: 'Get',

dataType: 'json',

data: data,

context: this,

success: function (result) {

$("#Sensor").empty();

for (var i = 0; i < result.length; i++) {

var text = result[i].Text;

var value = result[i].Value;

$("#Sensor").append(new Option(text, value));

}

}

};

$.ajax(disoptioan);

});

});

后台action

public ActionResult GetCamaraSensors(int cid)

{

IList sensorsList = new List();

sensorsList.Add(new SelectListItem { Text = _localizationService.GetResource("common.selected"), Value = "0" });

List productCategories = _categoryService.GetProductCategoriesByCategoryId(cid, 0, int.MaxValue).ToList();

productCategories.ForEach(p =>

{

sensorsList.Add(new SelectListItem { Text = p.Product.Name, Value = p.ProductId.ToString() });

});

return Json(sensorsList, JsonRequestBehavior.AllowGet);

}

结语

1、AvailableCategories中SelectListItem是一个有text和mvalue特性的类，web开发平台中通过ViewModel绑定赋值给下拉框1。

2、SensorList中SelectListItem是一个有text和mvalue特性的类,通过Ajax异步从后台获取列表值后动态绑定赋值给下拉框2。

3、Ajax代码说明：下拉框1值改变后触发js change事件，通过ajax异步提交查询获取查询结果，success回调函数中赋值给下拉框2。

4、运行结果：

更多相关内容
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2020-10-18 19:08:24

下面小编就为大家分享一篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

收起
帆软FineReport实现下拉框控件多级联动查询模板 + SQL脚本
2022-07-01 16:35:19

该资源为已完成的拉框参数联动查询模板、饼图联动饼图模板，适配FR10.0版本、可直接下载学习使用。

收起

基于vue下拉框n级联动

千次阅读 2022-04-26 13:51:28

基于vue实现下拉框的n级联动

项目中不少同仁需要下拉框的n级联动，目前为止查到的资料个人都觉得不太满意，于是自己写了个能够n级联动的下拉框，希望能帮助大家，先上效果图

在这里插入图片描述

以下是代码，可以复制直接使用，数据是自己编的，主要提供个思路给大家作为参考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
   <h1>选中的详情：{{detailMsg}}</h1>
   <div v-for="num in chooseArray.length" :key="num">
     <h1>{{num}}级分类</h1>
     <el-select v-model="objArr[num-1]" placeholder="请选择"  >
       <!-- 单纯为el-option绑定单击事件是不生效的，需要为其添加.native 修饰符 -->
      <el-option
      v-for="item in chooseArray[num-1]"
        @click.native="chooseChildrenArr(item)"
        :key="item.id"
        :value="item.name">
        {{item.name}}
      </el-option>
    </el-select>
   </div>
  </div>
  <!-- 引入vue.js文件 -->
  <script src="./vue.js"></script>
  <!-- 引入样式element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
     const app = new Vue({
       el:"#app",
       data() {
         return {
          //所有下拉框数据
          array: [
            {
              "name": "A",
              "level": 1,
              "parent_id": null,
              "id": 1,
              "children": [
                {
                  "name": "A-A",
                  "level": 2,
                  "parent_id": 1,
                  "id": 4,
                  "children": [
                    {
                      "name": "A-A-A",
                      "level": 3,
                      "parent_id": 4,
                      "id": 10,
                      "children": []
                    },
                    {
                      "name": "A-A-B",
                      "level": 3,
                      "parent_id": 4,
                      "id": 11,
                      "children": []
                    },
                  ]
                },
                {
                  "name": "A-B",
                  "level": 2,
                  "parent_id": 1,
                  "id": 5,
                  "children": []
                },
              ]
            },
            {
              "name": "B",
              "level": 1,
              "parent_id": null,
              "id": 3,
              "children": [
                {
                  "name": "B-A",
                  "level": 2,
                  "parent_id": 3,
                  "id": 8,
                  "children": []
                },
                {
                  "name": "B-B",
                  "level": 2,
                  "parent_id": 3,
                  "id": 9,
                  "children": []
                }
              ],
            },
            {
              "name": "C",
              "level": 1,
              "parent_id": null,
              "id": 99,
              "children": []
            }
          ],
          //选中的下拉框数据
          chooseArray: [],
           // el-select选中的数据
           objArr:[],
          //  选中的数据详情
          detailMsg:''
         }
       
       },
       methods: {
        chooseChildrenArr(val){
          // 每次重新点击下拉框都要清楚，后续下拉框的值，重新为其赋值
          if(val.children.length>0){  //如果选中的元素，其有子元素，那么保留下一级的下拉框
            // this.obj = {}
            this.chooseArray[val.level] = val.children
            this.chooseArray.splice(val.level+1)
            this.objArr.splice(val.level)
          }else {  //如果选中的元素，没有子元素，那么只保留切换的下拉框，清楚其以下的所有下拉框
            this.chooseArray.splice(val.level);
            this.objArr.splice(val.level)
          }
          // 每次重新选择，都将上一次detailMsh清空，防止下一次的选择干扰它
          this.detailMsg = ''
          for(let key in this.objArr){
            this.detailMsg +=(key*1+1)+'级分类:' +this.objArr[key] +' '
          }
        },
       },
       created() {
         var arr= []
         this.array.forEach(ele=>{
           if(ele.level == 1)arr.push(ele)
         })
        /* 
        初始化页面，将数据中一级分类保留放入到要便利的数组中
        其核心思路是
        [[一级下拉框数据],[二级下拉框数据],[三级下拉框]....[n级下拉框]  ]
        */ 
         this.chooseArray[this.chooseArray.length] = arr
       },
     })
   </script>
</body>
</html>

有任何疑问都欢迎指出，看到的都会及时回复

收起

展开全文

vue.js javascript 排序算法

Java 使用POI生成带联动下拉框的excel表格实例代码
2020-08-29 09:38:55

本文通过实例代码给大家分享Java 使用POI生成带联动下拉框的excel表格，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

收起

Vue+ElementUI实现下拉框的二级联动

千次阅读 2020-12-03 15:06:39

项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框...如果需要新增城市的下一级，如区和县的子节点，我们直接在市省国的这张表直接添加数据就行，因为这些都属于地名，可以共存或者说共用一张数

项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框选中的数据而变化。从而实现二级联动搜索功能。
理解业务需求：通常来说我们树型下拉框的数据库设计是在同一个表，且子节点会储存对应的多个祖节点（父节点+父节点的父节点+父节点的父节点的父节点+……+父节点^n）Id。例如：多个城市子节点归属一个省份父节点，多个省份子节点又归属一个国家父节点。这里数据库中城市祖节点就包括了省份Id和国家Id。
1.如果需要新增城市的下一级，如区和县的子节点，我们直接在市省国的这张表直接添加数据就行，因为这些都属于地名，可以共存或者说共用一张数据库表。
2.如果需要新增城市的所属其他信息，如大学的子节点，这时大学数据库设计的时候是另外一张表，它的数据库只关联一个城市Id。我们就可以用两个下拉框来实现二级联动搜索功能。
功能实例说明：当我点击一级下拉框的时候，例如：选择中国福建省福州市，二级下拉框会自动匹配只有福州市的大学选项；当我点击一级下拉框的时候，选择中国福建省厦门市，二级下拉框会自动匹配只有厦门市的大学选项。这时候再根据二级列表搜索大学详情信息就会准确、方便、且直观很多。

效果图：
在这里插入图片描述

代码实现：

核心源码

index.vue

<el-form-item label="归属地区" prop="areaId">
  <treeselect
    v-model="queryParams.areaId"
    :options="areaOptions"
    placeholder="请选择归属地区"
    size="small"
  />
</el-form-item>
<el-form-item label="大学名称" prop="universityName">
  <el-select
    v-model="queryParams.universityName"
    placeholder="请选择大学名称"
    clearable
    size="small"
    :loading="loading"
    ><el-option
      v-for="(item, index) in universityList"
      :value="item.universityName"
      :key="index"
      >{{ item.universityName }}
    </el-option>
  </el-select>
</el-form-item>

<el-table
 v-loading="loading"
  :data="UniversityInfoList"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column
    label="所属地区"
    align="center"
    prop="areaName"
    :show-overflow-tooltip="true"
  />
  <el-table-column
    label="大学编号"
    align="center"
    prop="universityNo"
    :formatter="universityNoFormat"
  />
  <el-table-column
    label="大学名称"
    align="center"
    prop="universityName"
    :formatter="universityNameFormat"
  />
  <el-table-column
    label="操作"
    align="center"
    class-name="small-padding fixed-width"
  >
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
        v-hasPermi="['university:UniversityInfo:edit']"
        >修改</el-button
      >
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
        v-hasPermi="['university:UniversityInfo:delete']"
        >删除</el-button
      >
    </template>
  </el-table-column>
</el-table>

<pagination
  v-show="total > 0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>

watch: {
    // 监听地区Id：areaId
    "queryParams.areaId": "getUniversityList",
    }

添加监听地区Id，选中一级下拉框的地区时触发getUniversityList方法，获取大学列表方法（后端实现如下）

UniversityInfo实体类

大学Id：universityId
大学编号：universityNo
大学名称：universityName
所属地区：areaId

UniversityService服务层

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo);

UniversityServiceImpl服务实现层

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
@Override
public List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo) {
    return universityInfoMapper.selectUniversityInfoList(universityInfo);
}

UniversityMapper接口

/**
 * 查询大学信息列表
 *
 * @param universityInfo 大学信息
 * @return 大学信息集合
 */
List<UniversityInfo> selectUniversityInfoList(UniversityInfo universityInfo);

UniversityMapper.xml

<select id="selectUniversityInfoList" parameterType="UniversityInfo" resultMap="UniversityInfoResult">……</select>

UniversityController控制层

/**
 * 查询大学信息列表
 */
@PreAuthorize("@ss.hasPermi('university:UniversityInfo:list')")
@GetMapping("/list")
public AjaxResult getList(UniversityInfo universityInfo){
    return AjaxResult.success(rusticateInfoService.selectUniversityInfoList(universityInfo));
}

UniversityInfo.js

import request from '@/utils/request'
// 查询大学信息列表
export function UniversityInfo(query) {
  return request({
    url: '/university/UniversityInfo/list',
    method: 'get',
    params: query
  })
}

index.vue

import {listUniversityInfo} from "@/api/UniversityInfo";
export default {
  name: "UniversityInfo",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 大学ID字典
      universityIdOptions: [],
      // 大学信息列表
      rusticateList: [],
      // 地区字典
      areaOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaId: undefined,
        universityNo: undefined,
        universityName: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules:{}
    };
  }
	watch: {
	    // 监听地区Id：areaId，选择地区后获取该地区下的所有二级大学信息
	    "queryParams.areaId": "getUniversityList",
	    }
	created() {
	    const universityId = this.$route.query && this.$route.query.universityId;
	    this.queryParams.universityId = universityId;
	    this.getList();
	    this.getTreeselect();
	    this.getUniversityList();
	  },
	methods: {
	// 大学编号字典翻译
    universityNoFormat(row, column) {
      return row.universityNo;
    },
    // 大学名称字典翻译
    universityNameFormat(row, column) {
      return row.universityName;
    },
	/** 查询大学信息列表 */
    getList() {
      this.loading = true;
      listUniversityInfo(this.queryParams).then((response) => {
        this.universityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
	/** 查询大学列表（下拉框数据：选择地区后获取该地区下的所有二级大学信息） */
	getUniversityList() {
	  listUniversityInfo(this.queryParams).then((response) => {
	    this.universityList = response.data;
	    // this.total = response.total;
	    this.loading = false;
	  });
	}
  }
}

F12，查看获取列表方法的response，this.universityList = response.data;根据请求返回的数据是rows还是data进行更改！

收起

展开全文

vue elementui

Java使用POI导出Excel实现下拉框联动功能

2022-05-26 13:37:08

能看懂的看注释，看不懂的直接复制代码用即可。引入jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.14</version&...

能看懂的看注释，看不懂的直接复制代码用即可。

引入jar包

      <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.14</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.14</version>
       </dependency>

二级联动

package ExcelPoi;

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.ss.util.CellRangeAddressList;
import org.apache.poi.util.IOUtils;
import org.apache.poi.xssf.usermodel.*;
import java.io.FileOutputStream;
import java.util.HashMap;
import java.util.Map;

public class TwoExport {
    public static void main(String[] args) {
        Cascade();
    }

    public static void Cascade() {
        // 创建一个excel
        @SuppressWarnings("resource")
        Workbook workbook = new XSSFWorkbook();

        // 创建需要用户填写的sheet
        XSSFSheet sheet = (XSSFSheet) workbook.createSheet("省市县");
        Row row0 = sheet.createRow(0);
        row0.createCell(0).setCellValue("渠道类型");
        row0.createCell(1).setCellValue("渠道来源");

        //得到第一级省名称，放在列表里
        String[] provinceArr = {"线上", "线下"};

        String[] cityJiangSu = {"招标网站", "营销自动化ACRM", "门户网络媒体", "移动社交媒体", "移动社交媒体", "搜索引擎", "平面媒体", "户外媒体", "其他"};
        String[] cityAnHui = {"行业博览会", "行业峰会/论坛/沙龙", "产业级市场活动", "大区/公路港市场活动", "本部门市场活动", "存量客户上下游", "政府关系网络", "个人关系网络", "传化生态业务", "其他"};
        //将有子区域的父区域放到一个数组中

        String[] areaFatherNameArr = {"线上", "线下"};
        Map<String, String[]> areaMap = new HashMap<String, String[]>();
        areaMap.put("线上", cityJiangSu);
        areaMap.put("线下", cityAnHui);

        //创建一个专门用来存放地区信息的隐藏sheet页
        //因此也不能在现实页之前创建，否则无法隐藏。
        Sheet hideSheet = workbook.createSheet("area");
        //这一行作用是将此sheet隐藏，功能未完成时注释此行,可以查看隐藏sheet中信息是否正确
        workbook.setSheetHidden(workbook.getSheetIndex(hideSheet), true);

        int rowId = 0;
        // 设置第一行，存省的信息
        Row provinceRow = hideSheet.createRow(rowId++);
        provinceRow.createCell(0).setCellValue("渠道");

        for (int i = 0; i < provinceArr.length; i++) {
            Cell provinceCell = provinceRow.createCell(i + 1);
            provinceCell.setCellValue(provinceArr[i]);
        }
        // 将具体的数据写入到每一行中，行开头为父级区域，后面是子区域。
        for (int i = 0; i < areaFatherNameArr.length; i++) {
            String key = areaFatherNameArr[i];
            String[] son = areaMap.get(key);
            Row row1 = hideSheet.createRow(rowId++);
            row1.createCell(0).setCellValue(key);
            for (int j = 0; j < son.length; j++) {
                Cell cell0 = row1.createCell(j + 1);
                cell0.setCellValue(son[j]);
            }

            // 添加名称管理器
            String range = getRange(1, rowId, son.length);
            Name name = workbook.createName();
            //key不可重复
            name.setNameName(key);
            String formula = "area!" + range;
            name.setRefersToFormula(formula);
        }

        XSSFDataValidationHelper dvHelper = new XSSFDataValidationHelper((XSSFSheet) sheet);
        // 省规则
        DataValidationConstraint provConstraint = dvHelper.createExplicitListConstraint(provinceArr);
        // 四个参数分别是：起始行、终止行、起始列、终止列
        CellRangeAddressList provRangeAddressList = new CellRangeAddressList(1, 20, 0, 0);
        DataValidation provinceDataValidation = dvHelper.createValidation(provConstraint, provRangeAddressList);
        //验证
        provinceDataValidation.createErrorBox("error", "请选择正确的渠道");
        provinceDataValidation.setShowErrorBox(true);
        provinceDataValidation.setSuppressDropDownArrow(true);
        sheet.addValidationData(provinceDataValidation);

        //对前20行设置有效性
        for (int i = 2; i < 20; i++) {
            setDataValidation("A", sheet, i, 2);
        }
        FileOutputStream os = null;
        try {
            os = new FileOutputStream("D:/test01.xlsx");
            workbook.write(os);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            IOUtils.closeQuietly(os);
        }
    }

    /**
     * 设置有效性
     *
     * @param offset 主影响单元格所在列，即此单元格由哪个单元格影响联动
     * @param sheet
     * @param rowNum 行数
     * @param colNum 列数
     */
    public static void setDataValidation(String offset, XSSFSheet sheet, int rowNum, int colNum) {
        XSSFDataValidationHelper dvHelper = new XSSFDataValidationHelper(sheet);
        DataValidation data_validation_list;
        data_validation_list = getDataValidationByFormula(
                "INDIRECT($" + offset + (rowNum) + ")", rowNum, colNum, dvHelper);
        sheet.addValidationData(data_validation_list);
    }

    /**
     * 加载下拉列表内容
     *
     * @param formulaString
     * @param naturalRowIndex
     * @param naturalColumnIndex
     * @param dvHelper
     * @return
     */
    private static DataValidation getDataValidationByFormula(
            String formulaString, int naturalRowIndex, int naturalColumnIndex, XSSFDataValidationHelper dvHelper) {
        // 加载下拉列表内容
        // 举例：若formulaString = "INDIRECT($A$2)" 表示规则数据会从名称管理器中获取key与单元格 A2 值相同的数据，
        //如果A2是江苏省，那么此处就是江苏省下的市信息。
        XSSFDataValidationConstraint dvConstraint = (XSSFDataValidationConstraint) dvHelper.createFormulaListConstraint(formulaString);
        // 设置数据有效性加载在哪个单元格上。
        // 四个参数分别是：起始行、终止行、起始列、终止列
        int firstRow = naturalRowIndex - 1;
        int lastRow = naturalRowIndex - 1;
        int firstCol = naturalColumnIndex - 1;
        int lastCol = naturalColumnIndex - 1;
        CellRangeAddressList regions = new CellRangeAddressList(firstRow,
                lastRow, firstCol, lastCol);
        // 数据有效性对象
        // 绑定
        XSSFDataValidation data_validation_list = (XSSFDataValidation) dvHelper.createValidation(dvConstraint, regions);
        data_validation_list.setEmptyCellAllowed(false);
        if (data_validation_list instanceof XSSFDataValidation) {
            data_validation_list.setSuppressDropDownArrow(true);
            data_validation_list.setShowErrorBox(true);
        } else {
            data_validation_list.setSuppressDropDownArrow(false);
        }
        // 设置输入信息提示信息
        data_validation_list.createPromptBox("下拉选择提示", "请使用下拉方式选择合适的值！");
        // 设置输入错误提示信息
        //data_validation_list.createErrorBox("选择错误提示", "你输入的值未在备选列表中，请下拉选择合适的值！");
        return data_validation_list;
    }

    /**
     * 计算formula
     *
     * @param offset   偏移量，如果给0，表示从A列开始，1，就是从B列
     * @param rowId    第几行
     * @param colCount 一共多少列
     * @return 如果给入参 1,1,10. 表示从B1-K1。最终返回 $B$1:$K$1
     */
    public static String getRange(int offset, int rowId, int colCount) {
        char start = (char) ('A' + offset);
        if (colCount <= 25) {
            char end = (char) (start + colCount - 1);
            return "$" + start + "$" + rowId + ":$" + end + "$" + rowId;
        } else {
            char endPrefix = 'A';
            char endSuffix = 'A';
            if ((colCount - 25) / 26 == 0 || colCount == 51) {// 26-51之间，包括边界（仅两次字母表计算）
                if ((colCount - 25) % 26 == 0) {// 边界值
                    endSuffix = (char) ('A' + 25);
                } else {
                    endSuffix = (char) ('A' + (colCount - 25) % 26 - 1);
                }
            } else {// 51以上
                if ((colCount - 25) % 26 == 0) {
                    endSuffix = (char) ('A' + 25);
                    endPrefix = (char) (endPrefix + (colCount - 25) / 26 - 1);
                } else {
                    endSuffix = (char) ('A' + (colCount - 25) % 26 - 1);
                    endPrefix = (char) (endPrefix + (colCount - 25) / 26);
                }
            }
            return "$" + start + "$" + rowId + ":$" + endPrefix + endSuffix + "$" + rowId;
        }
    }
}

三级联动

package ExcelPoi;

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.ss.util.CellRangeAddressList;
import org.apache.poi.util.IOUtils;
import org.apache.poi.xssf.usermodel.*;

import java.io.FileOutputStream;
import java.util.HashMap;
import java.util.Map;

public class ThreeExport {

    public static void main(String[] args) {
        Cascade();

    }

    public static void Cascade() {
        // 创建一个excel
        @SuppressWarnings("resource")
        Workbook book = new XSSFWorkbook();

        // 创建需要用户填写的sheet
        XSSFSheet sheetPro = (XSSFSheet) book.createSheet("省市县");
        Row row0 = sheetPro.createRow(0);
        row0.createCell(0).setCellValue("省");
        row0.createCell(1).setCellValue("市");
        row0.createCell(2).setCellValue("区");

        //得到第一级省名称，放在列表里
        String[] provinceArr = {"江苏省","安徽省"};
        //依次列出各省的市、各市的县
        String[] cityJiangSu = {"南京市","苏州市","盐城市"};
        String[] cityAnHui = {"合肥市","安庆市"};
        String[] countyNanjing = {"六合县","江宁县"};
        String[] countySuzhou = {"姑苏区","园区"};
        String[] countyYancheng = {"响水县","射阳县"};
        String[] countyLiuhe = {"瑶海区","庐阳区"};
        String[] countyAnQing = {"迎江区","大观区"};
        //将有子区域的父区域放到一个数组中
        String[] areaFatherNameArr ={"江苏省","安徽省","南京市","苏州市","盐城市","合肥市","安庆市"};
        Map<String,String[]> areaMap = new HashMap<String, String[]>();
        areaMap.put("江苏省", cityJiangSu);
        areaMap.put("安徽省",cityAnHui);
        areaMap.put("南京市",countyNanjing);
        areaMap.put("苏州市", countySuzhou);
        areaMap.put("盐城市",countyYancheng);
        areaMap.put("合肥市",countyYancheng);
        areaMap.put("合肥市", countyLiuhe);
        areaMap.put("安庆市",countyAnQing);

        //创建一个专门用来存放地区信息的隐藏sheet页
        //因此也不能在现实页之前创建，否则无法隐藏。
        Sheet hideSheet = book.createSheet("area");
        //这一行作用是将此sheet隐藏，功能未完成时注释此行,可以查看隐藏sheet中信息是否正确
        book.setSheetHidden(book.getSheetIndex(hideSheet), true);

        int rowId = 0;
        // 设置第一行，存省的信息
        Row provinceRow = hideSheet.createRow(rowId++);
        provinceRow.createCell(0).setCellValue("省列表");
        for(int i = 0; i < provinceArr.length; i ++){
            Cell provinceCell = provinceRow.createCell(i + 1);
            provinceCell.setCellValue(provinceArr[i]);
        }
        // 将具体的数据写入到每一行中，行开头为父级区域，后面是子区域。
        for(int i = 0;i < areaFatherNameArr.length;i++){
            String key = areaFatherNameArr[i];
            String[] son = areaMap.get(key);
            Row row = hideSheet.createRow(rowId++);
            row.createCell(0).setCellValue(key);
            for(int j = 0; j < son.length; j ++){
                Cell cell = row.createCell(j + 1);
                cell.setCellValue(son[j]);
            }

            // 添加名称管理器
            String range = getRange(1, rowId, son.length);
            Name name = book.createName();
            //key不可重复
            name.setNameName(key);
            String formula = "area!" + range;
            name.setRefersToFormula(formula);
        }

        XSSFDataValidationHelper dvHelper = new XSSFDataValidationHelper((XSSFSheet)sheetPro);
        // 省规则
        DataValidationConstraint provConstraint = dvHelper.createExplicitListConstraint(provinceArr);
        // 四个参数分别是：起始行、终止行、起始列、终止列
        CellRangeAddressList provRangeAddressList = new CellRangeAddressList(1, 20, 0, 0);
        DataValidation provinceDataValidation = dvHelper.createValidation(provConstraint, provRangeAddressList);
        //验证
        provinceDataValidation.createErrorBox("error", "请选择正确的省份");
        provinceDataValidation.setShowErrorBox(true);
        provinceDataValidation.setSuppressDropDownArrow(true);
        sheetPro.addValidationData(provinceDataValidation);

        //对前20行设置有效性
        for(int i = 2;i < 22;i++){
            setDataValidation("A" ,sheetPro,i,2);
            setDataValidation("B" ,sheetPro,i,3);
        }
        FileOutputStream os = null;
        try {
            os = new FileOutputStream("D:/test02.xlsx");
            book.write(os);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            IOUtils.closeQuietly(os);
        }
    }


    /**
     * 设置有效性
     * @param offset 主影响单元格所在列，即此单元格由哪个单元格影响联动
     * @param sheet
     * @param rowNum 行数
     * @param colNum 列数
     */
    public static void setDataValidation(String offset,XSSFSheet sheet, int rowNum,int colNum) {
        XSSFDataValidationHelper dvHelper = new XSSFDataValidationHelper(sheet);
        DataValidation data_validation_list;
        data_validation_list = getDataValidationByFormula(
                "INDIRECT($" + offset + (rowNum) + ")", rowNum, colNum,dvHelper);
        sheet.addValidationData(data_validation_list);
    }

    /**
     * 加载下拉列表内容
     * @param formulaString
     * @param naturalRowIndex
     * @param naturalColumnIndex
     * @param dvHelper
     * @return
     */
    private static  DataValidation getDataValidationByFormula(
            String formulaString, int naturalRowIndex, int naturalColumnIndex,XSSFDataValidationHelper dvHelper) {
        // 加载下拉列表内容
        // 举例：若formulaString = "INDIRECT($A$2)" 表示规则数据会从名称管理器中获取key与单元格 A2 值相同的数据，
        //如果A2是江苏省，那么此处就是江苏省下的市信息。
        XSSFDataValidationConstraint dvConstraint = (XSSFDataValidationConstraint) dvHelper.createFormulaListConstraint(formulaString);
        // 设置数据有效性加载在哪个单元格上。
        // 四个参数分别是：起始行、终止行、起始列、终止列
        int firstRow = naturalRowIndex -1;
        int lastRow = naturalRowIndex - 1;
        int firstCol = naturalColumnIndex - 1;
        int lastCol = naturalColumnIndex - 1;
        CellRangeAddressList regions = new CellRangeAddressList(firstRow,
                lastRow, firstCol, lastCol);
        // 数据有效性对象
        // 绑定
        XSSFDataValidation data_validation_list = (XSSFDataValidation) dvHelper.createValidation(dvConstraint, regions);
        data_validation_list.setEmptyCellAllowed(false);
        if (data_validation_list instanceof XSSFDataValidation) {
            data_validation_list.setSuppressDropDownArrow(true);
            data_validation_list.setShowErrorBox(true);
        } else {
            data_validation_list.setSuppressDropDownArrow(false);
        }
        // 设置输入信息提示信息
        data_validation_list.createPromptBox("下拉选择提示", "请使用下拉方式选择合适的值！");
        // 设置输入错误提示信息
        //data_validation_list.createErrorBox("选择错误提示", "你输入的值未在备选列表中，请下拉选择合适的值！");
        return data_validation_list;
    }

    /**
     *  计算formula
     * @param offset 偏移量，如果给0，表示从A列开始，1，就是从B列
     * @param rowId 第几行
     * @param colCount 一共多少列
     * @return 如果给入参 1,1,10. 表示从B1-K1。最终返回 $B$1:$K$1
     *
     */
    public static String getRange(int offset, int rowId, int colCount) {
        char start = (char)('A' + offset);
        if (colCount <= 25) {
            char end = (char)(start + colCount - 1);
            return "$" + start + "$" + rowId + ":$" + end + "$" + rowId;
        } else {
            char endPrefix = 'A';
            char endSuffix = 'A';
            if ((colCount - 25) / 26 == 0 || colCount == 51) {// 26-51之间，包括边界（仅两次字母表计算）
                if ((colCount - 25) % 26 == 0) {// 边界值
                    endSuffix = (char)('A' + 25);
                } else {
                    endSuffix = (char)('A' + (colCount - 25) % 26 - 1);
                }
            } else {// 51以上
                if ((colCount - 25) % 26 == 0) {
                    endSuffix = (char)('A' + 25);
                    endPrefix = (char)(endPrefix + (colCount - 25) / 26 - 1);
                } else {
                    endSuffix = (char)('A' + (colCount - 25) % 26 - 1);
                    endPrefix = (char)(endPrefix + (colCount - 25) / 26);
                }
            }
            return "$" + start + "$" + rowId + ":$" + endPrefix + endSuffix + "$" + rowId;
        }
    }

}

收起

展开全文

java POI

antd下拉框联动使用步骤详解
2020-12-21 04:28:45

这次给大家带来antd下拉框联动使用步骤详解，antd下拉框联动使用的注意事项有哪些，下面就是实战案例，一起来看一下。先说一下效果要求，上面一个下拉框，下面一个，要求上面选中的时候，下面的内容要跟着变。因为...

收起
Yii2实现上下联动下拉框功能的方法
2020-12-19 05:17:56

本文实例讲述了Yii2实现上下联动下拉框功能的方法。分享给大家供大家参考，具体如下：首先我先解释下什么是上下联动的下拉框 假如一个view里面有两个select，第一个是公司名，第二个是分公司名。公司有多个，每个...

收起
layui select下拉框联动
2021-04-09 11:37:17

背景：涉及到省市县获取的项目必有下拉框三级联动，每次都需要百度查询，或者去翻原来的项目，着实不方便。因此，为了自己对三级联动的印象加深，同时也帮助第一次接触下拉框三级联动的小伙伴快速上道，总结一下该...

收起

layui
下拉框与下拉框之间的联动效果
2019-10-04 04:30:46

1 2 <html> 3 <head> 4 <meta charset="utf-8">...下拉框与下拉框之间的联动效果</title> 6 <script language="JavaScript"> 7 function setSel(obj){...

收起
基于selectBox实现多级联动的模拟下拉框–SelectBoxMulti
2021-04-25 00:48:40

当时也只是支持一个单独的select，但是平时，我们经常使用到的一个功能，就是需要多个select的联动效果，正好工作中也需要该功能，于是基于之前单个selectBox的方法，实现该插件，多个联动的selectBox的插件，我这里...

收起
实现前端两个下拉框的联动（前端基于bootstrapt和freemarker，后台基于springboot+jpa）
2020-09-28 22:42:43

这种联动的话整体思路是：第一级没有任何约束，直接从数据库查询即可；第二级数据查询条件是第一级实体类字段 controller 层： @ApiOperation(value = "二级网格与一级网格联动", notes = "二级网格与一级网格...

收起
关于extjs的下拉框二级联动
千次阅读 2017-04-13 13:34:57

最近新接触的extjs，需要写下拉框，实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法，另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。

收起
如何通过jQuery实现select下拉框的联动效果
万次阅读 多人点赞 2017-12-10 21:39:51

由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了jQuery作为DOM操作的工具，直接操作，完成了对于下拉框的...

收起

jquery select
记一次后端开发者，如何完成前端下拉框三级联动功能？
2019-09-29 09:20:29

前言 下拉框三级联动这个对于我们大家都很常见，经常在注册一些信息的时候，需要选取省市县等信息，我需要完成的就是这个功能。但是无奈这个项目没有前端开发，而我是一个~专注夹克20年~咦，劲霸男装？哦~不...

收起
Android&Layui实现下拉框二级联动源码
2020-12-17 17:31:32

文章目录前言一、Android实现下拉框二级联动二、Layui实现省市县三级联动前言 Android实现下拉框二级联动和前端框架Layui实现省市联动源码的比对提示：以下是本篇文章正文内容，下面案例可供参考一、Android...

收起
实现jsp页面二级下拉框联动，实时读取数据库数据
2021-02-01 07:06:05

以下为引用的内容：//导入相应的包//这部分代码用于执行查询数据库，返回字符串if (request.getparameter("findobject")!=null)...{if (request.getparameter("findobject").equals("hy_dm"))...{dbconnect conn = ...

收起
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2020-10-23 05:13:52

主要介绍了jQuery+jsp下拉框联动获取本地数据的方法,以实例形式较为详细的分析了jQuery结合jsp实现下拉联动菜单读取本地数据的相关技巧,并附带了完整源码供读者下载参考,需要的朋友可以参考下

收起
EasyUI入门1 实现下拉框二级联动
千次阅读 2017-06-13 16:48:09

EasyUI 实现下拉框二级联动

收起

easyui
jquery+html三级联动下拉框
2021-06-09 09:20:05

html写的三个下拉框，如下：要求1：加载页面时初始化一级下拉框，当一级下拉框点击取值后加载二级下拉框，点击二级下拉框后加载三级下拉框；$(document).ready(function () {//一级单位的下拉显示框$.getJSON...

收起
java实现导出excel三级联动+下拉框（poi）
千次阅读 多人点赞 2021-07-27 16:39:09

java实现导出excel三级联动+下拉框（poi）最终效果java 导入导出excel的几种方式代码实现运行结果解析最终效果 java 导入导出excel的几种方式常见有2种方式，一种是jxl,一种是poi. 他们之间的区别： jxl只能...

收起

java poi excel
DevExpress GridControl 实现两个下拉框的数据联动、实现下拉框（LookUpEdit）绑定数据可变（不影响其他行...
千次阅读 2018-10-23 15:12:45

要实现下拉框（LookUpEdit）绑定数据可变，直接绑定新的数据源的话，该列其他行的显示数据就会自动清空。而要实现上图所示效果，简单思路可以是设置好三个LookupEdit：再在GridControl的View试图的...

收起

DevExpress
layui使用及简单的三级联动实现教程
2021-01-18 15:36:17

2、使用方法：直接将解压好的压缩包拖拽到项目内将以下导入到html中： <link rel=stylesheet href=/自己的地址/./layui/css/layui.css rel=external nofollow media=all> [removed][removed] 2、输出...

收起
Excel如何实现下拉选项二级下拉框 数据联动
千次阅读 2020-11-21 01:30:05

数据关联现在切换到sheet1,选中一个或一列单元格，一次选中数据->数据验证->序列在来源里面键入=省份，并确认如图所示：第一层下拉框创建成功，如图：选中相邻的另一列（H1:H10）在数据->数据验证->序列->来源 ...

收起

excel
DropDownList绑定数据表实现两级联动示例
2021-01-01 19:17:45

场景二：我们在12306网站买票时，肯定遇到过这么一种情景：我们需要先选定目的地的省份，选完省份后在城市选框中会自动加载该省份的城市，实现两级联动。针对以上两个场景，我们可以用DropDownList直接绑定数据表...

收起
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2020-11-26 21:30:31

本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下：这里演示js下拉选择框与输入框联动，直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧，省...

收起

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

帆软FineReport实现下拉框控件多级联动查询模板 + SQL脚本

基于vue下拉框n级联动

项目中不少同仁需要下拉框的n级联动，目前为止查到的资料个人都觉得不太满意，于是自己写了个能够n级联动的下拉框，希望能帮助大家，先上效果图

以下是代码，可以复制直接使用，数据是自己编的，主要提供个思路给大家作为参考

有任何疑问都欢迎指出，看到的都会及时回复

Java 使用POI生成带联动下拉框的excel表格实例代码

Vue+ElementUI实现下拉框的二级联动

Java使用POI导出Excel实现下拉框联动功能

二级联动

三级联动

antd下拉框联动使用步骤详解

Yii2实现上下联动下拉框功能的方法

layui select下拉框联动

下拉框与下拉框之间的联动效果

基于selectBox实现多级联动的模拟下拉框–SelectBoxMulti

实现前端两个下拉框的联动（前端基于bootstrapt和freemarker，后台基于springboot+jpa）

关于extjs的下拉框二级联动

如何通过jQuery实现select下拉框的联动效果

记一次后端开发者，如何完成前端下拉框三级联动功能？

Android&Layui实现下拉框二级联动源码

实现jsp页面二级下拉框联动，实时读取数据库数据

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

EasyUI入门1 实现下拉框二级联动

jquery+html三级联动下拉框

java实现导出excel三级联动+下拉框（poi）

DevExpress GridControl 实现两个下拉框的数据联动、实现下拉框（LookUpEdit）绑定数据可变（不影响其他行...

layui使用及简单的三级联动实现教程

Excel如何实现下拉选项二级下拉框数据联动

DropDownList绑定数据表实现两级联动示例

js下拉选择框与输入框联动实现添加选中值到输入框的方法

下拉框直接实现联动

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

帆软FineReport实现下拉框控件多级联动查询模板 + SQL脚本

基于vue下拉框n级联动

项目中不少同仁需要下拉框的n级联动，目前为止查到的资料个人都觉得不太满意，于是自己写了个能够n级联动的下拉框，希望能帮助大家，先上效果图

以下是代码，可以复制直接使用，数据是自己编的，主要提供个思路给大家作为参考

有任何疑问都欢迎指出，看到的都会及时回复

Java 使用POI生成带联动下拉框的excel表格实例代码

Vue+ElementUI实现下拉框的二级联动

Java使用POI导出Excel实现下拉框联动功能

二级联动

三级联动

antd下拉框联动使用步骤详解

Yii2实现上下联动下拉框功能的方法

layui select下拉框联动

下拉框与下拉框之间的联动效果

基于selectBox实现多级联动的模拟下拉框–SelectBoxMulti

实现前端两个下拉框的联动（前端基于bootstrapt和freemarker，后台基于springboot+jpa）

关于extjs的下拉框二级联动

如何通过jQuery实现select下拉框的联动效果

记一次后端开发者，如何完成前端下拉框三级联动功能？

Android&Layui实现下拉框二级联动源码

实现jsp页面二级下拉框联动，实时读取数据库数据

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

EasyUI入门1 实现下拉框二级联动

jquery+html三级联动下拉框

java实现导出excel三级联动+下拉框（poi）

DevExpress GridControl 实现两个下拉框的数据联动、实现下拉框（LookUpEdit）绑定数据可变（不影响其他行...

layui使用及简单的三级联动实现教程

Excel如何实现下拉选项 二级下拉框 数据联动

DropDownList绑定数据表实现两级联动示例

js下拉选择框与输入框联动实现添加选中值到输入框的方法

下拉框直接实现联动

Excel如何实现下拉选项二级下拉框数据联动