前端和js小操作集锦

前端水平不高,贵在总结学习.

 

1.简单的数据提交提示是否删除操作

 <input type="submit" class="total-detail"  onclick="delequ('{$vo.serial_number}')" value="删除电箱">
 
function delequ(id) {
            if(confirm("确定删除数据")){
                var delSerialNumber = id;
                console.log(delSerialNumber);
                var data = {
                    serial_number: delSerialNumber,
                }
                $.ajax({
                    type: 'POST',
                    url: "/admin/equipment/delEquipment",
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if (data.code === 1) {
                        alert("删除成功");
                        } else {
                            alert(data.msg);
                        }
                    }
                });
            }else{
                return false;
            }
        }

2.拟态框操作

 <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            编辑开关名称
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!--  模态框内容，我在此处添加一个表单 -->
                                        <form class="form-horizontal" role="form" method="get" action="/admin/switchs/editSwitchName">
                                            <div class="form-group">
                                                <label for="uname" class="col-sm-2 control-label">开关名称:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="dahai-id" id="id" name="id" value="{$sub.id}"/>
                                                    <input type="text" id="uname" name="uname" class="form-control well" value="{$sub.switch_name}"/>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <span id="returnMessage" class="glyphicon"> </span>
                                                <button type="button" class="btn btn-default right" data-dismiss="modal">取消</button>
                                                <button id="submitBtn" type="submit" class="btn btn-primary" >保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <!-- 模态框（Modal） -->

js部分

//拟态框(无操作)
        $(function () { $('#myModal').on('hide.bs.btn-primary', function () {
            alert('嘿，我听说您喜欢模态框...');})

3. bootstram switch的使用

地址:https://blog.csdn.net/qq_27229113/article/details/89392957

 

4.css隐藏number的上下切换数字

input[type=number] {
        -moz-appearance:textfield;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

5.简单的前后端交互

 <input id="c-serial_number" data-rule="required" class="form-control" name="row[serial_number]" type="text">

js部分

 $("#c-serial_number").blur("click", function () {
    var serial_number = $('#c-serial_number').val();
        data = {serial_number:serial_number}
        $.ajax({
            type: 'get',
            url: "/admin/equipment/getSerialNumber",
            data: data,
            dataType: 'json',
            success: function (data) {
               if (data === 1) {
                   alert("该序列号已经存在,请重新输入")
               }
            }
        });
    })

 

获取php返回的一维数组的单选下拉按钮

html

<div class="top_year">
                                年份:
                                <select>
                                    {volist name="timeList['year']" id="vo"}
                                    <option value="{$key}" {in name="key" value="0" }selected{/in}>{$vo}</option>
                                    {/volist}
                                </select>
                            </div>

js

 var getYear = $(".top_year select").val();

即可