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

时间：2024-12-10 16:53:33

     在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能，正好可以满足需求。

    效果如下图所示：

插件下载地址  /lolicode/layui_component_tableselect

使用方法

1、此组件是在layui的基础上开发的，所以前端页面引用， ，和 

<head th:include="include :: header">
	<link th:href="@{/ajax/libs/layui/css/}" rel="stylesheet"/>
</head>
<body class="white-bg">
<script th:src="@{/ajax/libs/layui/}"></script>
<script src="/ajax/libs/layui/"></script>

2、页面代码如下，后端调用api获取json数据，keyword是搜索关键字。组件支持多选，更多参数查看码云上的说明。

 <script type="text/javascript">
        var tableSelect = ;
        (
            {
            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 = []
                (, function (index, item) {
                    ()
                })
                ((","))
            }
        })
</script>

3、url获取数据格式为GET方式    pianqu/PQ?page=1&limit=10    参数page  ，limit 进行分页 

返回消息格式如下：

4、后端代码采用SpringBoot 2.0 + mybaits

	/**
	 * 查询片区下拉表
	 */
	@RequestMapping(value="/PQ",method=)
	@ResponseBody
	public Msg XH (@RequestParam Map<String, Object> paramMap)
	{
		Map<String, Object> data = new HashMap<>();
		//页数
		Integer Num = (("page").toString());    
		//每页数
		Integer limit = (("limit").toString());
		Integer page =  (Num - 1) * limit ;
		//查询关键字
		String keyword =("keyword") == null ? "" : ("keyword")  + "";
		List<dPianqu> list = (page,limit,keyword);
        //总数
		Integer count = (keyword);
		//组装消息
		return (list,count);
	}

返回消息组装类


public class ApiResultUtil {
    /**
     * 请求成功返回
     * @param object
     * @return
     */
    public static Msg success(List<?> list,int count){
        Msg msg=new Msg();
        (0);
        (count);
        ("");
        (list);
        return msg;
    }


    public static Msg error(Integer code,String resultmsg){
        Msg msg=new Msg();
        (code);
        (resultmsg);
        return msg;
    }


}

mabaits的 代码

   <resultMap type="dPianqu" >
        <result property="id"    column="id"    />
        <result property="pianqu"    column="pianqu"    />
        <result property="daibiaochu"    column="daibiaochu"    />
    </resultMap>
	
	<sql >
        select id, pianqu, daibiaochu from aps_pianqu
    </sql>
	   
 <select  resultMap="dPianquResult"  >
        <include ref/>
        <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>

 

 

相关文章