zoukankan      html  css  js  c++  java

  • jQuery--后台主机列表编辑

    先看效果：


    要求：

    1. 全选，反选和取消

    2. 编辑模式下的全选，反选和取消

    3. 编辑模式下单选进入编辑状态，取消退出编辑状态

    4. 表格元素有可编辑，不可编辑，下拉选择

    5. 按住ctrl选择下拉框，下面的同列选项都随之改变

    思路：

    http://naotu.baidu.com/file/142f658e573dde744597a788fabf3a14​

    代码：

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .edit-mode{
                background-color: #b3b3b3;
                padding: 8px;
                text-decoration: none;
                color: white;
            }
            .editing{
                background-color: #f0ad4e;
            }
        </style>
    </head>
    <body>
        <div style="padding: 20px">
            <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
            <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
            <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
     
            <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>
     
        </div>
        <table border="1">
            <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
                <th>业务</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="tb1">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td edit="true">v1</td>
                    <td>v11</td>
                    <td edit="true" edit-type="select" global-key="BUSINESS" sel-val="1" >车商会</td>
                    <td edit="true" edit-type="select" global-key="STATUS" sel-val="1" >在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td edit="true">v1</td>
                    <td>v11</td>
                    <td edit="true" edit-type="select" global-key="BUSINESS" sel-val="2">二手车</td>
                    <td edit="true" edit-type="select" global-key="STATUS" sel-val="1">在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td edit="true">v1</td>
                    <td>v11</td>
                    <td edit="true" edit-type="select" global-key="BUSINESS" sel-val="3">大保健</td>
                    <td edit="true" edit-type="select" global-key="STATUS" sel-val="2">下线</td>
                </tr>
            </tbody>
        </table>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/edit_row.js"></script>
    </body>
    </html>
    js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    STATUS = [
        {'id': 1, 'text': "在线"},
        {'id': 2, 'text': "下线"}
    ];
     
    BUSINESS = [
        {'id': 1, 'text': "车商会"},
        {'id': 2, 'text': "二手车"},
        {'id': 3, 'text': "大保健"}
    ];
    function CheckAll(mode,tb){
        //1、选中checkbox
        //2、如果已经进入编辑模式，让选中行进入编辑状态
        //tb = #tb1
        //$(tb) = $('#tb1')
        $(tb).children().each(function(){
            //$(this)表示循环过程中，每一个tr，每一行数据
            var tr=$(this);
            var isChecked = $(this).find(':checkbox').prop('checked');
            if(isChecked==true){
     
            }else{
                $(this).find(':checkbox').prop('checked',true);
                //如果已经进入编辑模式，让选中行进入编辑状态；
                var isEditMode = $(mode).hasClass('editing');
                if(isEditMode){
                    RowEditInMode(tr);
                }
            }
        });
    }
    function CheckCancel(mode,tb){
        //1、取消选中checkbox
        //2、如果已经进入编辑模式，行退出编辑状态；
        $(tb).children().each(function(){
            var tr=$(this);
            if(tr.find(':checkbox').prop('checked')){
                //移除选中
                tr.find(':checkbox').prop('checked',false);
     
                var isEditing=$(mode).hasClass('editing');
                if(isEditing == true){
                    //当前行，退出编辑状态；
                    RowEditOutMode(tr);
                }
            }
        });
    }
    function CheckReverse(mode,tb){
        if($(mode).hasClass('editing')){
     
            $(tb).children().each(function(){
                var tr = $(this);
                var check_box = tr.children().first().find(':checkbox');
                if(check_box.prop('checked')){
                    check_box.prop('checked',false);
                    //##################相似代码################
                    RowEditOutMode(tr);
                    //##########################################
                }else{
                    check_box.prop('checked',true);
                    //##################相似代码################
                    RowEditInMode(tr);
                    //##########################################
                }
            });
        }else{
            //
            $(tb).children().each(function(){
                var tr = $(this);
                var check_box = tr.children().first().find(':checkbox');
                if(check_box.prop('checked')){
                    check_box.prop('checked',false);
                }else{
                    check_box.prop('checked',true);
                }
            });
        }
    }
    function EditMode(ths,tb){
        var isEditing  = $(ths).hasClass('editing');
        if (isEditing){
            //当前为编辑模式，点击触发了此函数，退出编辑模式；把……
            $(ths).text("进入编辑模式");
            $(ths).removeClass('editing');
            $(tb).children().each(function(){
                var tr=$(this);
                if(tr.find(':checkbox').prop('checked')){
                    RowEditOutMode(tr);
                }
            });
        }else{
            $(ths).text("退出编辑模式");
            $(ths).addClass('editing');
            $(tb).children().each(function(){
                //$(this)表示循环过程中，每一个tr，每一行数据
                var tr=$(this);
                var isChecked = $(this).find(':checkbox').prop('checked');
                if(isChecked==true){
                    RowEditInMode(tr);
                }
            });
        }
    }
    function RowEditInMode(tr){
        tr.children().each(function(){
            var td=$(this);
            if(td.attr('edit')=='true'){
                if(td.attr('edit-type')=="select"){
                    var all_values = window[td.attr('global-key')];
                    var select_val = td.attr('select-val');
                    select_val = parseInt(select_val);  //字符串转数字
                    var options = "";
                    $.each(all_values,function(index,value){
                        if(select_val == value.id){
                            options += "<option selected='selected'>"+value.text+"</option>";
                        }else{
                            options += "<option>"+value.text+"</option>";
                        }
                    });
                    var temp = "<select onchange='MultiChange(this);'>"+options+"</select>";
                }else{
                    var text=td.text();
                    var temp = "<input type='text' value='"+text+"' />" ;
                }
                td.html(temp);
            }
        });
    }
    function RowEditOutMode(tr){
        tr.children().each(function(){
            var td=$(this);
            if(td.attr('edit')=='true'){
                var inp = td.children(":first");
                var input_value = inp.val();
                td.text(input_value);
            }
        });
    }
    /*************************编辑模式中选择一个进行编辑***************************/
    $(function(){
        $("#tb1").find(':checkbox').click(function(){
            var tr = $(this).parent().parent();
            if($("#edit_mode").hasClass('editing')){
                if($(this).prop("checked")){
                    //当前行进入编辑状态
                    RowEditInMode(tr);
                }else{
                    //当前行退出编辑状态
                    RowEditOutMode(tr);
                }
            }
        });
    });
    /*************************multi_select_change_ctrl***************************/
    globalCtrlKeyPress = false;
    //如果按下键盘的任意键，执行function
    window.onkeydown = function(event){
        //console.log(event.keyCode);
        if(event && event.keyCode == 17){
            window.globalCtrlKeyPress = true;
        }else{
            window.globalCtrlKeyPress = false;
        }
    };
    function MultiChange(ths){
        //检测是否按下ctrl建
        if(window.globalCtrlKeyPress == true){
            //td所在的tr中的索引位置
            var index = $(ths).parent().index();
            var value = $(ths).val();
            $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                $(this).parent().parent().children().eq(index).children().val(value);
            });
        }
    }

    此代码效果：


    链接：

    视频路径：DAY16-作业剖析

    课件路径：cmdb_plugin/demo_1.html（不全）
  • 相关阅读:
    微信公众号图片抓取
    ArcGIS Pro SDK开发从别的收集
    ARCGIS Pro试用申请教程以及登录页面脚本错误解决办法
    ArcMap python IndentationError: unexpected indent 莫名的错误解决
    ArcGIS Python更新顺序2种方法
    ArcGIS三维模型
    三维文件格式知多少 | abc、glTF、fbx、obj、dae、stl、3ds
    ArcGIS Pro创建点场景图层包（CreatePointSceneLayerPackage）
    What is the difference between SqlCommand.CommandTimeout and SqlConnection.ConnectionTimeout?
    Reference Microsoft.SqlServer.Smo.dll
  • 原文地址：https://www.cnblogs.com/daliangtou/p/5236374.html
Copyright © 2011-2022 走看看