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（不全）
  • 相关阅读:
    Selenium2+python自动化-查看selenium API
    彻底搞懂scrapy的中间件第二章
    彻底搞懂scrapy的中间件第一章
    爬虫面试题
    爬取58同城二手房数据存储到redis数据库和mysql数据库
    Scrapy操作浏览器获取网易新闻数据
    Scrapy框架中的 UA伪装
    scrapy框架中如何使用selenuim
    基于scrapy中---全站爬取数据----CrawlSpider的使用
    基于百度AI的自然语言处理文字分类
  • 原文地址：https://www.cnblogs.com/daliangtou/p/5236374.html
Copyright © 2011-2022 走看看