layui 组件tableSelect 下拉表格选择器的应用

最新推荐文章于 2024-06-13 11:57:25 发布

无名有道

最新推荐文章于 2024-06-13 11:57:25 发布

阅读量3w

点赞数 2

分类专栏： layui 文章标签： layui tableSelect

本文链接：https://blog.csdn.net/wuminglq/article/details/83042421

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 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>

无名有道

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
10
评论
layui 组件tableSelect 下拉表格选择器的应用

在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能，正好可以满足需求。效果如下图所示：插件下载地址 https://gitee.com/lolicode/layui_component_tableselect使用...
复制链接

扫一扫