-
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>
有任何疑问都欢迎指出,看到的都会及时回复
-
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进行更改! -
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; } } }
-
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背景:涉及到 省市县获取的项目必有下拉框三级联动,每次都需要百度查询,或者去翻原来的项目,着实不方便。因此,为了自己对三级联动的印象加深,同时也帮助第一次接触下拉框三级联动的小伙伴快速上道,总结一下该... -
下拉框与下拉框之间的联动效果
2019-10-04 04:30:461 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操作的工具,直接操作,完成了对于下拉框的... -
记一次后端开发者,如何完成前端下拉框三级联动功能?
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:09EasyUI 实现下拉框二级联动 -
jquery+html三级联动下拉框
2021-06-09 09:20:05html写的三个下拉框,如下:要求1:加载页面时初始化一级下拉框,当一级下拉框点击取值后加载二级下拉框,点击二级下拉框后加载三级下拉框;$(document).ready(function () {//一级单位的下拉显示框$.getJSON... -
java实现导出excel三级联动+下拉框(poi)
2021-07-27 16:39:09java实现导出excel三级联动+下拉框(poi)最终效果java 导入导出excel的几种方式代码实现运行结果解析 最终效果 java 导入导出excel的几种方式 常见有2种方式,一种是jxl,一种是poi. 他们之间的区别: jxl只能... -
DevExpress GridControl 实现两个下拉框的数据联动、实现下拉框(LookUpEdit)绑定数据可变(不影响其他行...
2018-10-23 15:12:45要实现下拉框(LookUpEdit)绑定数据可变,直接绑定新的数据源的话,该列其他行的显示数据就会自动清空。 而要实现上图所示效果,简单思路可以是设置好三个LookupEdit: 再在GridControl的View试图的... -
layui使用及简单的三级联动实现教程
2021-01-18 15:36:172、使用方法:直接将解压好的压缩包拖拽到项目内 将以下导入到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)在 数据->数据验证->序列->来源 ... -
DropDownList绑定数据表实现两级联动示例
2021-01-01 19:17:45场景二:我们在12306网站买票时,肯定遇到过这么一种情景:我们需要先选定目的地的省份,选完省份后在城市选框中会自动加载该省份的城市,实现两级联动。 针对以上两个场景,我们可以用DropDownList直接绑定数据表... -
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2020-11-26 21:30:31本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧,省...