精华内容
下载资源
问答
  • html代码 请选择 js部分 请求接口拿到数据后 $("#unitName").append(new Option(item.cbdw,index)) layui.form.render("select"); 最主要是 layui.form.render(“select”) 这一行,因为是layui

    html代码

    <select name="interest" id="proName" lay-filter="aihao" class="laySelect">
                                    <option value="">请选择</option>
                                </select>
    

    js部分
    请求接口拿到数据后

    $("#unitName").append(new Option(item.cbdw,index))
                  layui.form.render("select");
                  
    

    最主要是 layui.form.render(“select”) 这一行,因为是layui

    展开全文
  • layui下拉框数据渲染

    2020-04-10 14:39:11
    1.获取下拉框数据 $.post('', function (res) { let html = "<option value=''></option>"; $.each(res, function (i, t) { if ("" == t.id) { html += '<option value="' + t....

    1.获取下拉框数据
    $.post('', function (res) {
        let html = "<option value=''></option>";
        $.each(res, function (i, t) {
            if ("" == t.id) {
                html += '<option value="' + t.id + '" selected>' + t.name + '</option>'
            } else {
                html += '<option value="' + t.id + '" >' + t.name + '</option>'
            }
        });
        $('#group').html(html);
        form.render('select');
    });

     

    展开全文
  • 方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下拉框效果: 引入js和css <...

    方案一:layui下拉框分页插件

    https://fly.layui.com/jie/29002/

    此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化

    如图下拉框效果:

    引入js和css 

     <script src="${contextPath}/static/selectPage/js/utils.js" type="text/javascript" charset="utf-8"></script>
     <script src="${contextPath}/static/selectPage/js/selectPageTool.js" type="text/javascript" charset="utf-8"></script>
     <link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyType.css" media="all">
     <link rel="stylesheet" href="${contextPath}/static/selectPage/css/cyStyle.css" media="all">
     <link rel="stylesheet" href="${contextPath}/static/selectPage/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="${contextPath}/static/layui/css/layui.css">
    <script src="${contextPath}/static/lib/jquery.js"></script>
    <script src="${contextPath}/static/layui/layui.js"></script>
    <body>
    
        <form class="layui-form">
        <input type="hidden" id="code" name="code" value="${materielEntity.code}">
    
        
           
           <div class="layui-form-item">
            <label class="layui-form-label">下拉框</label>
            <div class="layui-input-block" style="width:80%">
            //layui原生下拉框支撑不了大数据
    <%-- <select name="cardCode" lay-filter="" lay-search> <option value="">请选择</option> <c:forEach items="${sapSuppliers}" var="sapSupplier"> <option value="${sapSupplier.cardCode}" <c:if test='${materielEntity.cardCode == sapSupplier.cardCode}'>selected="selected"</c:if> >${sapSupplier.cardCode}</option> </c:forEach> </select> --%>

            //这个是下拉框分页的样式,这个插件也是有问题滴,看着用 <div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'" name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="Form">保存</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </body>
        <div style="margin-top:4%" cyType="selectPageTool" cyProps="url:'/sapSupplier/findAllSupplier',cache:false, checkbox:'false',tips:'请选择'"
                     name="cardCode" value="${materielEntity.cardCode}" class="layui-input-normal">
                </div> 
        1.name 填你需要渲染的字段,新增和编辑重新渲染都是靠这个name
        2. value 渲染的code
        3.url和平常我们写ajax访问的后台接口一样
    //url后台接口
        @RequestMapping(value = "findAllSupplier")
        Map<String, Object> findAllSupplier() {
            
            Map<String, Object> map = new HashMap<>();
         //数据库对应的实体集合
            List<SapSupplier> sapSuppliers = sapSupplierService.findAll();
            //我们需要返回前端的json实体集合
            List<SelectPageJson> selectPageJsons = new ArrayList<>();
            if(sapSuppliers != null && sapSuppliers.size() > 0) {
                for(SapSupplier sapSupplier : sapSuppliers) {
                    SelectPageJson selectPageJson = new SelectPageJson();
                    selectPageJson.setCode(sapSupplier.getCardCode());
                    selectPageJson.setValue(sapSupplier.getCardName());
                    selectPageJsons.add(selectPageJson);
                }
            }
            map.put("code", 0);
            map.put("data", selectPageJsons);
            map.put("count", selectPageJsons.size());
            map.put("msg", "成功");
            return map;
        }
      返回的数据格式类似这样:
      

    {
    "code": 0,
    "msg": "",
    "count": 16,
    "data": [//SelectPageJson 集合

     code:"",

     value:"";

    ]
    }

     
    /**   
    * @Description: layui 分页下拉框插件json格式
    * @date: 2019年4月19日 下午5:28:16 
    */
    public class SelectPageJson {
        
        private String code;
        
        private String value;
    
        public String getCode() {
            return code;
        }
    
        public void setCode(String code) {
            this.code = code;
        }
    
        public String getValue() {
            return value;
        }
    
        public void setValue(String value) {
            this.value = value;
        }
        
        
        
    }

     关键字搜索的jpa对应的sql

    /**
    * @Description: CardName模糊查询
    * @date: 2019年4月26日 上午11:49:20
    */
    @Query(value="SELECT card_code FROM sap_supplier s WHERE LOCATE(?1, s.card_name)>0 and s.delete_mark = false ORDER BY s.create_date",nativeQuery=true)
    List<String> findListByCardName(String cardName);

     

    LOCATE(?1, s.card_name)>0 模糊查询

     

     

    方案二:下拉框嵌入分页表格,

    tableSelect 下拉表格选择器

    https://fly.layui.com/extend/tableSelect/#doc

     

    <body>
    
        <form class="layui-form">
        <input type="hidden" id="code" name="code" value="${salesOrder.code}">
        
    
           
           <div class="layui-form-item">
            <label class="layui-form-label">客户/供应商</label>
            <div class="layui-input-block" style="width:80%">
                <div class="layui-input-inline">
                    <input id="cardCode" type="text" name="cardCode"  placeholder="请输入" autocomplete="off" class="layui-input">//下拉框样式
                     <input type="hidden" name="cardCode" id="cardCode2" value="${salesOrder.cardCode}">//传入后台的code
                </div>
            </div>
        </div>
           
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="Form">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    
    </body>
    //缺少layui css等文件自己引入
    <script src="${contextPath}/static/layui/layui.all.js"></script>
    <script src="${contextPath}/static/tableSelect/tableSelect.js" type="text/javascript" charset="utf-8"></script>
    <script src="${contextPath}/static/backend/js/baseManage/salesOrder/salesOrder_edit.js"></script>
    <script type="text/javascript">
    var form = layui.form;
    form.render();
    var tableSelect = layui.tableSelect;//非模块化使用
    tableSelect.render({
        elem: '#cardCode',//主建 和cols的cardcode对应
        checkedKey: 'cardCode',//和cols的cardCode相对应
        searchKey: 'cardName',//传入后台的搜索关键字
        table: {
            url: 'xx/findAllByPageAndLimit',//后台java代码接口
            cols: [[
                { type: 'radio' },//开启单选
                { field: 'cardCode', title: '业务伙伴代码', width: 100 },//列名1
                { field: 'cardName', title: '业务伙伴名称', width: 100 },//列名2
            ]]
        },
        done: function (elem, data) {//点击选择之后的回调
            var NEWJSON = []
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.cardName)
                $("#cardCode2").val(item.cardCode)
            })
            elem.val(NEWJSON.join(","))
        }
    })
    
    </script>

    java代码:

    控制层

    @RequestMapping(value="/findAllByPageAndLimit",method=RequestMethod.GET)
        @ResponseBody
        Map<String, Object> findAllByPageAndLimit(SapSupplierModel sapSupplierModel,int page,int limit) {
            Map<String, Object> map = new HashMap<>();
    
            Page<SapSupplier> p = sapSupplierService.findPage(sapSupplierModel, page, limit);
            
            
            List<SapSupplierXiaLaJson> list = new ArrayList<>();
            int a = 0;
            for (SapSupplier sapSupplier : p.getContent()) {
                a++;
                if (sapSupplier != null) {
                    list.add(new SapSupplierXiaLaJson(sapSupplier,a));
                }
            }
            
            map.put("code", 0);
            map.put("data", list);
            map.put("count", new Long(p.getTotalElements()).intValue());
            map.put("msg", "成功");
            return map;
        }

     

    实现层:

    @Override
        public Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize) {
            Specification<SapSupplier> specification = new Specification<SapSupplier>() {
    
                @Override
                public Predicate toPredicate(Root<SapSupplier> root, CriteriaQuery<?> query,
                                             CriteriaBuilder cb) {
                    List<Predicate> list = new ArrayList<>();
    
                    Predicate deleteMark = cb.equal(root.get("deleteMark").as(Boolean.class), false);
                    list.add(deleteMark);
    
                    if (!CommonUtil.isEmpty(sapSupplierModel.getCardName())) {
                        Predicate cardName = cb.like(root.get("cardName"), "%" + sapSupplierModel.getCardName().trim() + "%");
                        list.add(cardName);
                    }
    
    
                    Predicate[] predicates = new Predicate[list.size()];
    
    
                    return cb.and(list.toArray(predicates));
                }
            };
            //排序
            List<Order> orders = new ArrayList<>();
    
    
            orders.add(new Order(Direction.ASC, "createDate"));
            Sort sort = Sort.by(orders);
            Pageable pageable = PageRequest.of(currentPage - 1, pageSize, sort);
            return sapSupplierRepository.findAll(specification, pageable);
        }
    Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);

    持久层:

    Page<SapSupplier> findPage(SapSupplierModel sapSupplierModel, int currentPage, int pageSize);

     

    转载于:https://www.cnblogs.com/bbllw/p/10785267.html

    展开全文
  • layui下拉框回显,修改页面自动渲染

    千次阅读 2019-07-09 11:28:58
    layui下拉框回显,修改页面自动渲染,涉及到文件读取以及线程问题 // 获取需求类型,这个方法必须要写在最上面不然代码执行顺序不对 function getType() { var typeHtml = ''; $.ajax({ url: pUrl + 'back_admin...

    layui下拉框回显,修改页面自动渲染,涉及到文件读取以及线程问题

    // 获取需求类型,这个方法必须要写在最上面不然代码执行顺序不对
        function getType() {
            var typeHtml = '';
            $.ajax({
                url: pUrl + 'back_adminRole.do',
                type: 'post',
                async: false,
                data: {
                    page: 1,
                    pageSize: 500,
                },
                dataType: 'json',
                success: function (res) {
                    var typeList = res.result.list;
                    typeHtml += '<option value="">请选择管理员角色</option>'
                    for (var i = 0; i < typeList.length; i++) {
                        typeHtml += '<option value="' + typeList[i].id + '">' + typeList[i].name + '</option>';
                    }
                    $form.find('#type').html(typeHtml);
                    form.render();
                    // form.on('select(areas)', function(data) {
                    //     var value = data.value;
                    //     console.log(value)
                    // });
                },
                error: function (e) {
                    layer.msg('连接超时,请稍后再试');
                }
            });
        }
        getType()//获取管理员类型
        $("#id").val(sessionStorage.getItem('rebateId'));
        $("#username").val(sessionStorage.getItem('username'));
        // $("#password").val(sessionStorage.getItem('password'));
    
        let type = sessionStorage.getItem('type')
        $("#type").val(type);
    
    
    
        form.render();
    

    正常情况下数据回显需要调用接口

    layui提供:表单初始化赋值 链接:https://www.layui.com/doc/modules/form.html#val
    一般用在列表的修改例如:
    在这里插入图片描述

    代码如下:
    // formTest 就是 class=“layui-form” 所在元素对应的 lay-filter="" 对应的值 代码如下:

    在这里插入图片描述
    form.val(“formTest”, {
    “username”: “名字” // “name”: “value”
    ,“sex”: “女”
    ,“auth”: 3
    ,“check[write]”: true
    ,“open”: false
    ,“desc”: “我爱layui”
    })
    根据ID请求后台数据,在成功回调里面执行,代码如下:
    在这里插入图片描述
    form.val()里面的key:就是大家表单元素的name

    比如:第一个event,就是你的页面上的input,代码如下:
    在这里插入图片描述

    展开全文
  • 可能是没有添加form.render();进行渲染
  • Layui下拉框的绑定

    千次阅读 2019-04-08 09:03:26
    对于Layui表单中的表单下拉框绑定中,我们会发现绑定上去了却没显示出来,那是因为你绑定的下拉框layui插件表单渲染后的下拉框并不是同一个元素、同一个标签组成,因此绑定不了,该如何绑定下拉框其实只需要使用...
  • layui 下拉框优化 render

    千次阅读 2019-03-02 17:15:05
    下拉框渲染不出来原因 引入了layui.css 后发现下拉框未优化: &lt;select id="qua" name="qua" lay-verify="required" lay-filter="qua"&gt; &lt;option ...
  • layui 下拉框动态赋值

    2020-09-05 12:04:17
    核心代码部分为: 在select标签上面的class属性中加一公共类名称,...最后要重新渲染一下select标签,layui.form.render(‘select’); 否则可能还是会不展示下拉数据 <div class="layui-form-item"> <label
  • 拯救被layui渲染折磨已久的我,该方法无需重新渲染 HTML部分如下 <!--HTML部分--> <select id="treeType" name="treeType" class="layui-select" lay-filter="treeType"> <option value="4">...
  • Layui会对select、checkbox、...值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element模块)所以当新添加这些元素以后需要对页面表单元素重新渲染一下layui.use('form', function(){var form = layui...
  • 首先就是加入render进行渲染 如果还是不对 一定要注意layui是不是放在一个文件里
  • 刚接触layui的时候写下拉框发现不会渲染视图 开始以为是自己代码有问题 layui.use('form', function(){ var form = layui.form; form.render(); }); 其实并不是,只是没有引入js而已 <script type="text/...
  • layui表单的下拉选择框select禁止点击/禁用/不可操作的实现方法直接上代码: 行业类型选择行业类型it服务制造业批发/零售生活服务layui.use('form', function(){var form = layui.form;});可以直接 放到下拉选择框 ...
  • 1.在IE下无法显示下拉框看,出现render渲染不上,layui.form 未定义或为Null 解决方案:layui下拉框要给个初始化 option选项,查看代码看是否把option选项给移除了!在页面的select下补上一个 ,OK! 2.获取不到...
  • 使用方法比较简单,写个div会自动渲染 下载地址 链接:https://pan.baidu.com/s/1DKtSUQ19zi97iOk4bCKpxw密码:6cgi 链接2: https://pan.baidu.com/s/1rA_esK1s11vGIMz9_mWtsw 提取码: zcws 欢迎加入q群 275846351 ...
  • Layui动态渲染下拉框

    千次阅读 2020-05-08 09:55:29
    本例包含测试页面代码,工具方法只有selectUtil <!DOCTYPE html> <html> <head> <...Layui动态下拉框</title> <link rel="stylesheet" href="../../layui/css/...
  • layui渲染下拉框

    万次阅读 2018-08-25 20:55:59
     众所周知,layui是一套非常棒的前端框架,虽然layui的官方文档给的十分详细,但我们在做的时候仍然会遇到各种各样的问题,如不会渲染,前台和后台交互不了,  以下,就位大家讲解如何使用layui框架动态为s...
  • 需求动态的给下拉框赋值,且仍具有layui的样式实现html代码,保留一个请选择(可去除,默认下拉会选择第一个)最重要的是这个class属性layui-form,很多人是因为没有添加这个属性导致layui.form.render()重新渲染无效...
  • layui通过下拉框动态渲染多级表头之前遇到的坑 直接上图解决方法 之前遇到的坑 直接上图 选择第二个下拉框时 选回第一个下拉框时 表头全乱了 原本写法是 通过监听下拉框控制表格重载 报错 解决方法 通过监听...
  • layui渲染下拉框,设置下拉框,设置验证 <div class="layui-form-item"> <label for="department_id" class="layui-form-label"> <span class="x-red">*</span>部门 </label&...
  • layui动态获取数据渲染 使用layui前端框架时,很多时候通过动态表格方法得到数据后无法显示,是因为没有进行数据渲染。比如说下图中年份selelct多选框的数据获取。 JSP页面代码 <label class="layui-form-label...
  • 一、吐槽,layui感觉真的是比较不好用二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿,可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很...
  • 直接拼接,然后根据返回值渲染select// 动态渲染脚本类型下拉框// 1.发送ajax请求得到data// 2.将data渲染到页面上function getDataList() {// 请求$.ajax({type:'post',url: "/cd/workPlatform/tool/detail",...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 128
精华内容 51
关键字:

layui下拉框渲染