layui table动态追加(删除)一行,并进行原始数据渲染_layui laydate done 清空自身值-程序员宅基地

技术标签: 动态追加  Layui  layui  

记录:layui table.render动态追加(删除)一行数据,并对原有数据进行渲染
场景:修改商品入库任务时:

  • 首先进行对已选择客户的入库商品进行遍历渲染
  • 可追加入库商品,点击新增商品按钮时,弹出此客户名下的商品列表,此列表可搜索商品,可选择某行商品
  • 可删除入库商品
  • 当切换客户时,需要将已选择的入库商品列表清空

HTML代码:

		<!-- 选择客户-->
        <div class="layui-form-item  layui-row layui-col-xs12">
            <label class="layui-form-label">客户</label>
            <div class="layui-input-block">
                <select name="customer_id" lay-verify="required"  lay-filter="customer">
                    <option value="">请选择客户</option>
                    {foreach $customerList as $key=>$vo}
                    <option value="{$key}" {eq name="$key" value="$row.customer_id"}selected{/eq}>{$vo|raw}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        
        <!-- 要入库的商品 tables-->
        <div class="layui-form-item">            
            <table class="layui-hide" id="demo" lay-filter="demo"></table>
        </div>
        
        <!-- 客户商品列表 table2-->
		<div id="openProductBox" style="display: none; padding: 10px;">
			<table id="openProductTable" lay-filter="openProductTable"></table>
		</div>

JS代码:

<script src="__STATIC__/jquery.min.js?v={$version}" 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>
    </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="goodsNumberArr[]" class="layui-input" style="line-height: 28px;height: 28px;"  lay-reqtext="请输入数量" placeholder="请输入数量" value="{
     {d.number}}">
    <input type="hidden" name="goodsidArr[]" value="{
     {d.id}}">
</script>

<!-- table2:搜索商品 -->
<script type="text/html" id="searchgoodbar">
    <div style="margin-bottom: 10px;">
		<span>产品名称:</span>
		<div class="layui-inline">
		    <input type="text" autocomplete="off" placeholder="货物名称" class="layui-input searchgoodtitle" style="height:32px;">
		</div>
		<button class="layui-btn layui-btn-sm" lay-event="searchgood"><i class="layui-icon layui-icon-search"></i>&nbsp;查询</a>
	</div>
</script>

<!-- table2:选中商品按钮 -->
<script type="text/html" id="checkgoodbar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="checkgood"><i class="fa fa-plus"></i> 选择</a>
</script>


