精华内容
下载资源
问答
  • Layui动态添加表头

    千次阅读 2020-07-25 10:48:17
    需求:根据选择查询条件,动态添加clo列,并展示结果 实现效果如下: 1.使用到的技术与组件: layui、xm-select.js、axios.min.js、jquery,上干货: <%@ page language="java" import="java.util.*" pageEncoding=...
    需求:根据选择查询条件,动态添加clo列,并展示结果
    实现效果如下:
    

    在这里插入图片描述

    1.使用到的技术与组件:
    layui、xm-select.js、axios.min.js、jquery,axios上干货:
    
    
    ```java
    package com.yhh.search.web.controller;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.http.HttpSession;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.alibaba.fastjson.JSONArray;
    import com.yhh.common.entity.LayuiTable;
    import com.yhh.common.entity.PageParam;
    import com.yhh.search.entity.dto.CusOverheadAccountRecordDTO;
    import com.yhh.search.service.CusOverheadAccountRecordService;
    
    @Controller
    @RequestMapping(value = "/manage/CusOverheadAccountRecordController")
    public class CusOverheadAccountRecordController {
    	
    	//这是java中的组合,通过CusOverheadAccountRecordService生成cusOverheadAccountRecordService对象进行组合
    	@Autowired
    	private CusOverheadAccountRecordService cusOverheadAccountRecordService;
    	
    	@RequestMapping(value = "/getCusOverheadAccountRecord")
    	@ResponseBody
        public LayuiTable<CusOverheadAccountRecordDTO> getCusOverheadAccountRecord(
    			HttpSession session, CusOverheadAccountRecordDTO cusOverheadAccountRecordDTO, Integer page,
    			Integer rows, String sortName, String sortOrder) {
    
    		LayuiTable<CusOverheadAccountRecordDTO> table = new LayuiTable<CusOverheadAccountRecordDTO>();
    		try {
    			List<CusOverheadAccountRecordDTO> listRows = new ArrayList<CusOverheadAccountRecordDTO>();
    			PageParam<CusOverheadAccountRecordDTO> params = new PageParam<CusOverheadAccountRecordDTO>(
    					cusOverheadAccountRecordDTO, page, rows, sortName, sortOrder);
    			String selectArr = cusOverheadAccountRecordDTO.getSelectArr();
    			JSONArray parseArray = JSONArray.parseArray(selectArr);
    			if(parseArray.size() == 0){
    				table.setMsg("请输入选择产品再进行查询哦");
    				table.setData(listRows);
    				table.setCount(0);
    				return table;
    			}
    			cusOverheadAccountRecordDTO.setListCo(parseArray);
    			// 获取数据集合
    			listRows = cusOverheadAccountRecordService.getCusOverheadAccountRecordPage(params);
    			// 获取总条数
    			Integer total = cusOverheadAccountRecordService.getCusOverheadAccountRecordCount(cusOverheadAccountRecordDTO);
    			// 存储到LayuiTable 对象
    			table.setData(listRows);
    			table.setCount(total);
    			return table;
    		} catch (Exception e) {
    			e.printStackTrace();
    			return table;
    		}
    	}
    
    }
    
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <!-- namespace命名空间,作用就是对sql进行分类化管理,理解sql隔离 注意:使用mapper代理方法开发,namespace有特殊重要的作用,namespace等于mapper接口地址 -->
    <mapper namespace="com.yhh.search.dao.CusOverheadAccountRecordDAO">
    
    	<select id="getCusOverheadAccountRecordPage" resultType="java.util.Map">
    		  SELECT  C.CUSTOMERNUMBER,
    					C.CUSTOMERNAME,
    					C.ORGNAME,
    					CC.MOBILEPHONENO
    			<if test='queryParams.listCo != null'>
    			,
    	        <foreach collection="queryParams.listCo" item="item" separator=",">
    	        MAX(CASE C.paymentbanknumber WHEN #{item} THEN '开通' END ) "${item}"
    	        </foreach>
    	    </if>
    		  FROM CUS_OVERHEAD_ACCOUNT_RECORD C
    			INNER JOIN CUS_CUSTOMER CC
    				ON C.CUSTOMERNUMBER = CC.PKCUS
    			INNER JOIN BAS_ORGANIZATION BO
                    ON BO.PKORG = C.PKORG
                  START WITH BO.PKORG = #{queryParams.pkorg}
    		CONNECT BY PRIOR BO.PKORG = BO.PKPARENT
    		  GROUP BY C.CUSTOMERNUMBER,C.CUSTOMERNAME,C.ORGNAME,
    					CC.MOBILEPHONENO
    		OFFSET #{startNumber} ROWS FETCH NEXT #{rows} ROWS ONLY
    	</select>
    	
    	<select id="getCusOverheadAccountRecordCount" resultType="java.lang.Integer">
    		SELECT COUNT(*)  FROM CUS_OVERHEAD_ACCOUNT_RECORD C
    			     INNER JOIN CUS_CUSTOMER CC
    						ON C.CUSTOMERNUMBER = CC.PKCUS
    			     INNER JOIN BAS_ORGANIZATION BO
                            ON BO.PKORG = C.PKORG
                     START WITH BO.PKORG = #{pkorg}
    					CONNECT BY PRIOR BO.PKORG = BO.PKPARENT
    					
    	</select>
    
    </mapper>
    ```html
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>客户业务查询</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet"
    	href="<%=basePath%>jslib/plugins/layui/css/layui.css" media="all" />
    
    <script type='text/javascript' src="<%=basePath%>jslib/jquery.min.js"></script>
    <script type='text/javascript' src="<%=basePath%>jslib/jaliswall.js"></script>
    <script type="text/javascript" src="<%=basePath%>jslib/urlparenter.js"></script>
    <script type="text/javascript" src="<%=basePath%>jslib/layer/layer.js"></script>
    <script type="text/javascript" src="<%=basePath%>jslib/lverification.js"></script>
    <script src="<%=basePath%>jslib/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>jslib/plugins/layui/xm-select.js"></script>
    <script src="<%=basePath%>jslib/plugins/layui/axios.min.js"></script>
    <style>
    body {
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    }
    
    .layui-table-view {
    	margin: 0;
    }
    .layui-form-item {
    	margin-bottom: 0px;
    }
    .layui-form-item .layui-inline:last-child {
    	margin-right: 0;
    	margin-left: 0px;
    }
    .layui-col-md11{
    	margin:0 auto;
    }
    .layui-form-item{margin-top:14px;}
    
    .layui-form-pane .layui-form-label{
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    </style>
    </head>
    
    <body>
    	<form class="layui-form" action="" id="form" method="post"
    		style="padding: 10px 0px;">
    		<div class="layui-form-item" style="margin-top: 0px;">
    				<div class="layui-inline" style="width:1200px;">
    					<label class="layui-form-label">机构名称:</label>
    					<div class="layui-input-inline" style="width:120px;">
    							<select id="org_modules" name="modules"  lay-verify="required" lay-filter="org_modules"  ></select>
    					</div>
    					<label class="layui-form-label">开通产品:</label>
    					<div class="layui-input-inline" style="width:360px;">
    						<div id="demo1"></div>
    					</div>
    					<a class="layui-btn search_btn search_btn_reload" id="demo1-getValue"  data-type="reload">查询</a>
    				</div>
    		</div>
    		<div class="layui-form-item" style="margin-top: 0px;">
    		</div>
    	</form>
    
    	<!-- 查询条件 -->
    	<!-- 查询信息 -->
    	<table class="layui-hide" id="test" lay-filter="test"></table>
    	
    	<script type="text/javascript">
    			var demo1 = xmSelect.render({
    				el: '#demo1', 
    				toolbar: {show: true},
    				model: {
    				label: {
    						type: 'block',
    						block: {
    							//最大显示数量, 0:不限制
    							showCount: 3,
    							//是否显示删除图标
    							showIcon: true,
    						}
    					}
    				},
    				data: []
    			})
    			/*axios获取产品*/
    			axios({
    				method: 'get',
    				url: "${pageContext.request.contextPath}/manage/BizBankProductController/getBizBankProduct",
    			}).then(response => {
    				var res = response.data;
    				demo1.update({
    					data: res,
    					autoRow: true,
    				})
    			});
    	</script>
    	<script>
    var pksta = '<%=session.getAttribute("pksta")%>';
    var pkorg = <%=session.getAttribute("pkorg")%>;
    layui.use([ 'laydate', 'laypage', 'layer', 'table', 'form','laytpl' ],
    	function() {
    		var laydate = layui.laydate, laypage = layui.laypage, $ = layui.jquery, laytpl = layui.laytpl, form = layui.form, layer = layui.layer, table = layui.table;
    		var form_height = document.getElementById("form").offsetHeight;
    		var table_height = "full-" + form_height;
    		var form_width = document.getElementById("form").offsetWidth;
    		util = layui.util,
    		rederSelect("bas_org","#org_modules","");
    		form.on('select(org_modules)',function(obj){
    			pkorg = obj.value;
    		});
    		rederSelectPko("aaa","#pkog","产品");
    		form.on('select(pkog)',function(obj){
    			pkog = obj.value;
    		});
    		/* 渲染 select */
          function rederSelect(tablename,div_id,selectValue){
    	      $.ajax({
    			url:"${pageContext.request.contextPath}/common/dicData/getTypeAlls2",
    			type:"POST",
    		    dataType:"json",
    		    data:{
    		       'filedname':'<%=session.getAttribute("pkorg")%>'
    		    },
    		    async: true,
    	  		success:function(requestData){
    	  			var o_html ="";
    	 	        for(var i = 0; i < requestData.obj.length+1; i++) {
    	    	        if (i == 0){
    	          	        //o_html += '<option value="" selected="">选择'+selectValue+'</option>';
    	          		}else{
    	             	    var sys = requestData.obj[i-1];
    	              	     o_html += '<option value=' + sys.filedname + '>' + sys.text + '</option>';
    	              	}
    	           	}
    	            $(div_id).append(o_html);
    		        form.render('select');
    	  		          },error:function(){
    	  		        }
    	        })
    	    }   //pko 网格获取
    	    function rederSelectPko(tablename,div_id,selectValue){
    	      $.ajax({
    			url:"${pageContext.request.contextPath}/manage/CusSearchController/getProduct",
    			type:"POST",
    		    dataType:"json",
    		    data:{},
    		    async: true,
    	  		success:function(table){
    	  			var o_html ="";
    	 	        for(var i = 0; i < table.data.length+1; i++) {
    	    	        if (i == 0){
    	          	        o_html += '<option value="" selected="">选择类型</option>';
    	          		}else{
    	             	    var sys = table.data[i-1];
    	              	    o_html += '<option value=' + sys.pkbp + '>' + sys.bpname + '</option>';
    	              	}
    	           	}
    	            $(div_id).append(o_html);
    		        form.render('select');
    	  		          },error:function(){
    	  		        }
    	        })
    	    }
    	    
    	    //定义一个固定表头
    	    var col = [ //表头
    				{
    					title : '序号',
    					type : 'numbers',
    					fixed : 'left',
    					width : 80,
    					align : 'center',
    				},
    	            {
    	                field: 'CUSTOMERNAME',
    	                title: '客户名称',
    	                minWidth: 120,
    	                align: 'center'
    	            },{
    	                field: 'ORGNAME',
    	                title: '所属机构',
    	                align: 'center',
    	                minWidth: 170,
    	            },
    	            {
    	                field: 'MOBILEPHONENO',
    	                title: '手机号码',
    	                align: 'center',
    	                minWidth: 120
    	            }
    				]
    		table.render({elem : '#test',
    			url: "${pageContext.request.contextPath}/manage/CusOverheadAccountRecordController/getCusOverheadAccountRecord",
    			type : 'POST',
    			dataType : 'JSON',
    			request : {
    				pageName : 'page',
    				limitName : 'rows'
    			},
    			where : {
    				pkorg : pkorg,
    				selectArr:"[]"
    			},
    			cellMinWidth : 95,
    			height : table_height,
    			width : form_width,
    			page : true,
    			id : 'newsListTable',
    			limit : 20,
    			limits : [ 10, 20, 30, 40, 50 ],
    			cols :[col]
    			});
    			var indexload;
    			$(".search_btn_reload").on("click",function(){
    			indexload = layer.load(2, {time: 10*10000});
         	});
         	
         	//组件获取多选值
    		document.getElementById('demo1-getValue').onclick = function(){
    		    //获取当前多选选中的值
    		    var selectArr = demo1.getValue();
    		    reloadesData(selectArr);
    		}
    		
         	window.reloadesData = function(selectArr){
         			var colss = [ //表头
    				{
    					title : '序号',
    					type : 'numbers',
    					fixed : 'left',
    					width : 80,
    					align : 'center',
    				},
    	            {
    	                field: 'CUSTOMERNAME',
    	                title: '客户名称',
    	                minWidth: 120,
    	                align: 'center'
    	            },{
    	                field: 'ORGNAME',
    	                title: '所属机构',
    	                align: 'center',
    	                minWidth: 170,
    	            },
    	            {
    	                field: 'MOBILEPHONENO',
    	                title: '手机号码',
    	                align: 'center',
    	                minWidth: 120
    	            }
    				]
         		//对所选的数组进行遍历,然后进行push拼接动态表头
    		    for(var i =0;i<selectArr.length;i++) {
    			   	colss.push({field: selectArr[i].value, title: selectArr[i].name, width: '120', align:'center'});
    		    }
    
    			/**
    			1:arr是一个对象集合。或者是你要需要的目标的集合
    			2:push()方法是数组的栈底添加 意思是往数组的底部添加
    			3:unshift()方法是数组的栈顶添加 意思是往数组的头部添加
    			**/
    			var arr = [];
    			for(var i =0;i<selectArr.length;i++){
    				arr.push(selectArr[i].value);
    				//arr.unshift(selectArr[i].value);
    			};
    			table.render({elem : '#test',
    			url: "${pageContext.request.contextPath}/manage/CusOverheadAccountRecordController/getCusOverheadAccountRecord",
    			type : 'POST',
    			dataType : 'JSON',
    			request : {
    				pageName : 'page',
    				limitName : 'rows'
    			},
    			where : {
    				pkorg:pkorg,
    	            selectArr:JSON.stringify(arr)
    			},
    			cellMinWidth : 95,
    			height : table_height,
    			width : form_width,
    			page : true,
    			id : 'newsListTable',
    			limit : 20,
    			limits : [ 10, 20, 30, 40, 50 ],
    			cols :[colss],
    			parseData: function(res){ //res 即为原始返回的数据
    	            	if(res.msg != ""){
    	            		layer.msg(res.msg, {
    						  icon: 6,
    						  time: 1000 //2秒关闭(如果不配置,默认是3秒)
    						}, function(){
    	            		  //window.location.reload();
    						})
    	            	};
    	            	layer.close(indexload);
    			    }
    			});
         	}
     })
    	</script>
    
    </body>
    </html>
    
    展开全文
  • Layui表格添加行删除保存代码是一款可用于对表格数据快速维护,展示修改功能,灵活自如。
  • 关于layui动态添加表单(干货)

    万次阅读 热门讨论 2019-07-22 10:16:35
    ** 1. 首先说下需求,最近做的是一个招聘系统,需要录入应聘者的信息,为了人性化我们需要动态添加表单!**

    首先说下需求,最近做的是一个招聘系统,需要录入应聘者的信息,为了人性化我们需要动态的添加表单!

    来张截图看下
    动态表单
    表单里面有日期,下拉选和输入框,点击添加按钮会出来下一行
    动态表单

    看下具体实现吧!

    首先,点击添加一行需求内容这个不难。

    function addstrs1(i) {
            let  iNums = getRandomNum();
            let strs1;
                 strs1 = '<tr>\n' +
                     '                            <td style="display: none">\n' +
                     '                                <input type="text" name="number1" value="'+i+'">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text"  name="StartTime" class="layui-input" id="test1'+iNums+'" >\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="EndTime" class="layui-input" id="test2'+iNums+'" >\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="Major" class="layui-input">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <select name="Education" lay-filter="">\n' +
                     '                                    <option value="">请选择你的学历</option>\n' +
                     '                                    <option value="大专及以下">大专及以下</option>\n' +
                     '                                    <option value="本科">本科</option>\n' +
                     '                                    <option value="研究生(硕士)">研究生(硕士)</option>\n' +
                     '                                    <option value="研究生(博士)">研究生(博士)</option>\n' +
                     '                                </select>\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="SchType" class="layui-input">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <select name="Education" lay-filter="">\n' +
                     '                                    <option value="">请选择您的教育类型</option>\n' +
                     '                                    <option value="全日制">全日制</option>\n' +
                     '                                    <option value="在职">在职</option>\n' +
                     '                                </select>\n' +
                     '                            </td>\n' +
                     '                            <td style="text-align: center"><button type="button" class="layui-btn layui-btn-danger btn-del">删除</button></td>\n' +
                     '                        </tr>';
            $('.addlists').append(strs1);
    

    这个函数是点击按钮后执行,创建下一行内容。
    没错,这样创建后并不能实现layui表单该有的功能,查看了下官方文档有这么一句话:
    更新渲染

    1.有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。
    layui官方文档
    为了使新加入的表单元素有layui的样式效果,(在这里说明下,我使用的是非模块化渲染),
    我在addlists1这个函数后面 加了一段代码

     //重新渲染
            laydate.render({
                elem: '#test1'+iNums//#test1是input框的id,iNums是一个随机数,避免重复id
                ,trigger: 'click' //采用click弹出
            });
            laydate.render({
                elem: '#test2'+iNums
                ,trigger: 'click' //采用click弹出
            });
    

    这里把具体代码给出

    //直接在jquery里面写,这里我是引入了jquery.min.js文件,
    //虽说layui.all.js里面有jquery但是好像会报$ 未定义
    $(function () {
        let form = layui.form
            ,laydate = layui.laydate,
            laypage = layui.laypage,
            layer = layui.layer,
            table = layui.table;//非模块化加载相应的依赖
        //常规用法
        laydate.render({
            elem: '#test1'//日期框id
        });
        laydate.render({
            elem: '#test2'//日期框id
        });
    
    
    
    
        let i=1;//为了给后台传值方便记录每条记录的number值
        $('.add-btn').click(function () {
            i++;
            addstrs1(i);//增加一条内容函数
            form.render();//每次点击添加按钮就会重新渲染一次
            //这个并不能解决日期框的弹出但是可以让下拉选有效果
        });
    
    		//下面整个是弹出询问框是否删除,
        $('body').on("click",".btn-del",function () {
             var pre = $(this);//这里获取点击当前行,就是要删除此行把此行的属性交给变量pre
            layer.confirm('确定要删除么?',{
                    btn:['确定','取消']
            },function () {
            //为什么这个里不能直接用this表示当前行,因为作用域不一样,通过变量传递的方式获取当前行
                $(pre).parent().parent().remove();//这里是移除当前删除行的内容
                layer.closeAll('dialog');//这里是点击确定删除后关闭整个弹出层
            })
        });
    
    		//产生随机数函数
        function getRandomNum() {
            return parseInt(Math.random()*50);
        }
        //动态添加一行内容的函数
        function addstrs1(i) {
            let  iNums = getRandomNum();//获取随机数
            let strs1;
                 strs1 = '<tr>\n' +
                     '                            <td style="display: none">\n' +
                     '                                <input type="text" name="number1" value="'+i+'">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text"  name="StartTime" class="layui-input" id="test1'+iNums+'" >\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="EndTime" class="layui-input" id="test2'+iNums+'" >\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="Major" class="layui-input">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <select name="Education" lay-filter="">\n' +
                     '                                    <option value="">请选择你的学历</option>\n' +
                     '                                    <option value="大专及以下">大专及以下</option>\n' +
                     '                                    <option value="本科">本科</option>\n' +
                     '                                    <option value="研究生(硕士)">研究生(硕士)</option>\n' +
                     '                                    <option value="研究生(博士)">研究生(博士)</option>\n' +
                     '                                </select>\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <input type="text" name="SchType" class="layui-input">\n' +
                     '                            </td>\n' +
                     '                            <td>\n' +
                     '                                <select name="Education" lay-filter="">\n' +
                     '                                    <option value="">请选择您的教育类型</option>\n' +
                     '                                    <option value="全日制">全日制</option>\n' +
                     '                                    <option value="在职">在职</option>\n' +
                     '                                </select>\n' +
                     '                            </td>\n' +
                     '                            <td style="text-align: center"><button type="button" class="layui-btn layui-btn-danger btn-del">删除</button></td>\n' +
                     '                        </tr>';
            $('.addlists').append(strs1);
            //重新渲染
            laydate.render({
                elem: '#test1'+iNums  //这里加上随机数的原因是为了让日期框能显示出来,
                //每次点击添加就会给input加上一个新的id,让后就会继续渲染下一行里面的日期
                //很好的解决了,日期框闪现消失,或者根本不出现的情况,根本原因在于id一样。
                ,trigger: 'click' //采用click弹出
            });
            laydate.render({
                elem: '#test2'+iNums
                ,trigger: 'click' //采用click弹出
            });
        }
    
    
    
    })
    

    上面就是动态添加表单的全部内容了。有什么问题可以评论哦

    展开全文
  • layui 动态添加多个日期选择控件

    万次阅读 2018-09-11 15:18:19
    作为 layui 2.0 的核心组成之一,layDate 也是今非昔比了。 看到这么简洁的界面和完善的文档我反手就是一个赞! 页面中有一两个日期选择器的时候,处理还比较方便。 ...初始状态下只有这一...

    作为 layui 2.0 的核心组成之一,layDate 也是今非昔比了。
    看到这么简洁的界面和完善的文档我反手就是一个赞!
    页面中有一两个日期选择器的时候,处理还比较方便。
    详细请见官方文档:https://www.layui.com/doc/modules/laydate.html
    可是当我们在同一个表单中初始化多个日期时,就会比较麻烦了,在这个过程中遇到一些问题。
    诸如下图此类情况:
    初始状态下只有这一行数据
    表格中添加日期控件
    当我们点击新增按钮时会添加一行
    表格中添加日期控件
    我最初的思路是动态拼接id值,比如在id的后面的加一个变量,变量值随着每次的新增而增加,但是在当前这种场景下使用这种方式还是有点繁琐。
    下面呢就通过一个简单的例子详细介绍下另外一种实现过程:

    html

    <table>
    	<thead>
    		<tr>
    			<th>开始时间</th>
    			<th>结束时间</th>
    		</tr>
    	</thead>
    	<form action="">
    	<tbody id="tableContent">
    	<tr>
    		<td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
    		<td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
    	</tr>
    	</tbody>
    	</form>
    </table>
    

    js

    <script src="/xxx/layui.js"></script>
    <script>
    //主要是用到laydate
    layui.use( 'laydate', function () {
    	var laydate = layui.laydate;
    	//核心方法
    	function timeAdd(){
             lay('.datetime').each(function() {
                 laydate.render({
                     elem : this,
                     trigger : 'click'
                 });
             });
         }
         //初始化时先调用一次,确保静态的那一行可点
         timeAdd();
         //给新增按钮添加点击事件
         $('.addBtn').click(function(){
    	     tableHtml2 = "<tr>
    		<td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
    		<td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
    	</tr>";
    	     $("#tableContent").append(tableHtml)
             form.render(); 
             timeAdd()
         })
    })
    </script>
    

    大体的意思基本就是这些了,总之一句话,重点关注timeAdd()方法的调用。

    展开全文
  • layui动态合并

    2020-04-30 14:10:05
    done: function (res, curr, count) { console.log(res.data) ...//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数 var columsName ...
    done: function (res, curr, count) {
    					console.log(res.data)
    					var data = res.data;
    					var mergeIndex = 0;//定位需要添加合并属性的行数
    					var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
    					var columsName = ['fh_time', 'factory_name', 'plate_number', 'driver_phone', 'container_number', 'tenor_number', 'tenor_number'];//需要合并的列名称
    					var columsIndex = [0, 1, 2, 3,4,5,6,7,8,9];//需要合并的列索引值
    
    					for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
    						var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
    						for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
    							var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
    							var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
    
    							if (data[i]['bill_id'] === data[i - 1]['bill_id']) { //后一行的值与前一行的值做比较,相同就需要合并
    								mark += 1;
    								//相同列的第一列增加rowspan属性
    								tdPreArr.each(function () {
    									$(this).attr("rowspan", mark);
    								});
    								//当前行隐藏
    								tdCurArr.each(function () {
    									$(this).css("display", "none");
    								});
    							} else {
    								mergeIndex = i;
    								mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
    							}
    						}
    						mergeIndex = 0;
    						mark = 1;
    					}
    				}

    可以关注我的公众号:技术趣谈

    展开全文
  • layui 动态添加select不显示

    千次阅读 2019-03-22 16:29:12
    需要render 一下,重新渲染 $("#add").click(function() { $("#famliy-table").append(tr); form.render('select') deleteTr() }) https://www.layui.com/doc/modules/form.html ...
  • 静态表格:价格操作添加删除添加操作://因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});$('body').on('click', '.add', function() {//你要添加的htmlvar html = ''+''+''+'添加'+...
  • 效果图 **功能描述:**点击新增按钮,该table之后新增一个同样... ...<table border="1" class="layui-table"> <tr> <td>问题描述</td> <td> <div class="layui-form-item"> &
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8">...layui动态添加删除表格,并获取表格中的值</title> <meta name="renderer" content="webkit"> <...
  • 页面上的radio选项是动态生成的,默认生成的都是不被选中的,编辑的时候会从后台拿到选中的记录ID通过form.val方法赋值最后调用 form.render(‘radio’) 重新渲染。 发现始终都选不上,最后发现后台传输给前台的json...
  • 【教程】layui动态表格添加

    千次阅读 2019-03-22 13:37:13
    【场景】页面调用数据表格,在工具栏提供添加按钮,点击添加按钮,在页面弹出层,在层内添加新内容,点击保存按钮,添加到数据库后,在数据表格中新增一【解决方案】1设置数据表格实例时添加id属性table.render({ ...
  • 【功能】layui动态添加表单行多表单提交验证 DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单title> <meta name="renderer" content="webkit"> ,chrome=1"> , initial-scale=1, maximum-scale=...
  • 今天小编就为大家分享一篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 没效果请留言,反正我的是有效果 /*选中样式*/ .layui-table-click{ background-color:#ddf2e9 !important; } ...table class="layui-hide" id="demo" lay-filter="test">... //动态添加背景色 obj.tr.s
  • 在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(".add_project").on('click', function(){ ...
  • 基于layui动态添加条件查询ui插件

    万次阅读 多人点赞 2018-11-05 17:52:48
    体验地址:动态添加条件查询Demo 动态添加条件界面 点击查询生成请求json对象requestData 示例代码: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;...
  • Layui数据表格动态添加问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格...
  • layui 动态删除一

    2021-01-05 08:40:48
    $table.on('tool(currentTableFilter)', function (obj) { $.modalConfirm("是否确认删除?", function (r) { if (r) { var cacheData ... //获取索引 cacheData.splice(rowIndex, 1); //彻底移除元素 } }); });
  • layui table 动态增加

    万次阅读 2019-01-02 19:48:14
    目前layui动态数据表格功能已经是否强大了,但是目前还没有动态增加的功能,这里自己写了一个对象来实现动态增加。   上代码  AddRow = (function(){ var addRowArray = []; var addRowIndex = 0; ...
  • Layui动态表格

    2021-06-08 09:38:46
    开发工具与关键技术:Eclipse软件,layui动态表格 作者:陈隆 撰写时间:2021年06月08日 在使用Layui的表格中,其实动态表格也是一个非常不错的一种表格,这动态表格的用法其实就是根据你选择的条件来进行同步的,...
  • 项目需求:动态的增加表格数据,并且单元格允许支持下拉框。 解决步骤: 1、编写表格头部内容 <hr class="layui-bg-green"> <div class="layui-form-item"> <div class="l...
  • 记录:layui 实现table动态增加与列功能。 需求图示: 效果展示: HTML代码示例: <div class="layui-form-item"> <label class="layui-form-label required">物流费用</label> <div ...
  • layui table动态新增

    千次阅读 2020-08-24 09:26:03
    button class="layui-btn layui-btn-sm" data-type="reload" onclick="addFunctionModule()" lay-event="addFunctionModule">新增</button> /** * 新增 */ addFunctionModule = function ...
  • 一款基于layui、vue、jQuery改写的动态表格数据选择添加穿梭框代码,测试用的json数据需要本地服务器才能运行,火狐浏览器可直接运行。查看演示下载资源:41次 下载资源下载积分:20积分js代码 var myVue = new Vue...
  • //最后放入layui的表格属性中 cols: [ ColsList ], 4,知识笔记 4.1,splice 语法: // 索引从0开始计数 arrayObject.splice(索引,删除项目数量,添加新项目1,…,添加新项目n) 4.2,push 语法: arrayObject.push...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,063
精华内容 425
关键字:

layui动态添加行