首页 > 代码库 > 全选反选取消

全选反选取消

2024-08-25 13:20:11   219人阅读

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="http://www.mamicode.com/1" selected="selected">在线</option>
                                <option value="http://www.mamicode.com/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=http://www.mamicode.com/‘" +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 = http://www.mamicode.com/‘" +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>

 

全选反选取消


联系
我们