javascript+layui前端专栏

动态socket篇，建立一个本地连接，能实现自动重连

function wsConnectInit() {
            //socket = new WebSocket('ws://192.168.1.155:883');
            socket = new WebSocket('ws://localhost:883');
            // 打开socket连接
            socket.onopen = e => {//只会执行一次
                socketOpen = true;
                console.log('连接成功');
                // 心跳
                heartCheck()
            };
            // socketClose
            socket.onclose = e => {
                console.log('连接已断开', e);
                socketOpen = false;
                reconnect();
            };
            //连接发生错误
            socket.onerror = e => {
                console.log('连接发生错误', e);
                socketOpen = true;
                reconnect();
            };
        }
        wsConnectInit();

// 心跳检测
        function heartCheck() {
            if (socketOpen) {
                setInterval(() => {
                    socket.send('ping')
                    console.log("发送ping", heartCheckTime)
                }, heartCheckTime);
            }
        }


// 重连
        function reconnect() {
            if (!socketOpen) {
                setTimeout(() => {
                    layer.msg("请检查①后台采集软件是否打开②主机IP设置是否为192.168.1.155 ③若都正确请刷新此页")
                    wsConnectInit()
                    reconnectTime++
                    console.log('重新连接', reconnectTime)
                }, 2000)
            }
        }

ajax上传篇，就是更新 数据库表名tablename 中的 setfield列 的 setfiledvalue行 ，更新内容为setfieldvalue中的内容

$.ajax({
                    url: '${alfred}/EquipTaskManage/updateTaskDjjStatus.action',
                    dataType:"json",
                    type:'POST',
                    data: {
                        page:1
                        ,limit:10
                        ,tablename: "hl_task"
                        ,setfield:"status"
                        ,setfieldvaluerow: insert_table_name
                        ,setfieldvalue:"已完成检测"
                    },
                    success: function(data){
                        console.log(data);
                        tableIns.reload();
                    }
                });

layui表单中动态加入按钮

,{fixed:'right', width:300, title: '操作', fixed: 'right',templet:function (item) {
                                            switch (item.checkway) {
                                                case '目测':
                                                    return '<a class="layui-btn layui-btn-xs" lay-event="muce1" >目测正常</a>' +
                                                        '<a class="layui-btn layui-btn-xs" lay-event="muce2" >不齐全</a>' +
                                                        '<a class="layui-btn layui-btn-xs" lay-event="muce3" >损坏</a>' +
                                                        '<a class="layui-btn layui-btn-xs" lay-event="muce4">不符合要求</a>';
                                                    break;

                                                default:


                                                    return '<a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit_qidongyiqi">开始采集数据</a>'+
                                                           '<a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit_huoqushuju">获取数据</a>';
                                                    break;
                                            }
                                        }}

动态复选框

for (var i = 0; i < data.data.length; i++) {
                                        //判断复选框是否选中
                                        if (data.data[i].enable == 1){
                                            //这句才是真正选中，通过设置关键字LAY_CHECKED为true选中
                                            data.data[i]["LAY_CHECKED"] = 'true';
                                            //下面三句是通过更改css来实现选中的效果
                                            var index= data.data[i]['LAY_TABLE_INDEX'];
                                            $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                            $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                        }
                                    }

获取当前页面中的框内数据一股脑下发，不用ajax方式

function deleteBatch2() {

            //得到选中的数据行
            var checkStatus = table.checkStatus('taskTable');
            var data = checkStatus.data;
            var params = "";
            $.each(data, function (i, item) {
                if (i == 0) {
                    params += "ids=" + item.tasknumber;
                } else {
                    params += "&ids=" + item.tasknumber;
                }
            });
            layer.confirm('真的要删除这些车辆么？', function (index) {
                //向服务端发送删除指令
                $.post("${alfred}/task/deleteBatchTask.action", params, function (res) {
                    layer.msg(res.msg);
                    //刷新数据表格
                    tableIns.reload();
                })
            });
        }