精华内容
下载资源
问答
  • 记录:layui框架, js使用 laydate动态创建多个时间选择,点击无效问题。此外,使用laydate时间选择生效的关键一点是,laydate框架会给input输入框增加一个lay-key=“1”,1也可能是其他数字。 例如下图所示,js...

    记录:layui框架, js使用 laydate动态创建多个时间选择框,点击无效问题。此外,使用laydate时间选择框生效的关键一点是,laydate框架会给input输入框增加一个lay-key=“1”,1也可能是其他数字。

    例如下图所示,js实现动态添加多行数据,并使用laydate动态创建多个时间选择框

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    HTML代码:

    <style>
        .layui-table th{padding: 9px 5px;}
        .layui-table td{ padding: 9px 3px;}
        .add,.delete{font-weight: bold;border-radius: 10px;width: 20px;height: 20px;line-height: 20px;font-size: 18px;}
        .delete{ margin-left: 4px !important;background-color: #f38600;}
    </style>
            <div class="layui-form-item">
                <label class="layui-form-label required">装卸费率</label>
                <div class="layui-input-block">
                    <table id="datatable" class="table layui-table">
    					<thead>
    						<tr>
    							<th>计费项目</th>
    							<th>计费方式</th>
    							<th>流量统计方式</th>
                                <th>数量</th>
                                <th>计量单位</th>
    							<th>单价</th>
    							<th>开始时间</th>
    							<th>结束时间</th>
    							<th>备注</th>
    							<th style="border: none; background-color: #fff;min-width: 44px;"></th>
    						</tr>
    					</thead>
    					<tbody>						
    						<tr data-line="0">
    							<td>
                                    <div class="layui-row layui-col-xs12">                                    
                                        <input type="text" name="" class="layui-input" value="装卸" readonly style="border: none;">
                                        <input type="hidden" name='hand_rate[0][project]' value="2">
                                    </div>
                                </td>
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <select name="hand_rate[0][style]">
                                            <option value="">请选择</option>
                                            {:get_status_option(0,'jifei_style')}
                                        </select>
                                    </div>
                                </td>
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <select name="hand_rate[0][flow_style]">
                                            <option value="">请选择</option>
                                            {:get_status_option(0,'jifei_flow_style')}
                                        </select>
                                    </div>
                                </td>
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][number]" class="layui-input" lay-verify="required" lay-reqtext="数量" placeholder="数量" value="">
                                    </div>
                                </td>							
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][unit]" class="layui-input" lay-verify="required" lay-reqtext="计量单位" placeholder="计量单位" value="">
                                    </div>
                                </td>							
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][price]" class="layui-input" lay-verify="required" lay-reqtext="单价" placeholder="单价" value="">
                                    </div>
                                </td>							
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][start_time]" data-date="" data-date-type="date" class="layui-input " id="hand_rate_start_time0" lay-verify="required"  placeholder="开始时间" value="">
                                    </div>
                                </td>							
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][end_time]" data-date="" data-date-type="date" class="layui-input" id="hand_rate_end_time0" lay-verify="required"  placeholder="结束时间" value="">
                                    </div>
                                </td>							
    							<td>
                                    <div class="layui-row layui-col-xs12">
                                        <input type="text" name="hand_rate[0][remark]" class="layui-input" lay-reqtext="备注" placeholder="备注" value="">
                                    </div>
                                </td>
                                <td style="border: none;">
                                    <button type="button" class="layui-btn layui-btn-xs add" onclick="addFeiFunc($(this))">+</button>
                                    <button type="button" class="layui-btn layui-btn-xs delete" onclick="deleteFeiFunc($(this))">-</button>
                                </td>
    						</tr>
    					</tbody>
    				</table>
                </div>
            </div>
    

    JS代码:

    <script src="__STATIC__/jquery.min.js?v={$version}" charset="utf-8"></script>
    <script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'form'], function () {
    	var element = layui.element,
    		table = layui.table
            , form = layui.form
            ,laydate = layui.laydate
            
        //加
        addFeiFunc = function (t){
            var thisHang = t.parent().parent();
            var tbody = thisHang.parent();
            var line = thisHang.data('line');
            //获取最后一行,必须是最后一行的“+”点击        
            var lastLine = $('tr:last',tbody).data('line');
            if(line != lastLine){
                layer.msg('error');
                return false;
            }
            //判断总行数,最多增加5条
            var lineCount = $('tr',tbody).length;
            if(lineCount >= 5){
                layer.msg('最多添加5条费率');
                return false;
            }
            //下一行的行数
            var nextLine = line + 1;
            var tr = '<tr data-line='+nextLine+'>'+
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+                                    
                                '<input type="text" name="" class="layui-input" value="装卸" readonly style="border: none;">'+
                                '<input type="hidden" name="hand_rate['+nextLine+'][project]" value="2">'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+       
                                '<select name="hand_rate['+nextLine+'][style]">'+
                                    '<option value="">请选择</option>'+
                                    '{:get_status_option(0,"jifei_style")}'+
                                '</select>'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+   
                                '<select name="hand_rate['+nextLine+'][flow_style]">'+
                                    '<option value="">请选择</option>'+
                                    '{:get_status_option(0,"jifei_flow_style")}'+
                                '</select>'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][number]" class="layui-input" lay-verify="required" lay-reqtext="数量" placeholder="数量" value="">'+
                            '</div>'+
                        '</td>'+							
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][unit]" class="layui-input" lay-verify="required" lay-reqtext="计量单位" placeholder="计量单位" value="">'+
                            '</div>'+
                        '</td>'+							
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][price]" class="layui-input" lay-verify="required" lay-reqtext="单价" placeholder="单价" value="">'+
                            '</div>'+
                        '</td>'+							
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][start_time]" data-date="" data-date-type="date" class="layui-input" id="hand_rate_start_time'+nextLine+'" lay-verify="required"  placeholder="开始时间" value="">'+
                            '</div>'+
                        '</td>'+							
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][end_time]" data-date="" data-date-type="date" class="layui-input" id="hand_rate_end_time'+nextLine+'" lay-verify="required"  placeholder="结束时间" value="">'+
                            '</div>'+
                        '</td>'+							
                        '<td>'+
                            '<div class="layui-row layui-col-xs12">'+
                                '<input type="text" name="hand_rate['+nextLine+'][remark]" class="layui-input" lay-reqtext="备注" placeholder="备注" value="">'+
                            '</div>'+
                        '</td>'+
                        '<td style="border: none;">'+
                            '<button type="button" class="layui-btn layui-btn-xs add" οnclick="addFeiFunc($(this))">+</button>'+
                            '<button type="button" class="layui-btn layui-btn-xs delete" οnclick="deleteFeiFunc($(this))">-</button>'+
                        '</td>'+
                    '</tr>';
            tbody.append(tr);    
            form.render();
            //执行laydate实例
            laydate.render({
                elem: '#hand_rate_start_time'+nextLine+'' //指定日期元素的id
            });
            laydate.render({
                elem: '#hand_rate_end_time'+nextLine+'' //指定日期元素的id
            });
            //隐藏此行的加号
            t.hide();
        }
    
        //减
        deleteFeiFunc = function (t){
            var thisHang = t.parent().parent();
            var tbody = thisHang.parent();
            //移除次行
            thisHang.remove();
            //最后一行的‘+’显示
            $('tr:last',tbody).find('.add').show();
        }
    
    })
    </script>
    
    展开全文
  • 花费了很长时间用js实现了在layui框架中的动态表格,以及表格内数据的读入。 1.前端不好,对于表格的样式用的还是layui框架的,这个影响不大 重点是增加一行数据,删除一行数据 代码如下 function ad...

    动态表格的实现

    身为一个后端,前端不是很精通,选择使用X-admin的一个框架,在layui的表格添加中,是一个弹出框的形式实现的。
    在这里插入图片描述
    就是这样的,实际需要的像动态表格那个录入的表格。
    花费了很长时间用js实现了在layui框架中的动态表格,以及表格内数据的读入。

    1.前端不好,对于表格的样式用的还是layui框架的,这个影响不大

    重点是增加一行数据,删除一行数据
    代码如下

    function add(){
        var trid = new Date().getTime();
        var shop = document.getElementById("kemu").innerText;
        var gy = document.getElementById("gys").value;
        var dk = document.getElementById("dk").value;
        var packageid=trid+'packageid';
        var countid=trid+'countid';
        var priceid=trid+'priceid';
        var nameid = trid + 'nameid';
    		
        var objtr=document.createElement('tr');
        objtr.id=trid;
        objtr.innerHTML="<td ></td> " +
            "            <td><input  type='date' style='width:120px'></td> " +
            "            <td><input id='"+trid+"countid'></input></td> " +
            "            <td><select lay-filter='contrller1'  id='"+trid+"'><option value=''>科目名称</option><option value='食材成本'>食材成本</option><option value='干调成本'>干调成本</option> <option value='色拉油成本'>色拉油成本</option><option value='冻货成本'>冻货成本</option><option value='水果成本'>水果成本</option><option value='粮食成本'>粮食成本</option><option value='中厨酱料'>中厨酱料</option> <option value='鱼类成本'>鱼类成本</option><option value='牛蛙成本'>牛蛙成本</option><option value='酒水成本'>酒水成本</option><option value='牛蛙成本'>返箱款</option><option value='酒水成本'>搭赠</option></td>" +
            "            <td><p id='"+trid+"id'></td> " +
            " <td> <div class='search'><input id='input"+trid+"' type='text' placeholder='请输入' οnfοcus='showDiv(this)' οninput='filterP(this)'><div id='dataList"+trid +"' class='content' οnclick='pushInput(this)' style='display:none;'> <option value='白菜'>白菜</option><option value='金针菇'>金针菇</option><option value='红尖椒'>红尖椒</option><option value='黄彩椒'>黄彩椒</option> <option value='西芹'>西芹</option> <option value='大葱'>大葱</option> <option value='香葱'>香葱</option> <option value='香菜'>香菜</option> <option value='泰椒'>泰椒</option> <option value='杭椒'>杭椒</option> <option value='山药'>山药</option> <option value='黄瓜'>黄瓜</option> <option value='地瓜'>地瓜</option> <option value='油麦菜'>油麦菜</option> <option value='莲藕'>莲藕</option> <option value='青笋'>青笋</option><option value='干豆腐'>干豆腐</option><option value='黄豆芽'>黄豆芽</option>  <option value='圆葱'>圆葱</option><option value='鸡蛋'>鸡蛋</option><option value='土豆'>土豆</option> <option value='胡萝卜'>胡萝卜</option> <option value='净蒜'>净蒜</option><option value='姜'>姜</option><option value='大豆腐'>大豆腐</option><option value='鸭血'>鸭血</option> <option value='绿豆芽'>绿豆芽</option> <option value='鲜蘑'>鲜蘑</option> <option value='尖椒'>尖椒</option> <option value='绿美人椒'>绿美人椒</option> <option value='绿泰椒'>绿泰椒</option> <option value='茄子'>茄子</option> <option value='西蓝花'>西蓝花</option> <option value='青蒜'>青蒜</option> <option value='红薯粉'>红薯粉</option> <option value='玉米粒'>玉米粒</option> <option value='精盐'>精盐</option> <option value='味素'>味素</option> <option value='鸡精'>鸡精</option> <option value='白糖'>白糖</option> <option value='白醋'>白醋</option> <option value='保宁醋'>保宁醋</option> <option value='恒顺香醋'>恒顺香醋</option> <option value='蒜头粉'>蒜头粉</option> <option value='灯笼椒'>灯笼椒</option> <option value='花椒油'>花椒油</option> <option value='乌冬面'>乌冬面</option> <option value='魔芋丝'>魔芋丝</option> <option value='木耳'>木耳</option> <option value='东古酱油'>东古酱油</option> <option value='宽粉'>宽粉</option> <option value='卡夫奇妙酱'>卡夫奇妙酱</option> <option value='去皮花生'>去皮花生</option> <option value='白砂糖'>白砂糖</option> <option value='冰糖'>冰糖</option> <option value='沙拉酱'>沙拉酱</option> <option value='蓝莓酱'>蓝莓酱</option> <option value='干锅酱'>干锅酱</option> <option value='辣妹子'>辣妹子</option> <option value='蚝油'>蚝油</option> <option value='腐竹'>腐竹</option> <option value='香辣酱'>香辣酱</option> <option value='红糖'>红糖</option> <option value='美极鲜'>美极鲜</option> <option value='土豆粉'>土豆粉</option> <option value='调和油'>调和油</option> <option value='鸡汁'>鸡汁</option> <option value='白芝麻'>白芝麻</option> <option value='奶粉'>奶粉</option> <option value='麻辣鲜露'>麻辣鲜露</option> <option value='辣鲜露'>辣鲜露</option> <option value='炼乳'>炼乳</option> <option value='淀粉'>淀粉</option> <option value='红麻椒'>红麻椒</option> <option value='绿麻椒'>绿麻椒</option> <option value='三文治'>三文治</option> <option value='黄栀子'>黄栀子</option> <option value='葡萄干'>葡萄干</option> <option value='麻酱'>麻酱</option> <option value='白酒'>白酒</option> <option value='十三香'>十三香</option> <option value='胡椒粉'>胡椒粉</option> <option value='鲁花调和油'>鲁花调和油</option> <option value='色拉油'>色拉油</option> <option value='鱼豆腐'>鱼豆腐</option> <option value='墨鱼丸'>墨鱼丸</option> <option value='肥牛'>肥牛</option> <option value='小油条'>小油条</option> <option value='小馒头'>小馒头</option> <option value='情人果'>情人果</option> <option value='冰爽海草'>冰爽海草</option> <option value='椒麻鸡爪'>椒麻鸡爪</option> <option value='亲亲肠'>亲亲肠</option> <option value='培根'>培根</option> <option value='鸡翅(干锅)'>鸡翅(干锅)</option> <option value='大虾'>大虾</option> <option value='天景玉米'>天景玉米</option> <option value='鸡腿'>鸡腿</option> <option value='鲜花椒'>鲜花椒</option> <option value='五花肉'>五花肉</option> <option value='牛肉'>牛肉</option> <option value='毛肚'>毛肚</option> <option value='千层肚'>千层肚</option> <option value='黄喉'>黄喉</option> <option value='脑花'>脑花</option> <option value='鸡爪'>鸡爪</option> <option value='鸡胗'>鸡胗</option> <option value='午餐肉'>午餐肉</option> <option value='牛油'>牛油</option> <option value='鸭头'>鸭头</option> <option value='白条公鸡'>白条公鸡</option> <option value='扇贝'>扇贝</option> <option value='百叶'>百叶</option> <option value='鱿鱼'>鱿鱼</option> <option value='猪颈肉'>猪颈肉</option> <option value='干贝'>干贝</option> <option value='红糖糍粑'>红糖糍粑</option> <option value='猪腰'>猪腰</option> <option value='金钻奶油'>金钻奶油</option> <option value='西瓜'>西瓜</option> <option value='哈密瓜'>哈密瓜</option> <option value='香蕉'>香蕉</option> <option value='苹果'>苹果</option> <option value='梨'>梨</option> <option value='菠萝'>菠萝</option> <option value='柠檬'>柠檬</option> <option value='火龙果'>火龙果</option> <option value='圣女果(小柿子)'>圣女果(小柿子)</option> <option value='儿童饺子'>儿童饺子</option> <option value='手擀面'>手擀面</option> <option value='馒头'>馒头</option> <option value='花卷'>花卷</option> <option value='大饼子'>大饼子</option> <option value='糖三角'>糖三角</option> <option value='米粉'>米粉</option> <option value='饺子皮'>饺子皮</option> <option value='辣椒段'>辣椒段</option> <option value='藤椒油'>藤椒油</option> <option value='辣椒王'>辣椒王</option> <option value='小米辣'>小米辣</option> <option value='二荆条'>二荆条</option> <option value='海带'>海带</option> <option value='紫香菜'>紫香菜</option> <option value='皮蛋'>皮蛋</option> <option value='孜然粉'>孜然粉</option> <option value='冰粉'>冰粉</option> <option value='底料'>底料</option> <option value='酸菜'>酸菜</option> <option value='十三香酱'>十三香酱</option> <option value='白胡椒粉'>白胡椒粉</option> <option value='凉菜红油'>凉菜红油</option> <option value='麻椒面'>麻椒面</option> <option value='烧烤辣椒面'>烧烤辣椒面</option> <option value='高汤'>高汤</option> <option value='牛蛙料'>牛蛙料</option> <option value='烧烤撒料'>烧烤撒料</option> <option value='鸡油'>鸡油</option> <option value='油酥豆'>油酥豆</option> <option value='安多夫'>安多夫</option> <option value='小苏打'>小苏打</option> <option value='干油碟'>干油碟</option> <option value='5号辣子'>5号辣子</option> <option value='白卤二号'>白卤二号</option> <option value='五香卤'>五香卤</option> <option value='烤鱼红油'>烤鱼红油</option> <option value='烤鱼辣椒面'>烤鱼辣椒面</option> <option value='酱香酱'>酱香酱</option> <option value='蒜香酱'>蒜香酱</option> <option value='剁椒酱'>剁椒酱</option> <option value='泡菜'>泡菜</option> <option value='豆豉'>豆豉</option> <option value='香锅辣酱'>香锅辣酱</option> <option value='香锅酱香酱'>香锅酱香酱</option> <option value='豆瓣酱'>豆瓣酱</option> <option value='大油'>大油</option> <option value='牛蛙酱'>牛蛙酱</option> <option value='牛肉'>牛肉</option> <option value='烧烤鸡翅'>烧烤鸡翅</option> <option value='黑鱼片'>黑鱼片</option> <option value='龙利鱼'>龙利鱼</option> <option value='气泡酒'>气泡酒</option> <option value='薄荷糖'>薄荷糖</option> <option value='奶茶'>奶茶</option> <option value='小芋圆'>小芋圆</option> <option value='珍珠'>珍珠</option> <option value='五彩豆'>五彩豆</option> <option value='小红豆'>小红豆</option> <option value='爆爆珠'>爆爆珠</option> <option value='椰果'>椰果</option> <option value='桂花蜜'>桂花蜜</option> <option value='可可球'>可可球</option> <option value='百香果'>百香果</option> <option value='草莓'>草莓</option> <option value='奇异果'>奇异果</option> <option value='玉米泥'>玉米泥</option> <option value='黄桃'>黄桃</option> <option value='酸梅汁'>酸梅汁</option> <option value='清江鱼'>清江鱼</option> <option value='三道鳞'>三道鳞</option> <option value='江团'>江团</option> <option value='草鱼'>草鱼</option> <option value='黑鱼'>黑鱼</option> <option value='小龙虾'>小龙虾</option> <option value='牛蛙'>牛蛙</option> <option value='泉阳泉'>泉阳泉</option> <option value='雪碧'>雪碧</option> <option value='可乐'>可乐</option> <option value='可乐0°'>可乐0°</option> <option value='青岛优质'>青岛优质</option> <option value='青岛纯生'>青岛纯生</option> <option value='雪花干啤'>雪花干啤</option> <option value='雪花原汁麦'>雪花原汁麦</option> <option value='雪花勇闯天涯'>雪花勇闯天涯</option> <option value='加多宝'>加多宝</option> <option value='劲酒'>劲酒</option> <option value='江小白'>江小白</option> </div></div></td>" +
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><input id='"+trid+"priceid'></td> " + 	
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><input id='"+trid+"priceid'></td> " +
            "            <td><button type='button' οnclick='del(this)'>删除</button></td></div>";
            document.getElementById("tbodyid").appendChild(objtr);
            var tbodyobj=document.getElementById('tbodyid');
            var countchildren=tbodyobj.childElementCount;
            var form = layui.form;
        form.render();
            for (var i=0;i<countchildren;i++){
            	
                tbodyobj.children[i].children[0].innerHTML=i+1;
                tbodyobj.children[i].children[9].innerHTML=shop;
                tbodyobj.children[i].children[11].innerHTML=dk;
                tbodyobj.children[i].children[10].innerHTML=gy;
            }
        }
    

    这有很多是我自己的项目中的东西,讲解一下思路,在表格中的每一行都需要有自己这一行的id,方便下面的遍历表格数据。可以将这个表格转化为一个类似于数组的存在。为了方便理解,放上html相关代码

      <tbody id="tbodyid">
                                        
                                        <tr id="1">
                                          <td name = "id">1</td> 
                                            <td name= "date"> <input style="width: 120px;" type="date"></td>
                                            <td name="restaurantname"><input type="text" value="1"></td>
                                            <td><select lay-filter="contrller1" name="contrller" id="kemu" οnclick="">
                                            	<option value="">科目名称</option>
                                            <option value="食材成本">食材成本</option>
                                            <option value="干调成本">干调成本</option>
                                            <option value="色拉油成本">色拉油成本</option>
                                            <option value="冻货成本">冻货成本</option>
                                            <option value="水果成本">水果成本</option>
                                            <option value="粮食成本">粮食成本</option>
    										<option value="中厨酱料">中厨酱料</option> 
    									    <option value="鱼类成本">鱼类成本</option>
    										<option value="牛蛙成本">牛蛙成本</option>
    										<option value="酒水成本">酒水成本</option>
    										<option value="返箱款">返箱款</option>
    										<option value="搭赠">搭赠</option>
                                            </td>
                                             <td><p id="kemuid"></p></td>
                                             
                                            <td>
                                          <div class="search">
      <input id="input1" type="text" placeholder="请输入" οnfοcus="showDiv(this)" οninput="filterP(this)">
      <div id="dataList1" class="content" οnclick="pushInput(this)" style="display:none;">
    

    个人觉得将需求转化为自己的数据,那么事情就好处理了

    原理就是通过js的innerhtml添加
    删除也雷同

    除了添加删除外,还有数据读取

    上面为每一行根据时间而分配的id,这样方便我们对其进行遍历,放到二维数组中,然后以字符串的形式,或者json格式传到后端,后端通过字符串处理,写进数据库

    展开全文
  • Layui框架之弹窗动态列表默认选中已选中项的方法重新进入弹窗页后默认选中已选择项目 重新进入弹窗页后默认选中已选择项目 本人的公司前端一直在用Layui前端框架,所以一直在研究基于Layui框架的前端页面编写方法...

    Layui框架之弹窗动态列表默认选中已选中项的方法

    重新进入弹窗页后默认选中已选择项目

    本人的公司前端一直在用Layui前端框架,所以一直在研究基于Layui框架的前端页面编写方法。前段时间做的项目中遇到一个问题:在一个弹窗中点击“检查事项”选择,选择检查事项后返回父页面,当需要继续添加事项后重新加点击进入页面。此时需默认选择刚才已选择的事项。具体实现方法如下:
    前台:

    // 弹窗页面列表回显
    var tableIns = table.render({
            elem: '#topic',
            url: '/访问后台路径',
            cellMinWidth: 95,
            page: true,
            height: "full-100",
            limit: 20,
            limits: [10, 20, 30],
            id: "topic",
            method: 'post',
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'id', title: '主键',hide:true, align: 'center'},
                {field: 'tdName', title: '名录名称', align: 'center'},
                {field: 'empStr', title: '部门', align: 'center'},
                {field: 'tdTypeValue', title: '类别', align: 'center'},
                {field: 'containSubject', title: '包含主体', align: 'center'},
                ]],
                //此处即为判断是否为已选中项
            parseData: function(res){ //res 即为原始返回的数据
                for(var i=0; i<res.data.length; i++){
                    if(res.data[i].checked==1){
                        //默认选中状态
                        res.data[i].LAY_CHECKED=true;
                    }
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });
    

    后台:
    实体类中需添加一条是否默认选中字段,此处我添加了枚举类

    /**回显选中**/
        @Transient
        private int checked = CheckItemEnums.CheckedEnum.NO.getChecked();
    

    控制层进行判断:
    主要原理就是获取前台传回的id字符串,之后进行判断,如果为选中项,则给选中项checked字段赋予选中值;

    //回显上次选中
    			String bodyIds = request.getParameter("bodyIds");
    			String[] split = bodyIds.split(",");
    			if (split[0]!=""){
    				List<TopicDirectory> list = 
    					new ArrayList<TopicDirectory>();
    				for (int i=0;i<split.length;i++){
    					TopicDirectory topicOne = 
    						this.service.getTopicDirectoryOne(Integer.parseInt(split[i]));
    					list.add(topicOne);
    				}
    				if (list != null && list.size() > 0){
    					for (int i=0;i<ret.getData().size();i++){
    						for (int e=0;e<list.size();e++){
    							Integer id = ret.getData().get(i).getId();
    							Integer id1 = list.get(e).getId();
    							if (id - id1==0){
    								ret.getData().get(i).setChecked(CheckItemEnums.CheckedEnum.YES.getChecked());
    							}
    						}
    					}
    				}
    			}
    
    展开全文
  • Layui select 下拉框动态渲染这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要增加,然后回来剥离一个 demo 结果又可以,白...

    Layui select 下拉框动态渲染

    这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要增加,然后回来剥离一个 demo 结果又可以,白白浪费好久时间,最终发现还是有几处不对。

    直接上代码把:

    html 代码:

    点我

    选择框

    选择框

    JS 代码

    var form = layui.form;

    var $ = layui.jquery;

    $(‘#btn1’).click(function() {

    layer.open({

    type: 1,

    shade: false,

    title: “提示”, //不显示标题

    content: $(‘#formItem’),

    area: [‘50%’, ‘500px’],

    success: function(layero, index) {

    let _html = ”

    for (let i = 0; i < 5; i++) {

    _html += ‘’ + i + ‘’;

    }

    console.log($(layero).find(‘#select11’))

    $(layero).find(‘#select11’).append(_html);

    $(layero).find(‘#select22’).append(_html);

    console.log(layero, index);

    form.render(‘select’);

    },

    cancel: function() {

    layer.msg(‘捕获就是从页面已经存在的元素上,包裹 layer 的结构’, {

    time: 5000,

    icon: 6

    });

    }

    });

    });

    注意事项:

    1. 添加的时候时,for 循环之添加 html 元素,不做渲染,

    2. 查找元素方法: $(layero).find(‘#select11’)是这样的,针对的是 layer 弹窗中

    3. 最后记得渲染,form.render(‘select’);

    4. 如果不显示记得添加这句话:var form = layui.form;

    好了,不想吐槽 wordpress 这个编辑器了,太不好编辑了。那位好心人有啥好的编辑器推荐个噻。

    IT宅个人博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

    转载请注明原文链接:Layui表单Select动态渲染(原创)

    展开全文
  • 根据后面时间框中的时间类型为“日”,修改时间维度为“日”而非“月” 具体实现代码如下 经过上面代码的实现,发现还有一个小的问题,虽然class名称和selected属性值都已成功绑定,但是在select框内的选中值...
  • Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并...
  • 无侵入优化表单元素不用包裹在layui-form中动态添加表单元素不用form.render()渲染时间控件无JS设置,min max动态设置,开始结束时间分开输入添加input select date radio checkbox失焦校验追加下拉按钮组、搜索选择...
  • Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并...
  • 前端需要动态(ajax)从数据库中获取,时间间隔和半径,后台传给前端两值 time:5 和 radius : 1, 然后通过后台传的值控需要选中的radio加checked属性 html: <div class="layui-form-item"> <...
  • Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并...
  • 最近有一个后台项目前端改造,需要将以前的前端框架换成layui,所以在设计权限与菜单这块研究了一些时间,记录一下以便探讨,查网上很多资料,也有一些心得。 先说说思路:首先菜单权限设计,我是设计到了按钮权限...
  • 不过我在使用layui动态表格组件时遇到了一个问题,更新一条数据时,对应的每行的toolbar(就是右边编辑/查看/删除这类按钮区)没有根据数据进行重新动态更新。我通过源码阅读,了解到了为什么没有更新了,并完美修复...
  • table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题。今天来谈谈table sort的那点事。预告一下...
  • 在开发中因为需要动态生成时间选择,所以选择了layui的 laydate控件,但是遇到了生成的时间选择点击无效的问题,然后再次render 时间选择器一闪就消失了,查了多方资料,找到了如下的解决方法 首先来看下写的...
  • table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题。今天来谈谈table sort的那点事。预告一下...
  • 想做一个动态新增表但功能,但是你会发现原先定义好的时间控件没有效果了,变成了普通的input,于是就需要重新渲染了 1.页面效果 1.html代码 <div id="pay_content" > <label class="relative block"&...
  • Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并...
  • layui三级菜单渲染

    千次阅读 2019-03-14 15:36:15
    今天给大家讲解一下layui的三级动态加载菜单含后端代码。 我是最近刚学的layui,非常感谢贤心大神。开发出这么牛逼ui的框架。 声明:KingYiFan前段是渣渣,本次讲解用的前端js并非KingYiFan亲自封装只是稍作修改...
  • layui如何在表格重载时更改表头

    千次阅读 热门讨论 2019-09-11 17:07:27
    最近有个项目使用了layui框架,在实际的使用中遇到了不少的问题,今天说下其中的一个比较坑的问题:table重载后展示动态表头 需求:使用table展示考勤信息,并能够根据时间筛选 形式如下图,表头的日期要求根据月份...
  • 用的是layui前端框架,后端模板也是基于layuilayui总体还是好用的,虽然有些地方还不够完善。在使用过程中,我主要遇到两点问题,由于对前端不是很熟,花了一天时间才解决。 1、动态插入dom后,子菜单无法显示 ...
  • 动态添加文本

    2019-04-16 09:35:22
    最近在做一个小功能,在网页制作图片,然后最后生成一张新的图片,现在是实现动态添加文本,首先,点击页面上的添加文字按钮打开添加文字模态 其中有文字和背景是要打开layer中的颜色选择器-layui. Colorpicker,...
  • 大二暑假_SSM项目_筛选+动态配置一、筛选功能1)主要内容2)遇到的困难3)部分代码4)效果展示二、1)主要内容2)遇到的困难3)部分代码4)效果展示 一、筛选功能 1)主要内容 要求:在图中画圈的位置加一个前端的...
  • 近期为自己的项目前端用layui框架翻新一下,改改前后端的代码(之前的页面是用jsp标签动态显示数据的,而且页面数据是modelAndView带的数据,前后端交互没有XHR的,个人觉得不好就换了),在页面显示时间数据的时候...
  • 以Spring Framework为核心容器,Spring MVC为模型视图控制器,Mybatis Plus为数据访问层, Apache Shiro为权限授权层, Redis为分布式缓存,Quartz为分布式集群调度,beetl为模版引擎,layui作为前端框架的开源框架。...
  • 以Spring Framework为核心容器,Spring MVC为模型视图控制器,Mybatis Plus为数据访问层, Apache Shiro为权限授权层, Redis为分布式缓存,Quartz为分布式集群调度,layui作为前端框架并进行前后端分离的开源框架。...
  • 巩固知识、打发时间本项目基于两个点进行开发,细节上可能存在的缺陷。 :star-struck:项目介绍 相关介绍 博客主题根据 ps:嘤嘤嘤,还没他的好看 多人博客(每个人都可以发布文章,文章需审核)多人运动??? 后台...
  • 为广大开发者去除大部分重复繁锁的代码工作,让开发者拥有更多的时间陪恋人、家人和朋友。技术交流群:214768328 后端采用spring boot、mybatis(已集成mybatis-plus增强插件,开发更迅速,可查看官方文档了解更...
  • 红黑树的旋转、染色、时间复杂度 CopyOnWrite的原理、应用场景、缺点、需要注意的事情 查找Java进程中占用CPU最多的线程 确定进程ID,使用jps -v或top查看 查看该进程哪个线程占用大量CPU,top -H -p [PID] ...
  • Layui 2.5.4 权限管理系统。 eladmin : 项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue 的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限...

空空如也

空空如也

1 2
收藏数 31
精华内容 12
关键字:

layui动态时间框