<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'form'], function () {
     
        var element = layui.element,
            table = layui.table
            , form = layui.form
            ,laydate = layui.laydate;
        var tables;
        var table2;
        var goodsList = {
     $goodsList|raw};   //原始数据
        //展示已知数据
        tables = table.render({
     
            elem: '#demo'
            // , width: 500
            ,toolbar: '#toolbar' //开启头部工具栏,并为其绑定左侧模板
            ,defaultToolbar: ['filter'] //开启右边按钮
            , cols: [[ //标题栏
                {
     type: 'checkbox', fixed: 'left', hide: true }, 
                {
     fixed: 'left', toolbar: '#bar', title: '操作', width: 100, align: 'center' }, 
                {
     field: 'id', width: 50, title: 'ID'},
                {
     field: 'cateName', minWidth: 120, title: '货物分类'},
                {
     field: 'title', minWidth: 140, title: '货物名称'},
                {
     field: 'code', minWidth: 180, title: '货物编码'},
                {
     field: 'barcode', minWidth: 160, title: '货物条码'},
                {
     field: 'number', title: '入库数量', width: 158, templet: '#inputNumber', align: "center" ,edit:'text'}, 
                {
     field: 'sale_unit_price', minWidth: 110, title: '销售单价(元)'},
                {
     field: 'purchase_unit_price', minWidth: 110, title: '采购单价(元)'},
                {
     
                    // field: 'id',
                    width: 180,
                    title: '体积(长*宽*高)m3',
                    templet: function (d) {
     
                        return '<span>'+d.volume+' = '+d.long+'*'+d.wide+'*'+d.high+'</span>';
                    }
                },
                {
     field: 'weight', minWidth: 90, title: '重量(kg)'},
                {
     field: 'guige', minWidth: 80, title: '规格'},
                {
     field: 'unitName', minWidth: 100, title: '计量单位'},
                {
     field: 'create_time', minWidth: 170, title: '创建时间'},
            ]]
            //默认渲染的数据为空
            , data: goodsList
            , done: function (res, curr, count) {
     
                console.log('table渲染')
            }
            , even: true
        });
        //监听新增商品按钮操作
        table.on('toolbar(demo)', function (obj) {
     
            //var data = obj.data;
            if (obj.event === 'add') {
     
            	var customer_id=$("select[name=customer_id").val();
                if(!customer_id){
     
                    layer.msg('请选择客户',{
     icon:2,time:2000}); //错误提示
                    return false;
                }
                //打开客户名下的商品列表
                openProductCount(customer_id);
                return false; 
            }
        });
    
        //打开商品选择框
        function openProductCount(customer_id) {
     
            layui.use(['table', 'form'], function() {
     
                table2 = layui.table;
                var form = layui.form;
                layer.open({
     
                    type: 1,
                    title: '选择商品',
                    area: ['1000px', '500px'], //宽高
                    content: $('#openProductBox'),
                    end: function() {
      
                    },
                    success: function() {
     
                        table2.render({
     
                            elem: '#openProductTable',
                            id: 'openProductTable',
                            toolbar: '#searchgoodbar', //开启头部工具栏,并为其绑定左侧模板
                            defaultToolbar: ['filter'], //开启右边按钮
                            height: 400,
                            method: 'get', //接口http请求类型,默认:get
                            url: 'getCustomerGood', //?page=1&limit=10(该参数可通过 request 自定义)
                            where: {
     
                                customer_id: customer_id,
                                title:''
                            }, //接口的其它参数
                            page: false, //是否分页
                            cols: [
                                [
                                {
      fixed: 'left', toolbar: '#checkgoodbar', title: '操作', width: 100, align: 'center' },
                                {
     field: 'id', width: 60, title: 'ID',sort: true},
                                {
     field: 'cateName', minWidth: 120, title: '货物分类'},
                                {
     field: 'title', minWidth: 140, title: '货物名称'},
                                {
     field: 'code', minWidth: 180, title: '货物编码'},
                                {
     field: 'barcode', minWidth: 160, title: '货物条码'},
                                {
     field: 'sale_unit_price', minWidth: 110, title: '销售单价(元)'},
                                {
     field: 'purchase_unit_price', minWidth: 110, title: '采购单价(元)'},
                                {
     
                                    // field: 'id',
                                    width: 180,
                                    title: '体积(长*宽*高)m3',
                                    templet: function (d) {
     
                                        return '<span>'+d.volume+' = '+d.long+'*'+d.wide+'*'+d.high+'</span>';
                                    }
                                },
                                {
     field: 'weight', minWidth: 90, title: '重量(kg)'},
                                {
     field: 'guige', minWidth: 80, title: '规格'},
                                {
     field: 'unitName', minWidth: 100, title: '计量单位'},
                                {
     field: 'create_time', minWidth: 170, title: '创建时间',sort: true },
                                ]
                            ]
                            , done: function (res, curr, count) {
     
                                // console.log('商品列表:',res)
                            }   
                        });
                    },
                    cancel: function(){
     
                        // 右上角关闭事件的逻辑
                        $('#openProductBox').hide();
                    }
                });
            });
        }
    
        //监听选择商品一行操作
        table.on('tool(openProductTable)', function (obj) {
     
            //选择商品
            if (obj.event === 'checkgood') {
     
                $(this).css('background-color',' #333');
                var ProductData = obj.data;
                //关闭最新打开的一个layui弹窗
                layer.close(layer.index);
                $('#openProductBox').hide();
                //向table中追加一条数据
                var Data = table.cache["demo"];
                ProductData.number = 1; //设置默认入库数量为1
                Data.push(ProductData);
                tables.reload({
     
                    data: Data
                });
            }  
        });
    
        //监听搜索商品按钮
        table.on('toolbar(openProductTable)', function (obj) {
     
            //搜索商品
            if(obj.event === 'searchgood'){
                 
                var title = $('.searchgoodtitle').val();
                var customer_id=$("select[name=customer_id").val();
                if(!customer_id){
     
                    layer.msg('请选择客户',{
     icon:2,time:2000}); //错误提示
                    return false;
                }
                table2.reload('openProductTable',
                    {
     
                        where: {
     
                            customer_id:customer_id,
                            title: title,
                        }
                    }
                );
            }
    
        });
    
    
        //监听删除商品一行操作
        table.on('tool(demo)', function (obj) {
     
            console.log(6666)
            //var data = obj.data;
            if (obj.event === 'del') {
     
                var Data = table.cache["demo"];
                Data.splice(obj.tr.data('index'), 1)//根据索引删除当前行
                tables.reload({
     
                    data: Data
                });
            }
        });
    
       //这是监听可编辑的
	   table.on('edit(demo)', function (obj) {
     
	        //获取当前行索引
	        var tr_index = obj.tr.data("index");
	        //获取当前编辑的字段名
	        var field = obj.field;
	        //编辑计划出库数量时
	        if(field=="number"){
     
	            //获取编辑之前的值
	            var selector = obj.tr.selector+' td[data-field="'+field+'"]';
	            var oldtext = $('div input[name="goodsNumberArr[]"]',selector).val();
	            var tr_data = obj.data //得到所在行所有键值
	            var number = obj.value;
	            if(!isNumber(obj.value)) {
     
	                layer.msg('请输入数字',{
     icon:2,time:2000}); //错误提示
	                //更新数据缓存
	                table.cache["demo"][tr_index][field] = oldtext;
	                //更新edit隐藏input框的值,赋值回原本的值,重点
	                $('input.layui-table-edit',selector).val(oldtext);
	                return false;
	            }
	            if(number <= 0){
     
	                layer.msg('出库数量应大于0',{
     icon:2,time:2000}); //错误提示
	                //更新数据缓存
	                table.cache["demo"][tr_index][field] = oldtext;
	                //更新edit隐藏input框的值,赋值回原本的值,重点
	                $('input.layui-table-edit',selector).val(oldtext);
	                return false;
	            }
	        }         
	    });
    
        //监听切换客户选择框
        form.on('select(customer)', function (data) {
     
            //重置选择的商品
            tables.reload({
     
                data: []
            });
        });
    
    })
