zoukankan      html  css  js  c++  java
  • xm-select使用

    最近项目上需要加载一个问题分类下拉框,数据量不是普通的六七个,还需要有搜索功能,原生的下拉框是满足不了了,
    于是使用layui的第三方组件xmSelect,功能是是非常强大的,分页,搜索,分组等等
    如果需要展示更多列的数据,可以使用tableSelect

    
    layui.config({
    				base: './layui_exts/xmSelect/'
    			}).extend({
    				xmSelect: 'xm-select'
    			}).use(['xmSelect'],function(){
    			var xmSelect = layui.xmSelect;
    })
    //加载问题分类下拉框
        var xmSelect = xmSelect.render({
            el: '#itemType',
            language: 'zn',
            //开启搜索
            filterable: true,
            //搜索提示
            searchTips: '请输入问题分类关键词',
            //开启远程搜索
            remoteSearch: true,
            // layVerify: 'required',
            //搜素延迟
            delay: 1000,
            model: {
                icon: 'hidden',
                label: {
                    type: 'block',
                    block: {
                        //是否显示删除图标
                        showIcon: false,
                    }
                }
            },
            //下拉方向
            direction: 'down',
            //搜索回调
            remoteMethod: function (val, cb, show, pageIndex) {
                $.ajax(ctx + 'complain/itemTypeList', {
                    method: 'post',
                    data: {
                        itemType: val,
                        pageNum: pageIndex
                    },
                    dataType: 'json',
                    success: function (res) {
                        var data = res.data;
                        if (res.code == 0) {
                            //成功回调数据    itemTypes  List<Map<String,String>>    name   value
                            cb(data.itemTypes, data.pages);
                        } else {
                            layer.msg(res.msg, {time: 2000, icon: 2, shade: 0.01});
                        }
    
                    }
                })
            },
            paging: true,
            pageRemote: true,
            radio: true,
            clickClose: true
        })
    
    //获取值
    xmSelect.getValue()[0].value
    
    作者: JaminYe
    版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
  • 相关阅读:
    在centos上搭建Git服务器
    glog日志库移植Android平台
    水葱
    路易斯安娜鸢尾
    再力花
    矮生百慕大
    洒金珊瑚
    八角金盘
    锦绣杜鹃
    茶梅球
  • 原文地址:https://www.cnblogs.com/JaminYe/p/13940689.html
Copyright © 2011-2022 走看看