jQuery--后台主机列表编辑

先看效果：

要求：

全选，反选和取消
编辑模式下的全选，反选和取消
编辑模式下单选进入编辑状态，取消退出编辑状态
表格元素有可编辑，不可编辑，下拉选择
按住ctrl选择下拉框，下面的同列选项都随之改变

思路：

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

代码：

html

<!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

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

来自为知笔记(Wiz)