</script>

PHP代码:

    /**
     * @NodeAnotation(title="编辑")
     */
    public function edit($id)
    {
            
        if ($this->request->isAjax()) {
    
            $post = $this->request->post();
            $data = [
                'id' =>$post['id'],
                'biaozhi' =>$post['biaozhi'],
                'come_time' =>$post['come_time'],
                'remark' =>$post['remark'],
                'goodsidArr'=>input('goodsidArr/a'),
                'goodsNumberArr'=>input('goodsNumberArr/a'),
                'update_people_type'=>1,   //修改人类型:1-管理员,2-客户
                'update_people'=>$this->adminInfo['id'],    //修改人
            ];
            $result = $this->logic->edit($data);
            if($result['status'] !== 'success'){
    
                $this->error($result['msg']);
            }
            $this->success('保存成功');
        }
        $row = $this->model->find($id);
        empty($row) && $this->error('数据不存在');
        //新建状态的任务才可以修改
        if($row['status'] != 0){
    
            $this->error('当前任务状态不能修改');
        }
        $goodsListArr = json_decode($row['goodsid'],true);
        $goodsList = [];
        foreach($goodsListArr as $key=>$value){
    
            $item = (new GoodsModel())->withoutField('delete_time')->where(['id'=>$value['id'],'customer_id'=>$row['customer_id'],'status'=>1])->find();
            $item['cateName'] = $item->goodsCate ? $item->goodsCate->name : ''; //分类
            $item['unitName'] = $item->goodsUnit ? $item->goodsUnit->name : ''; //单位
            $item['sale_unit_price'] = floatval($item['sale_unit_price']);
            $item['purchase_unit_price'] = floatval($item['purchase_unit_price']);
            $item['long'] = floatval($item['long']);
            $item['wide'] = floatval($item['wide']);
            $item['high'] = floatval($item['high']);
            $item['weight'] = floatval($item['weight']);
            $item['volume'] = floatval($item['volume']);
            $item['number'] = $value['number'];
            $goodsList[] = $item->toArray();
        }
        $goodsList = json_encode($goodsList);
        $this->assign('row', $row);
        $this->assign('goodsList', $goodsList);
        return $this->fetch();
    }
    /**
     * @NodeAnotation(title="获取客户名下的商品")
     */
    public function getCustomerGood()
    {
            
        if ($this->request->isAjax()) {
    
            $customer_id = input('customer_id');
            $title = input('title');
            $result =$this->logic->getCustomerGood($customer_id,$title);
            if($result['status'] == 'success'){
    
                $data = [
                    'code'  => 0,
                    'msg'   => '',
                    'count' => count($result['data']),
                    'data'  => $result['data'],
                ];
            }else{
    
                $data = [
                    'code'  => 0,
                    'msg'   => '',
                    'count' => 0,
                    'data'  => [],
                ];
            }
            return json($data);
        }
    }

页面效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43652106/article/details/112461468

智能推荐

Python NetworkX +Gephi利用PageRank和K-Clique分析并可视化社会网络_networkx k-clique-程序员宅基地

文章浏览阅读2.3k次,点赞2次,收藏21次。先导入即将用到的包import matplotlib.pyplot as pltimport osimport networkx as nximport pandas as pdimport numpy as np_networkx k-clique

关于VeRi-776(车辆重识别)数据集_veri776-程序员宅基地

文章浏览阅读5.8k次。见关于VeRi-776(车辆重识别)数据集 - it610.com_veri776

linux 7 防火墙 配置视频教程,CentOS7中firewall防火墙详解和配置以及切换为iptables防火墙...-程序员宅基地

