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（不全）






【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/daliangtou/p/5236374.html