生成下拉框的几种方法总结——数据来源:枚举
Posted yyk1226
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了生成下拉框的几种方法总结——数据来源:枚举相关的知识,希望对你有一定的参考价值。
上节介绍数据来源是数据库,这节介绍对枚举进行数据获取,形成下拉列表。
使用场景:某些状态值获取等,一般是数据量小,不需要在数据库中进行维护的数据集
1、前提要有枚举数据
package com.test.entity.neworder; import java.util.Objects; /** * 新订单状态 * * @author 刘涛 */ public enum NewOrderStateEunm { //已删除 已删除(0, "已删除"), //已创建 已创建(1, "已创建"), //已发布 已发布(2, "已发布"), Integer index; String state; NewOrderStateEunm(Integer index, String state) { this.index = index; this.state = state; } public Integer getIndex() { return index; } public String getState() { return state; } /** * 通过index获取value * * @param index 枚举索引 * @return 枚举值 */ public static String getValue(Integer index) { for (NewOrderStateEunm c : NewOrderStateEunm.values()) { if (Objects.equals(c.getIndex(), index)) { return c.getState(); } } return null; } /** * 通过value获取index * * @param state 枚举值 * @return 枚举索引 */ public static String getIndex(String state) { for (NewOrderStateEunm c : NewOrderStateEunm.values()) { if (Objects.equals(c.getState(), state)) { return c.index + ""; } } return "error"; } }
2、Controller层
/** * 获取订单状态类型 */ @RequestMapping("/getNewOrderStateForSelect") @ResponseBody public List<Map<String, Object>> getNewOrderStateForSelect() { return EnumUtil.getNewOrderStateEnum(); }
3、EnumUtil工具类文件中
package com.test.util; import com.test.entity.neworder.NewOrderStateEunm; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class EnumUtil { public static List<Map<String, Object>> getNewOrderStateEnum() { List<Map<String, Object>> lm = new ArrayList<>(); Map<String, Object> m; for (int i = 0; i < NewOrderStateEunm.values().length; i++) { m = new HashMap<>(); m.put("id", NewOrderStateEunm.values()[i].getIndex() + ""); m.put("type", NewOrderStateEunm.values()[i].getState()); lm.add(m); } return lm; } }
4、前端页面
<select type="text" id="stateCode" name="state" lay-filter="state" lay-search autocomplete="off" ></select>
5、由于我使用的是layui,所以js部分
<script type="text/javascript"> var $ = layui.jquery; $(function () { getNewOrderStateForSelect("stateCode"); }); /** * 获取订单状态列表 * @param selectId */ function getNewOrderStateForSelect(selectId) { var $selectId = $("#" + selectId); var url = "commonCtrl/getNewOrderStateForSelect"; $.get(url, function (data) { console.log(data); var info = "<option value=‘‘>请选择</option>"; for (var i = 0; i < data.length; i++) { info += "<option value=" + data[i].id + ">" + data[i].type + "</option>"; } $selectId.append(info); layui.use(‘form‘, function () { var form = layui.form; form.render(‘select‘); }) }) } </script>
完毕!
昨天还遇到一个比较复杂的获取方式:后台将枚举写的复杂了。如下:
for(int i=0;i< SettleTypeNewEnum.values().length;i++){ Map code=new HashMap(); code.put(SettleTypeNewEnum.values()[i].getType(),SettleTypeNewEnum.values()[i].getIndex()); payMethodCodeList.add(code); }
所以,前端获取到的是{[object object],[object object]},用json解析一下就是{[张三:12],[李四:23]}这种格式,
但是我想获取其中的值,直接调用对象中的属性,暂未发现有什么属性能直接获取到数据。
so,只能利用以下这种方式解决了:
function getNewPayMethodTypeForSelect(selectId) { var $selectId = $("#" + selectId); var url = "newSettleCtrl/getPayMethodCode"; $.get(url, function (data) { var info = "<option value=‘‘>请选择</option>"; $.each(data.data,function(i,v){ info += "<option value=" + v[Object.keys(v)[0]] + ">" + Object.keys(v)[0] + "</option>"; }); $selectId.append(info); layui.use(‘form‘, function () { var form = layui.form; form.render(‘select‘); }) }) }
以上是关于生成下拉框的几种方法总结——数据来源:枚举的主要内容,如果未能解决你的问题,请参考以下文章