layui table 动态追加行与列

记录：layui 实现table动态增加行与列功能。
需求图示：

效果展示：

HTML代码示例：

  <div class="layui-form-item">
      <label class="layui-form-label required">物流费用</label>
      <div class="layui-input-inline">
          <select name="wuliu_style" lay-verify="required" lay-filter="wuliu_style">
              <option value="">请选择计费方式</option>
              {:get_status_option(0,'yunshu_wuliu_type')}
          </select>
      </div>
  </div>
  <!-- 按吨计费 -->
  <div class="layui-form-item dun_price_div">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
          <table id="dun_table" class="table layui-table">
			<thead>
				<tr>
					<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>
                        第 1 区间
                    </td>
                    <td>
                        <div class="layui-row layui-col-xs12">
                            <select name="wuliu_style_dun[0][fuhao]" lay-filter="jianhuo_style_fuhao">
                                <option value="">请选择</option>
                                {:get_status_option(1,'jianhuo_style_fuhao')}
                            </select>
                        </div>
                    </td>
					<td>
                        <div class="div_T1T2">
                            <div class="layui-row layui-col-xs5">
                                <input type="text" name="wuliu_style_dun[0][min_t]" class="layui-input" lay-reqtext="最小值T1" placeholder="最小值T1" value="">
                            </div>
                            <div class="layui-row layui-col-xs1 centerText">
                                -
                            </div>
                            <div class="layui-row layui-col-xs5">
                                <input type="text" name="wuliu_style_dun[0][max_t]" class="layui-input" lay-reqtext="最大值T2" placeholder="最大值T2" value="">
                            </div>
                        </div>
                        <div class="div_T">
                            <div class="layui-row layui-col-xs11">
                                <input type="text" name="wuliu_style_dun[0][t]" class="layui-input" lay-reqtext="值T" placeholder="值T" value="">
                            </div>
                        </div>
                    </td>								
                    <td style="width: 50px; border: none;">
                        <button type="button" class="layui-btn layui-btn-xs add" onclick="addWuliuStyleDunFunc($(this))">+</button>
                    </td>
				</tr>
			</tbody>
		</table>
     </div>
 </div>
 <div class="layui-form-item dun_price_div">
     <label class="layui-form-label"></label>
     <div class="layui-input-block">
         <table id="duntable" lay-filter="duntable" class="layui-table" style="table-layout: fixed;">
         </table>
     </div>
 </div>

<!-- 选择省份 -->
<div id="openProvinceBox" style="display: none; padding: 10px;">
    <form id="app-form1" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">选择省</label>
            <div class="layui-input-block">
                <select name="provice" id="provid" lay-filter="provid">
                    <option value="">请选择省</option>
                    {$provAreaInfo|raw}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择市</label>
            <div class="layui-input-block">
                <select name="city" id="cityid" lay-filter="cityid">
                    <option value="">请选择市</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择县/区</label>
            <div class="layui-input-block">
                <select name="area" id="areaid" lay-filter="areaid">
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm confirm_provice">确认</button>
        </div>
    </form>
</div>

JS代码：

<script src="__STATIC__/jquery.min.js?v={$version}" charset="utf-8"></script>
<script src="__STATIC__/common/js/reg.js" charset="utf-8"></script>
<!-- tables：新增地区按钮 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm add-goods" lay-event="add"><i class="fa fa-plus"></i> 新增地区</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm table_tips"> 注意价格优先级：县区 > 市 > 省</button>
    </div>
</script>
<!-- tables：删除地区按钮 -->
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<!-- tables：按吨计费价格input框 -->
<script type="text/html" id="inputNumber">
    <input type="text" name="proviceDunArr[{{d.id}}][price_1]" class="layui-input" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="{{d.price_1}}">
    <input type="hidden" name="proviceDunArr[{{d.id}}][provice]" value="{{d.provice}}">
    <input type="hidden" name="proviceDunArr[{{d.id}}][city]" value="{{d.city}}">
    <input type="hidden" name="proviceDunArr[{{d.id}}][area]" value="{{d.area}}">
