layui table动态增加行以及通过键盘定位指定单元格

最新推荐文章于 2024-05-12 10:35:47 发布

mr_foxsand

最新推荐文章于 2024-05-12 10:35:47 发布

阅读量3k

点赞数 3

分类专栏： JavaScript 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/mr_foxsand/article/details/120883408

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图：

业务需求：

1.入库单等此类单据表单，明细数据需要动态行。

2.光标需要定位到新增加行的指定单元格。

3.单元格填入数据后按回车，光标移动到下个可编辑的单元格；如果已经是最后一个单元格，那么光标移动到下一行的指定单元格；如果是最后一行的最后单元格，那么再次新增行

附：键值表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <script src="../../jquery-3.3.1.js"></script>
    <script src="../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','form','laydate', 'table'] , function () {
            var admin = layui.admin
                ,element = layui.element
                ,laydate = layui.laydate
                ,table = layui.table
                ,form = layui.form;

            element.render();

            let entityName = 'ordBill'
                ,tableId = entityName + "-table-operate"
                ,cols = [
                [
                    {field:'id', title: 'ID', sort: true, hide:true, fixed: 'left'}
                    ,{field:'barcode', sort:true , title: '条码' , edit:true}
                    ,{field:'code', sort:true , title: '商品代码' , edit:true}
                    ,{field:'name', sort:true , title: '商品名称' }
                    ,{field:'spec', sort:true , title: '单位'}
                    ,{field:'unit', sort:true , title: '包装单位'}
                    ,{field:'qpcStr', sort:true , title: '包装规格' , edit:true}
                ]
            ];


            $(document).ready(function () {
                // tableData：模拟接收到后端传入的table数据
                // *****重点：不要使用url方式渲染table，否则无法通过数据重载的方式，增加新的数据行
                let tableData = [{
                    "id":"0"
                    ,"code":"0"
                    ,"barcode":"0"
                    ,"name":"第0条数据"
                    ,"spec":""
                    ,"unit":""
                    ,"qpcStr":"0"
                }];
                table.render({
                    elem: '#' + tableId
                    ,data:tableData
                    ,cols:cols
                    ,page:false
                });
                // 
                tableAddRow(table , tableId ,{
                    "id":""
                    ,"code":""
                    ,"barcode":""
                    ,"name":""
                    ,"spec":""
                    ,"unit":""
                    ,"qpcStr":""
                } , 10 , true , 'barcode');
            });

            /**
             *  监听键盘事件
             */
            $(document).on('keyup' , '.layui-input' , function (event) {
                let td = $(this).parent('td');
                let tr = td.parent('tr');
                let dataIndex = $(tr).attr("data-index");
                switch (event.keyCode) {
                    // case 13：13表示回车
                    case 13:
                        let data_field = $(td).attr("data-field");
                        let tableDataLength = table.cache[tableId].length;
                        if (data_field == 'qpcStr') {
                            //如果当前处于最后一行，那么自动新增N行
                            if (dataIndex == tableDataLength - 1){
                                tableAddRow(table , tableId , {
                                    "id":""
                                    ,"code":""
                                    ,"barcode":""
                                    ,"name":""
                                    ,"spec":""
                                    ,"unit":""
                                    ,"qpcStr":""
                                } , 10 , true , 'barcode');
                            }else {
                                // 下移一行，光标焦点移动到barcode处
                                tr['next']().children('td').eq(1).click();
                            }
                        }
                        td['nextAll']('[data-edit="true"]:first').click();
                        break;
                }
            });

            /**
             * 给table动态增加空白行
             * @param table
             * @param tableId
             * @param templateData      数据模板
             * @param rowCount          增加的行数    
             * @param isClick           是否触发鼠标单击事件
             * @param clickFieldName    需要单击的field名称，需要isClick = true，并且该列为可编辑
             */
            function tableAddRow(table , tableId , templateData , rowCount , isClick , clickFieldName) {
                let sourceData = table.cache[tableId];
                let dataIndex = sourceData.length;
                for (let i = dataIndex; i < (dataIndex + rowCount); i++) {
                    let tempData = {
                        LAY_TABLE_INDEX:i
                    };
                    $.extend(tempData , templateData);
                    sourceData.push(tempData);
                }
                table.reload(tableId , {
                    data:sourceData
                    ,limit:sourceData.length
                });
                // 是否自动触发鼠标单击事件
                if (isClick == true){
                    tableColClick(tableId , dataIndex , clickFieldName);
                }

            };

            /**
             * table中的可编辑单元格自动触发单击事件
             * @param tableId       table的ID
             * @param dataIndex     行号
             * @param clickName     点击字段名称
             */
            function tableColClick(tableId , dataIndex , clickFieldName){
                let trs = $("#" + tableId).next().find(".layui-table-main").find("table tbody tr");
                if (trs.length > 0){
                    $.each(trs , function (index , value) {
                        let dataId = $(value).attr("data-index");
                        if (dataId == dataIndex){
                            let tds = $(value).find("td");
                            $.each(tds , function (i , v) {
                                let data_field = $(v).attr("data-field");
                                if (data_field == clickFieldName){
                                    v.click();
                                }
                            })
                        }
                    });
                }
            }

        });
    </script>

</head>
<body>
<div class="layui-card-body">
    <table class="layui-hide" id="ordBill-table-operate" lay-filter="ordBill-table-operate"></table>

</div>
</body>
</html>

mr_foxsand

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
layui table动态增加行以及通过键盘定位指定单元格

版权声明：请勿用于任何商业用途的文章转载，转载请说明出处！业务需求：1.入库单等此类单据表单，明细数据需要动态行。2.光标需要定位到新增加行的指定单元格。3.单元格填入数据后按回车，光标移动到下个可编辑的单元格；如果已经是最后一个单元格，那么光标移动到下一行的指定单元格；如果是最后一行的最后单元格，那么再次新增行附：键值表<!DOCTYPE html><html lang="en"><head> <...
复制链接

扫一扫