文章浏览阅读101次。CentOS7中默认使用firewalldfirewall配置注意:以下firewalld 的操作只有重启之后才有效:service firewalld restart 重启系统配置目录/usr/lib/firewalld/services目录中存放定义好的网络服务和端口参数,系统参数,不能修改。用户配置目录/etc/firewalld/如何自定义添加端口用户可以通过修改配置文件的方式添加端口,也..._for use in public areas. you do not trust the other computers on networks to

通信协议 CRC校验和计算方法_crc 0x43-程序员宅基地

文章浏览阅读3.8k次。public static uint CalCrc16(byte[] buf, int start, int end) { byte CRC16Lo, CRC16Hi; //CRC寄存器 byte CL, CH; //多项式码&HA001 byte SaveLo, SaveH_crc 0x43

mysql关系型和非关系型区别,关系型数据库和非关系型数据区别-程序员宅基地

文章浏览阅读138次。表是关系型数据库最典型的数据结构,它由两维的表和它们之间的联系组成数据组织。好处:易于维护:均采用表结构,格式一致;使用方便: SQL语言是通用的,可以用于复杂的查询;第三,复杂操作:支持 SQL,可以在一个表和多个表之间进行复杂查询。缺陷:读写性能相对较差,特别是对海量数据的高效读写;固定的表格结构,弹性稍差一点;在传统关系型数据库中,硬盘 I/O的并发程度较高,读写需求也较大。严格地说,非关系..._mysql关系型数据库与非关系型的区别

Vue中一些工具的应用(仅供参考具体看API文档)_at function.invokegetter-程序员宅基地

文章浏览阅读396次。vue-cli中常见插件的使用及配置配置echars安装npm install echarts -S在组件中定义图表容器并初始化数据 // 假设是 index.vue // 1. 在template中的html标签中定义容器 <div id="echarsbox" :style="{width: '300px', height: '300px'}"></div>..._at function.invokegetter

随便推点

vb.net GDI+入门——坐标系统与像素_若想要将窗体坐标系的度量单位指定为像素那么应该将窗体的什么属性设置为什么-程序员宅基地

文章浏览阅读3.7k次。GDI+绘图技术中,最基本的是坐标系统,坐标系统的默认度量单位是像素。我们需要熟练掌握GDI+中坐标的变换概念才能绘制出理想的图形来。在GDI+中,默认的坐标系统的原点是在左上角,X轴指向右边,Y轴指向下边,如下图一所示:GDI+默认的坐标系统与我们数学中的坐标系统并不一样,我们想要在GDI+中使用新的坐标系统,则需要在默认坐标的基础上进行坐标的变换,例如旋转,平移等。坐标平移是沿_若想要将窗体坐标系的度量单位指定为像素那么应该将窗体的什么属性设置为什么

制作静态网页_静态网站制作-程序员宅基地

文章浏览阅读2.1k次。制作静态网页——微博_静态网站制作

信息系统项目管理师 第四版 第2章 信息技术发展_信息系统项目管理师 2024 第二章-程序员宅基地

文章浏览阅读210次。1.信息技术及其发展1.1.计算机软硬件1.2.计算机网络1.3.存储和数据库1.4.信息安全1.5.信息技术的发展2.新一代信息技术及应用2.1.物联网2.2.云计算2.3.大数据2.4.区块链2.5.人工智能2.6.虚拟现实_信息系统项目管理师 2024 第二章

看完这篇HTTP,跟面试官扯皮就没问题了-程序员宅基地

文章浏览阅读1.5k次。转自:Java建设者我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍..._万字长文:看完这篇http,跟面试官扯皮就没问题了

Unity使用SteamVR2.0实现基本功能(瞬移,抓取物品,射线点击,UI交互等)_interact with ui-程序员宅基地

文章浏览阅读1.3w次,点赞76次,收藏224次。SteamVR2.0 学习基本功能使用,清楚各个组件的功能和参数,了解SteamVR的代码逻辑_interact with ui

python怎么画图片 wafer map_Python wafer_map包_程序模块 - PyPI - Python中文网-程序员宅基地

文章浏览阅读2k次。晶圆图绘制一张晶圆图。用于半导体加工和分析。内容安装用法键盘快捷键和鼠标用法rel="nofollow">键盘快捷键和鼠标用法注意事项当前能力更改日志功能鼠标和键盘快捷键!知道半M1-0302晶圆尺寸!你可以改变颜色!放大缩小!在你自己的wxpython应用程序中使用它!查看模具网格坐标、绝对坐标和模具值!(但只有如果您使用独立应用程序或您的应用程序有状态栏)。你想怎么做就怎么把地图放在晶圆上!安..._python晶圆图

推荐文章

热门文章

相关标签