http://www.mamicode.com/info-detail-1466046.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.edit-mode{
padding:10px;
}
.editing{
padding:10px;
background-color: #ffd00f;
}
</style>
</head>
<body>
<div style="padding: 20px">
<input type="button" value="全选" onclick="CheckAll(‘#edit_mode‘,‘#tb1‘);"/>
<input type="button" value="反选" onclick="CheckReverse(‘#edit_mode‘,‘#tb1‘);"/>
<input type="button" value="取消" onclick="CheckCancel(‘#edit_mode‘,‘#tb1‘);"/>
<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 edit="true">主机</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox"></td>
<td edit="true" edit-type="input">v1</td>
<td>p1</td>
<td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td edit="true" edit-type="input">v2</td>
<td>p2</td>
<td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td edit="true" edit-type="input">v3</td>
<td>p3</td>
<td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td>
</tr>
</tbody>
</table>
<script src="jquery-3.1.0.min.js"></script>
<script >
STATUS_DICT = [
{‘id‘: 1, ‘value‘: "在线"},
{‘id‘: 2, ‘value‘: "下线"}
];
$(function(){
BindSingleCheck(‘#edit_mode‘,‘#tb1‘);
});
function BindSingleCheck(mode,tb){
$(tb).find(‘:checkbox‘).bind(‘click‘,function(){
var tr = $(this).parent().parent();
if($(mode).hasClass(‘editing‘)){
if($(this).prop(‘checked‘)){
RowIntoEdit(tr)
}else{
RowOutEdit(tr)
}
}
});
}
/*
监听是否已经按下control键
*/
window.globalCtrlKeyPress = false;
window.onkeydown = function (event) {
console.log(event.keyCode);
if(event && event.keyCode == 17){
window.globalCtrlKeyPress = true;
console.log(‘ctrl + ok‘)
}
};
window.onkeyup = function (event) {
if(event && event.keyCode == 17 ){
window.globalCtrlKeyPress = false;
console.log(‘ctrl -----ok‘)
}
};
// 写一个创建select标签的函数
function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
var doc = document;
var sel = doc.createElement(‘select‘);
$.each(attrs,function(k,v){
$(sel).attr(k,v);
});
$.each(csses,function(k,v){
$(sel).attr(k,v)
});
$.each(option_dict,function(k,v){
var opt1 = doc.createElement(‘option‘);
var sel_text = v[item_value];
var sel_value = v[item_key];
if(sel_value == current_val) {
$(opt1).text(sel_text).attr(‘value‘, sel_value).attr(‘text‘, sel_text).attr(‘selected‘,true).appendTo($(sel));
}else{
$(opt1).text(sel_text).attr(‘value‘, sel_value).attr(‘text‘, sel_text).appendTo($(sel));
}
});
return sel;
}
// 写一个当select变化时,批量修改下面的值和当前值一致
function MultiSelect(ths){
console.log(‘33333‘);
if(window.globalCtrlKeyPress){
console.log(‘171717171‘);
var index = $(ths).parent().index();
var value = $(ths).val();
$(ths).parent().parent().nextAll().find(‘:checkbox‘).each(function(){
$(this).parent().parent().children().eq(index).children().val(value)
})
}
}
//写一个将行变成编辑模式的函数
function RowIntoEdit(tr){
// console.log(‘1111‘)
tr.children().each(function(){
//$(this), 当前循环元素,当前td
if($(this).attr(‘edit‘) == ‘true‘){
if($(this).attr(‘edit-type‘) == ‘select‘ ){
//在线,对应的value值
var select_val = $(this).attr(‘set-val‘);
// global_key全局变量的变量名
var global_key = $(this).attr(‘global-key‘);
//创建一个select标签,并且让select标签默认选中当前的值
/*
<select onchange="MultiSelect(this);">
<option value="1" selected="selected">在线</option>
<option value="2">下线</option>
</select>
*/
var select_tag = CreateSelect({"onchange":"MultiSelect(this)"},{},window[global_key],‘id‘,‘value‘,select_val);
/*这里有一个特殊的window[global_key],这个是干什么的呢? 举个例子,现在有一个全局变量 A = [11,22]
直接调用console.log(A)打印记过 [11,22]
使用console.log(window[‘A‘]) 打印结果也是[11,22],所以 window[‘A‘] 就是变量A的用字符的表达方式,
这里global_key = ‘global-key‘,所以 window[‘global-key‘] 就相当于直接调用变量global-key
*/
//把创建后的select标签,换到当前td中
$(this).html(select_tag)
}else{
var orgin_value = $(this).text();
var temp = "<input value=‘" +orgin_value +"‘>";
$(this).html(temp);
}
}
})
}
//写一个行退出编辑模式的函数
function RowOutEdit(tr){
tr.children().each(function(){
if($(this).attr(‘edit‘) == ‘true‘){
if($(this).attr(‘edit-type‘) == ‘select‘){
var new_val = $(this).children(‘:first‘).val();
var new_text = $(this).children(‘:first‘).find("option[value = ‘" +new_val+"‘]").text();
$(this).attr(‘set-val‘,new_val);
$(this).text(new_text);
}else{
var orgin_value = $(this).children().first().val();
$(this).text(orgin_value);
}
}
});
}
//全选按钮调用的函数,函数检查是否在编辑模式下进行的全选,如果是则将所有的行选中并且循环每行调用RowIntoEdit(tr),如果不是则直接全选中
function CheckAll(mode,tb){
// mode = ‘#edit-mode‘
// tb = ‘#tb‘
//判断是否在编辑模式,如果是
if($(mode).hasClass(‘editing‘)){
//选中所有的checkbox,并将所有行进行处理成进入编辑模式.
$(tb).children().each(function(){
//找到tr
var tr = $(this);
//找到tr下的checkbox
var check_box=tr.children().first().find(‘:checkbox‘);
if(check_box.prop(‘checked‘)){
}else{
//选中
check_box.prop(‘checked‘,true);
RowIntoEdit(tr);
}
})
//如果不在编辑模式下,直接全选
} else {
$(tb).find(‘:checkbox‘).prop(‘checked‘,true);
}
}
//反选按钮调用的函数,函数检查是否在编辑模式下进行的全选,如果是反选的同时调用RowIntoEdit和RowOutEdit,如果不是直接反选
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);
RowOutEdit(tr)
}else{
check_box.prop(‘checked‘,true);
RowIntoEdit(tr)
}
});
//如果不在编辑模式,则直接反选
}else{
$(tb).find(‘:checkbox‘).each(function(){
var check_box = $(this);
if(check_box.prop(‘checked‘)){
check_box.prop(‘checked‘,false);
}else{
check_box.prop(‘checked‘,true);
}
})
}
}
//取消按钮调用的函数,首先判断是否在编辑模式下,如果是则取消并调用RowOutEdit函数,如果不是则直接取消
function CheckCancel(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);
//当前行退出编辑模式
RowOutEdit(tr);
}
});
}else{
$(tb).find(‘:checkbox‘).prop(‘checked‘,false);
}
}
//点击"进入编辑模式"时调用的函数.
function EditMode(ths,tb){
var mode = $(ths);
//如果点击前是编辑模式,点击后为非编辑模式,我们就要找到正在编辑的行tr,并使用RowOutEdit(tr)
if(mode.hasClass(‘editing‘)){
mode.removeClass(‘editing‘);
$(tb).children().each(function(){
var tr = $(this);
var check_box = tr.children().first().find(‘:checkbox‘);
if(check_box.prop(‘checked‘)){
RowOutEdit(tr)
}
});
//如果之前不是编辑模式,则进入,并循环循环行,检测是否checked,选中的进入编辑模式
} else{
mode.addClass(‘editing‘);
$(tb).children().each(function(){
var tr = $(this);
var check_box = tr.children().first().find(‘:checkbox‘);
if(check_box.prop(‘checked‘)){
RowIntoEdit(tr);
}
})
}
}
</script>
</body>
</html>
时间： 2024-10-24 19:18:05