</script>
<script>
//JavaScript代码区域
layui.use(['element', 'table', 'form'], function () {
	var element = layui.element,
		table = layui.table
        , form = layui.form
        ,laydate = layui.laydate

    //监听切换 物流费率计费方式 选择框
    form.on('select(wuliu_style)', function (data) {
        if(data.value == 1){
            $('.dun_price_div').show();
            $('.jian_price_div').hide();
            $('.car_price_div').hide();
            $('.lifang_price_div').hide();
        }else if(data.value == 2){
            $('.lifang_price_div').show();
            $('.dun_price_div').hide();
            $('.jian_price_div').hide();
            $('.car_price_div').hide();
        }else if(data.value == 3){
            $('.jian_price_div').show();
            $('.car_price_div').hide();
            $('.dun_price_div').hide();
            $('.lifang_price_div').hide();
        }else if(data.value == 4){
            $('.car_price_div').show();
            $('.jian_price_div').hide();
            $('.dun_price_div').hide();
            $('.lifang_price_div').hide();
        }else{
            $('.jian_price_div').hide();
            $('.car_price_div').hide();
            $('.dun_price_div').hide();
            $('.lifang_price_div').hide();
        }
    });
    //确认添加地区
    $('.confirm_provice').click(function(){
        var provice=$("select[name=provice]").val();
        if(!provice){
            layer.msg('请选择省份',{icon:2,time:2000}); //错误提示
            return false;
        }
        var city=$("select[name=city]").val();
        var area=$("select[name=area]").val();
        var name = provice;
        if(city){
            name += '-'+city;
        }
        if(area){
            name += '-'+area;
        }        
        //向table中追加一条数据
        var wuliu_style=$("select[name=wuliu_style]").val();
        var tableTD = '';
        if(wuliu_style == 1){
            tableTD = "duntable";
        }else if(wuliu_style == 2){
            tableTD = "lifangtable";
        }
        var Data = table.cache[tableTD];
        if(Data.length == 0){
            var id = 1;
        }else{
            for (var i = 0; i < Data.length; ++i) {
                if(Data[i]['name'] == name){
                    layer.msg('此地区已存在,不可重复添加',{icon:2,time:2000}); //错误提示
                    return false;
                }
            }
            var endData = Data[Data.length-1];
            var id = endData['id'] + 1;
        }
        //关闭layui弹窗
        layer.close(index);
        $('#openProvinceBox').hide();
        var ProductData = {id:id,name:name,provice:provice,city:city,area:area};
        if(wuliu_style == 1){
            for (var j = 0; j < col[0].length; ++j) {
                var field = col[0][j]['field'];
                if(field && field != 'left' && field != 'name'){
                    ProductData[field] = '';
                }
            }
            Data.push(ProductData);
            tables.reload({
                data: Data
            });
        }else if(wuliu_style == 2){
            for (var j = 0; j < col_lifang[0].length; ++j) {
                var field = col_lifang[0][j]['field'];
                if(field && field != 'left' && field != 'name'){
                    ProductData[field] = '';
                }
            }
            Data.push(ProductData);
            table_lifang.reload({
                data: Data
            });
        }
    });
    /**
     * 物流费用 - 按吨计费
     */
    //渲染table默认列
    var tables;
    var col = [[
            {fixed: 'left', toolbar: '#bar', title: '操作', width: 100, align: 'center' }, 
            {field: "name", title: "地区"}
            , {field: "price_1", title: "第 1 区间价格(元)", templet: '#inputNumber', align: "center", edit:'text'}
        ]];   
    tables = table.render({
        elem: "#duntable"
        , id: 'duntable'
        ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: false //开启右边按钮
        , data: []
        , cols: col
        , page: false //是否分页
        , done: function (res, curr, count) {
            console.log('table渲染',count)
        }
        , even: true
    });
    //监听删除地区一行操作
    table.on('tool(duntable)', function (obj) {
        if (obj.event === 'del') {
            var Data = table.cache["duntable"];
            Data.splice(obj.tr.data('index'), 1)//根据索引删除当前行
            tables.reload({
                data: Data
            });
        }
    });
    //监听编辑
    table.on('edit(duntable)', function (obj) {
        //获取当前行索引
        var tr_index = obj.tr.data("index");
        //获取当前编辑的字段名
        var field = obj.field;
        console.log(field)
        //获取编辑之前的值
        var selector = obj.tr.selector+' td[data-field="'+field+'"]';
        var oldtext = '';
        var number = $.trim(obj.value);
        if(!isNumberPos(number)) {
            layer.msg('请输入非负数',{icon:2,time:2000}); //错误提示
            //更新数据缓存
            table.cache["duntable"][tr_index][field] = oldtext;
            //更新edit隐藏input框的值，赋值回原本的值，重点
            $('input.layui-table-edit',selector).val(oldtext);
            return false;
        }
    });
    //监听新增地区按钮操作
    var index;
    table.on('toolbar(duntable)', function (obj) {
        //var data = obj.data;
        if (obj.event === 'add') {            
            //打开地区选择框
            index = layer.open({
                type: 1,
                title: '选择地区',
                area: ['500px', '500px'], //宽高
                content: $('#openProvinceBox'),
                end: function() { 
                },
                success: function() {                    
                },
                cancel: function(){
                    // 右上角关闭事件的逻辑
                    $('#openProvinceBox').hide();
                }
            });
            return false; 
        }
    });
    //按吨物流费率 - 加
    addWuliuStyleDunFunc = 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 qujian_num = nextLine + 1;
        var tr = '<tr data-line='+nextLine+'>'+
                    '<td>'+
                        '第 '+qujian_num+' 区间'+  
                    '</td>'+
                    '<td>'+
                        '<div class="layui-row layui-col-xs12">'+       
                            '<select name="wuliu_style_dun['+nextLine+'][fuhao]" lay-filter="jianhuo_style_fuhao">'+
                                '<option value="">请选择</option>'+
                                '{:get_status_option(1,"jianhuo_style_fuhao")}'+
                            '</select>'+
                        '</div>'+
                    '</td>'+	
                    '<td>'+
                        '<div class="div_T1T2">'+
                            '<div class="layui-row layui-col-xs5">'+
                                '<input type="text" name="wuliu_style_dun['+nextLine+'][min_t]" class="layui-input" lay-reqtext="最小值T1" placeholder="最小值T1" value="">'+
                            '</div>'+
                            '<div class="layui-row layui-col-xs1 centerText">'+
                                '-'+
                            '</div>'+
                            '<div class="layui-row layui-col-xs5">'+
                                '<input type="text" name="wuliu_style_dun['+nextLine+'][max_t]" class="layui-input" lay-reqtext="最大值T2" placeholder="最大值T2" value="">'+
                            '</div>'+
                        '</div>'+
                        '<div class="div_T">'+
                            '<div class="layui-row layui-col-xs11">'+
                                '<input type="text" name="wuliu_style_dun['+nextLine+'][t]" class="layui-input"  lay-reqtext="值T" placeholder="值T" value="">'+
                            '</div>'+
                        '</div>'+
                    '</td>'+					
                    '<td style="border: none;">'+
                        '<button type="button" class="layui-btn layui-btn-xs add" οnclick="addWuliuStyleDunFunc($(this))">+</button>'+
                        '<button type="button" class="layui-btn layui-btn-xs delete" οnclick="deleteWuliuStyleDunFunc($(this))">-</button>'+
                    '</td>'+
                '</tr>';
        tbody.append(tr);
        form.render();
        //隐藏此行的加号,减号
        t.hide();
        t.next().hide();

        /**
         * 动态增加列
         */
        var subjectField = ["price_"+qujian_num];
        var subjectTitle = ['第 '+qujian_num+' 区间价格(元)'];
        //给tableData动态添加数据
        var tableData = table.cache["duntable"];
        for (var i = 0; i < subjectField.length; ++i) {
            for (var j = 0; j < tableData.length; ++j) {
                tableData[j][subjectField[i]] = '';
            }
        }
        //动态添加列属性
        for (var i = 0; i < subjectField.length; ++i) {
            //向数组插入元素：splice(index, howmany, items...)
            //col[0],注意col是二维数组
            var a = subjectField[i];
            col[0].splice(col[0].length, 0, {field: subjectField[i], title: subjectTitle[i], templet: function(d){
                console.log(666,qujian_num)
                return '<input type="text" name="proviceDunArr['+d.id+'][price_'+qujian_num+']" class="layui-input" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="'+d[a]+'">';
            }, align: "center", edit:'text'});
        }
        tables.reload({
            data: tableData
            , cols: col
        });
    }
    //按吨物流费率 - 减
    deleteWuliuStyleDunFunc = function (t){
        var thisHang = t.parent().parent();
        var tbody = thisHang.parent();
        //移除次行
        thisHang.remove();
        //最后一行的‘+’和‘-’显示
        $('tr:last',tbody).find('.add').show();
        $('tr:last',tbody).find('.delete').show();

        /**
         * 动态减少列
         */
        col[0].pop();
        //处理数据
        var Data = table.cache["duntable"];
        tables = table.render({
            elem: "#duntable"
            , id: 'duntable'
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            , data: Data
            , cols: col
            , page: false //是否分页
            , even: true
        });
    }
          
    // 选择省
	form.on('select(provid)', function(data){
		layer.load(1);//加载中
		var p1=data.value;
		$.ajax({
			url: "get_area_info",
			type: 'POST',
			async: true,
			data: {p1:p1},
			success: function (datas) {
				var data = JSON.parse(datas);
				$("#cityid").empty();
				$("#areaid").empty();
				$("#cityid").append('<option value="">请选择市</option>');
				$("#areaid").append('<option value="">请选择县/区</option>');
				$("#cityid").append(data.option);
				form.render('select');
				layer.closeAll('loading');
			}
		});
	});
	// 选择市
	form.on('select(cityid)', function(data){
		layer.load(1);
		var p1=data.value;
		$.ajax({
			url: "get_area_info",
			type: 'POST',
			async: true,
			data: {p1:p1},
			success: function (datas) {
				var data = JSON.parse(datas);
				$("#areaid").empty();
				$("#areaid").append('<option value="">请选择县/区</option>');
				$("#areaid").append(data.option);
				form.render('select');
				layer.closeAll('loading');
			}
		});
	});

    
})
</script>