layui 组件tableSelect 下拉表格选择器的应用
在后台管理项目中的表单输入经常需要通过下拉框来选择输入项,为防止用户录入错误,需要下拉框的选项可以维护,并能搜索。发现一个 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="@{/ajax/libs/layui/layui.all.js}"></script>
<script src="/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>