需求:根据选择查询条件,动态添加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>

首先说下需求，最近做的是一个招聘系统，需要录入应聘者的信息，为了人性化我们需要动态的添加表单！
 
来张截图看下
 
 表单里面有日期，下拉选和输入框，点击添加按钮会出来下一行
 
 
看下具体实现吧！
 
首先，点击添加一行需求内容这个不难。
 
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的样式效果，（在这里说明下，我使用的是非模块化渲染），
 我在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 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()方法的调用。

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;
					}
				}
 
可以关注我的公众号：技术趣谈