js_速查

作者: 两点半的杂货铺 | 来源:发表于2018-02-19 11:16 被阅读44次

js_速查
js_需求
速查宝典
js_基本入门(一)
[iOS]消息流程分析之慢速查找
JS_旋转木马
JS_继承进阶
JS_尾递归
iOS底层学习 -objc_msgSend慢速查找流程分析
JS_函数柯里化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
</head>
<body>
<div class="container">
    <div style="padding: 20px 0;">
        <a class="btn btn-primary" id="addBtn">添加</a>
        <a class="btn btn-danger">删除</a>
    </div>
    {#添加模块#}
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            {% for row in stu_list %}
                <tr nid="{{  row.id }}">
                    <td na="nid">{{ forloop.counter }}</td>
                    <td na="user">{{ row.username }}</td>
                    <td na="age">{{ row.age }}</td>
                    <td na="gender">{{ row.gender }}</td>
                    <td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
                    <td>
                        <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">创建学生</h4>
            </div>
            <div class="modal-body">

                <form id="fm" class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" placeholder="姓名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="gender" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio"  name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {% for row in cls_list %}
                                    <option value="{{ row.id }}">{{ row.title }}</option>
                                {% endfor %}
                            </select>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color: red;"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnSave">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger" role="alert">
            <h3>删除学生信息？</h3>
            <div>...<input style="display: none;" type="text" id="delNid" /></div>
            <div>
                <button type="button" class="btn btn-default">取消</button>
                <button id="delConfirm" type="button" class="btn btn-danger">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="eidtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑学生</h4>
            </div>
            <div class="modal-body">

                <form id="fm" class="form-horizontal">
                    <input type="text" name="nid" style="display: none" />

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="user" placeholder="姓名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio"  name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {% for row in cls_list %}
                                    <option value="{{ row.id }}">{{ row.title }}</option>
                                {% endfor %}
                            </select>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color: red;"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnEditSave">保存</button>
            </div>
        </div>
    </div>
</div>

</div>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
    $(function () {
        {#显示添加模态框#}
        bindEvent();
        {#添加保存#}
        bindSave();
        {#弹出是否删除对话框#}
        bindDel();
        bindDelConfirm();
        bindEdit();
    })
{#点击添加按钮展示对话框 #}
    function bindEvent() {
        $('#addBtn').click(
            function () {
                $('#addModal').modal('show');
            }
        )
    };
{#读取添加框中的所有选项，保存#}
    function bindSave() {
        $('#btnSave').click(
            function () {
                {#创建一个保存全部内容的字典#}
                var postData ={}
                $('#addModal').find('input,select').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('name');
                    {# 针对性别 #}
                    if(n=='gender'){
                        if($(this).prop('checked')){
                            postData[n] = v;
                        };
                        {# 注意 #}
                        }else {
                               postData[n] = v;
                    }

                });

                $.ajax({
                    url:'/add_studnet.html',
                    type:'POST',
                    {#上面的字典直接拿下来匹配#}
                    data:postData,
                    dataType:'JSON',
                    success:function (arg) {
                        {#构造一个假的展示列#}
                        {# 后台返回一个数据库总条数arg.count #}
                        if (arg.status){
                        createRow(postData,arg.count,arg.iid)
                        $('#addModal').modal('hide');
                        }else {
                        {#错误信息    #}
                        }
                    }
                })
            }
        )
    };
    {# 添加时创建 #}
    function createRow(postData,nid,iid) {
        var tr = document.createElement('tr')
        $(tr).attr('nid',iid);


        {# 构造一个假id列 #}
        var tdID = document.createElement('td')
        tdID.innerHTML = nid
        $(tr).append(tdID)

        var tdUser = document.createElement('td')
        tdUser.innerText = postData.username
        $(tr).append(tdUser)

         var tdAge = document.createElement('td');
        tdAge.innerHTML = postData.age;
        $(tr).append(tdAge);

        var tdSex = document.createElement('td')
        {# 判断性别 #}
        if(postData.gender){
            tdSex.innerHTML = '男'
        }else {
             tdSex.innerHTML = '女'
        };
        $(tr).append(tdSex);
        {#获取select思路，先找到select标签，在获取他的value    #}
        var tdCls = $('select[name="cls_id"]').find('option[value="'+postData.cls_id+'"]').text()
        tdCls.innerHTML = tdCls;
        $(tr).append(tdCls);

        var tdHandle = '<td> <a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a> </td>';
        $(tr).append(tdHandle);
        {#在把整个tb放到 tr中#}
        $('#tb').append(tr);

    };
    {# 删除 #}
    function bindDel() {
        $('#tb').on('click','.del-row',function () {
            $('#delModal').modal('show');
            //回去当前的ID
            var rowId = $(this).parent().parent().attr('nid');
            $('#delNid').val(rowId);
        })
        
    }
    function bindDelConfirm() {
        $('#delConfirm').click(function () {
            var rowId = $('#delNid').val();
            console.log(rowId);

            $.ajax({
                url: '/del_student/',
                type: 'GET',
                data: {'nid': rowId},
                success:function (arg) {
                    var dict = JSON.parse(arg);
                    if(dict.status){
                        $('tr[nid="'+ rowId+'"]').remove();
                    }
                    $('#delModal').modal('hide');
                }
            })

        });


    }
    {# 编辑 #}
    function bindEdit() {
        $('#tb').on('click','.edit-row',function () {
            $('#eidtModal').modal('show');
            //1.获取当前行的所有数据
            // 将数据赋值到对应的对话框的指定位置

             $(this).parent().prevAll().each(function () {
                 // cls_id
                 var v = $(this).text();
                 var n = $(this).attr('na');
                if(n=='cls_id'){
                    var cid = $(this).attr('cid');
                    $('#eidtModal select[name="cls_id"]').val(cid);
                }else if(n=='gender'){
                    // v=True
                    if(v=='True'){
                        $('#eidtModal :radio[value="1"]').prop('checked',true);
                    }else{
                        $('#eidtModal :radio[value="0"]').prop('checked',true);
                    }
                }else {
                    // n=age
                    // v=12
                    $("#eidtModal input[name='"+ n +"']").val(v)


                }
             });


        })
    }
</script>
</body>
</html>

form-ajax速查

var data = $('form表单的ID').serialize();
$.ajax({
      data: $('form表单的ID').serialize();
})

js_速查
form-ajax速查
js_需求
整体数据流转: 用户输入 (input_content)-> 请求(search_request) -> 向ES发...
速查宝典
html5速查css3速查
js_基本入门(一)
js_(一) 1 输出信息的几种方式 Alert() 在页面弹出一个对话框，早期JS调试使用。 Confirm()...
[iOS]消息流程分析之慢速查找
上篇中我们分析了快速查找流程，如果快速查不到，则进入了慢速查找流程，下面来分析一下。 1. 慢速查找-汇编部分在...
JS_旋转木马
核心代码：源码：吻我
JS_继承进阶
day19_JS_继承进阶 1.JS中的继承继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会有两种方...
JS_尾递归
函数调用自身，称为递归。当递归调用是整个函数体中最后执行的语句且它的返回值不属于表达式的一部分时，这个递归调用就是...
iOS底层学习 -objc_msgSend慢速查找流程分析
上一篇中，分析了快速查找流程，如果快速查不到，则需要进入慢速查找流程，核心方法_lookUpImpOrForwar...
JS_函数柯里化
JS_函数柯里化与函数绑定密切相关的主体是函数柯里化（function currying）,它用于创建已经设置好...

js_速查

form-ajax速查

相关文章

js_速查

js_需求

速查宝典

js_基本入门(一)

[iOS]消息流程分析之慢速查找

JS_旋转木马

JS_继承进阶

JS_尾递归

iOS底层学习 -objc_msgSend慢速查找流程分析

JS_函数柯里化

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读