layui如何得到下拉框所选的值，layui组件tableSelect下拉表格选择器的应用
layui如何得到下拉框所选的值，layui组件tableSelect下拉表格选择器的应用4、后端代码采用SpringBoot 2.0 mybaits返回消息格式如下：1、此组件是在layui的基础上开发的，所以前端页面引用layui.all.js，tableSelect.js ，和 layui.css<head th:include="include :: header"> <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/> </head> <body class="white-bg"> <script th:src="https://img.aigexing.com@{/ajax/libs/layui/layui.all.js}"></script> <script src="https://pic.aig
在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能，正好可以满足需求。
效果如下图所示：
插件下载地址 https://gitee.com/lolicode/layui_component_tableselect
使用方法
1、此组件是在layui的基础上开发的，所以前端页面引用layui.all.js，tableSelect.js ，和 layui.css
<head th:include="include :: header"> <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/> </head> <body class="white-bg"> <script th:src="https://img.aigexing.com@{/ajax/libs/layui/layui.all.js}"></script> <script src="https://img.aigexing.com/ajax/libs/layui/tableSelect.js"></script>
2、页面代码如下，后端调用api获取json数据，keyword是搜索关键字。组件支持多选，更多参数查看码云上的说明。
<script type="text/javascript"> var tableSelect = layui.tableSelect; tableSelect.render( { elem: '#daibiaochu' searchKey: 'keyword' table: { url: ctx 'module/pianqu/PQ' cols: [ [ {type: 'radio'} {field: 'id' title: 'ID'} {field: 'pianqu' title: '片区'} {field: 'daibiaochu' title: '代表处'} ] ] } done: function (elem data) { var NEWJSON = [] layui.each(data.data function (index item) { NEWJSON.push(item.daibiaochu) }) elem.val(NEWJSON.join(" ")) } }) </script>
3、url获取数据格式为GET方式 pianqu/PQ?page=1&limit=10 参数page ，limit 进行分页
返回消息格式如下：
4、后端代码采用SpringBoot 2.0 mybaits
/** * 查询片区下拉表 */ @RequestMapping(value="/PQ" method=RequestMethod.GET) @ResponseBody public msg XH (@RequestParam Map<String Object> paramMap) { Map<String Object> data = new HashMap<>(); //页数 Integer Num = Integer.parseUnsignedInt(paramMap.get("page").toString()); //每页数 Integer limit = Integer.parseUnsignedInt(paramMap.get("limit").toString()); Integer page = (Num - 1) * limit ; //查询关键字 String keyword =paramMap.get("keyword") == null ? "" : paramMap.get("keyword") ""; List<dPianqu> list = pianquService.selectdPianqu(page limit keyword); //总数 Integer count = pianquService.selectNums(keyword); //组装消息 return ApiResultUtil.success(list count); } 返回消息组装类 public class ApiResultUtil { /** * 请求成功返回 * @param object * @return */ public static Msg success(List<?> list int count){ Msg msg=new Msg(); msg.setCode(0); msg.setCount(count); msg.setMsg(""); msg.setData(list); return msg; } public static Msg error(Integer code String resultmsg){ Msg msg=new Msg(); msg.setCode(code); msg.setMsg(resultmsg); return msg; } } mabaits的 map.xml代码 <resultMap type="dPianqu" id="dPianquResult"> <result property="id" column="id" /> <result property="pianqu" column="pianqu" /> <result property="daibiaochu" column="daibiaochu" /> </resultMap> <sql id="selectPianquVo"> select id pianqu daibiaochu from aps_pianqu </sql> <select id="selectdPianqu" resultMap="dPianquResult" > <include refid="selectPianquVo"/> <where> <if test="keyword != null and keyword!= ''"> and CONCAT(`pianqu` `daibiaochu`) LIKE concat('%' #{keyword jdbcType=VARCHAR} '%')</if> </where> LIMIT #{page jdbcType=INTEGER} #{limit jdbcType=INTEGER} </select>
