layui table 渲染动态列及列数据

记录：接上篇博文，记录table 渲染动态列及列数据
图示：

HTML代码：

<div class="layui-form-item dun_price_div" {if condition="($row.wuliu_style != 1)"}style="display:none"{/if}><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>

Js代码：

<!-- tables：按吨计费价格input框 -->
<script type="text/html" id="inputNumber"><input type="text" name="proviceDunArr[{{d.id}}][price_1]" class="layui-input"   onblur="dunPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="{{d.price_1}}"><input type="text" name="proviceDunArr[{{d.id}}][songhuo_1]" class="layui-input songhuoInput" onblur="dunsonghuoPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入送货费" placeholder="请输入送货费" value="{{d.songhuo_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//确认添加地区$('.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;}    var provinceType = $('input[name=provinceType]').val();      var provinceTypeZhu = $('input[name=provinceTypeZhu]').val();//向table中追加一条数据if(provinceType == 'a'){    //物流费用var wuliu_style=$("select[name=wuliu_style]").val();var tableTD = '';if(wuliu_style == 1){tableTD = "duntable";}else if(wuliu_style == 2){tableTD = "lifangtable";}else if(wuliu_style == 3){tableTD = "jiantable";}else if(wuliu_style == 4){tableTD = provinceTypeZhu;}}else{  //快递费用var tableTD = provinceType;}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();if(provinceType == 'a'){   //物流费用var ProductData = {id:id,name:name,provice:provice,city:city,area:area};var wuliu_style=$("select[name=wuliu_style]").val();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] = '';// 追加送货费if(field.indexOf('price_') >= 0){var qujian = field.substring(field.indexOf('_')+1,field.length);ProductData['songhuo_'+qujian] = 0;}}}Data.push(ProductData);tables.reload({data: Data});} }});/*** 物流费用 - 按吨计费*///渲染table默认列var tables;var wuliuDunPriceArr = {$wuliuDunPriceArr|raw};   //原始数据var dunCount = {$dunCount}; //区间数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'}]]; //根据区间数动态增加列显示默认数据var dunField = [];var dunTitle = [];var qujian_num=2;for (qujian_num; qujian_num <= dunCount; ++qujian_num) {dunField.push("price_"+qujian_num);dunTitle.push('第 '+qujian_num+' 区间价格(元)');}//动态添加列属性for (var i = 0; i < dunField.length; ++i) {//向数组插入元素：splice(index, howmany, items...)//col[0],注意col是二维数组col[0].splice(col[0].length, 0, {field: dunField[i], title: dunTitle[i], templet: function(d,field){var name = field.field;var num1 = name.substr(name.lastIndexOf("_")+1);var songhuo_name = 'songhuo_'+num1;return '<input type="text" name="proviceDunArr['+d.id+']['+name+']" class="layui-input"  οnblur="dunPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="'+d[name]+'"><input type="text" name="proviceDunArr['+d.id+']['+songhuo_name+']" class="layui-input songhuoInput"  οnblur="dunsonghuoPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入送货费" placeholder="请输入送货费" value="'+d[songhuo_name]+'">';}, align: "center"});}tables = table.render({elem: "#duntable", id: 'duntable',toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板,defaultToolbar: false //开启右边按钮, data: wuliuDunPriceArr    //默认渲染数据, 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});}});//监听编辑价格dunPriceFun = function (t){var inputName = t.attr("name");var num1 = inputName.substr(inputName.lastIndexOf("_")+1);var num = num1.substr(0,num1.lastIndexOf("]"));var field = 'price_'+num;var number = $.trim(t.val());var thisHang = t.parent().parent().parent();var tr_index = thisHang.data("index");var oldtext = 0;if(!isNumberPos(number)) {layer.msg('请输入非负数',{icon:2,time:2000}); //错误提示//更新数据缓存table.cache["duntable"][tr_index][field] = oldtext;var Data = table.cache["duntable"];tables.reload({data: Data});return false;}//更新数据缓存table.cache["duntable"][tr_index][field] = number;     var Data = table.cache["duntable"];tables.reload({data: Data}); };//监听编辑dunsonghuoPriceFun = function (t){var inputName = t.attr("name");var num1 = inputName.substr(inputName.lastIndexOf("_")+1);var num = num1.substr(0,num1.lastIndexOf("]"));var field = 'songhuo_'+num;var number = $.trim(t.val());var thisHang = t.parent().parent().parent();var tr_index = thisHang.data("index");var oldtext = 0;if(!isNumberPos(number)) {layer.msg('请输入非负数',{icon:2,time:2000}); //错误提示//更新数据缓存table.cache["duntable"][tr_index][field] = oldtext;var Data = table.cache["duntable"];tables.reload({data: Data});return false;}//更新数据缓存table.cache["duntable"][tr_index][field] = number;     var Data = table.cache["duntable"];tables.reload({data: Data}); };//监听新增地区按钮操作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 >= 10){layer.msg('最多添加10条区间');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" style="display: none;">'+'<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 songhuoField = "songhuo_"+qujian_num;var subjectField = "price_"+qujian_num;var subjectTitle = '第 '+qujian_num+' 区间价格(元)';      //给tableData动态添加数据var tableData = table.cache["duntable"];for (var j = 0; j < tableData.length; ++j) {tableData[j][subjectField] = '';tableData[j][songhuoField] = 0;}//动态添加列属性//向数组插入元素：splice(index, howmany, items...)//col[0],注意col是二维数组col[0].splice(col[0].length, 0, {field: subjectField, title: subjectTitle, templet: function(d,field){var name = field.field;return '<input type="text" name="proviceDunArr['+d.id+']['+name+']" class="layui-input"  οnblur="dunPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="'+d[name]+'"><input type="text" name="proviceDunArr['+d.id+']['+songhuoField+']" class="layui-input songhuoInput"  οnblur="dunsonghuoPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入送货费" placeholder="请输入送货费" value="'+d[songhuoField]+'">';}, align: "center"});// 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是二维数组//     col[0].splice(col[0].length, 0, {field: subjectField[i], title: subjectTitle[i], templet: function(d,field){//         var name = field.field;//         var num1 = name.substr(name.lastIndexOf("_")+1);//         var songhuo_name = 'songhuo_'+num1;//         return '<input type="text" name="proviceDunArr['+d.id+']['+name+']" class="layui-input"  οnblur="dunPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入价格" value="'+d[name]+'"><input type="text" name="proviceDunArr['+d.id+']['+songhuo_name+']" class="layui-input songhuoInput"  οnblur="dunsonghuoPriceFun($(this))" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入送货费" placeholder="请输入送货费" value="'+d[songhuo_name]+'">';//     }, align: "center"});// }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 //是否分页, limit: Number.MAX_VALUE, 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>

layui table 渲染动态列及列数据相关推荐

vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
vue动态跟新layui的select_vue+layui实现select动态加载后台数据的例子
vue+layui实现select动态加载后台数据的例子发布时间:2020-09-18 22:51:36 来源:脚本之家阅读:85 作者:qq_26814945 刚开始由于layui form渲染 ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...
layui table动态追加(删除)一行,并进行原始数据渲染
记录:layui table.render动态追加(删除)一行数据,并对原有数据进行渲染场景:修改商品入库任务时: 首先进行对已选择客户的入库商品进行遍历渲染可追加入库商品,点击新增商品按钮时,弹 ...
html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
element table v-for动态隐藏列
element table v-for动态隐藏列这个动态列是我项目中觉得比较好玩的一个功能,他列表不固定,后端数据库表也不固定,其实还有个高级筛选,这两个是配套使用的, <el-tablere ...
原生js动态实现添加表格数据并某列求和
<table width="600" border="1" cellspacing="0"><thead><t ...
ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
layui table 列覆盖
layui table 列个数超过10列后,表头发生覆盖现象. 临时解决方法:注释掉下面代码: ,'{{# if(left){ }}','<div class="layui-table ...

layui table 渲染动态列及列数据

layui table 渲染动态列及列数据相关推荐

最新文章

热门文章