jQuery--后台主机列表编辑

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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("退出编辑模式"

以上是关于jQuery--后台主机列表编辑的主要内容，如果未能解决你的问题，请参考以下文章

Vue + jQuery 实现后台用户列表的加载,查询和修改

编辑片段中的列表视图对象

如何在片段中填充列表视图？

jQuery 可编辑/可排序列表

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

使用jquery使用相同的按钮编辑多行