自定义table显示列

今天呢，笔者，利用js（真的感觉，前端的一切技术都是js，或者js都能够实现）做了一个自定义table显示列的小插件。
一、假设我们有这样一个表格

<table id="201808251915">
                <tr>
                    <th>序号</th>
                    <th>测试2</th>
                    <th>测试3</th>
                    <th>测试4</th>
                    <th>测试5</th>
                    <th>测试6</th>
                    <th>测试7</th>
                    <th>测试8</th>
                    <th>测试9</th>
                    <th>测试911</th>
                    <th>测试12</th>
                    <th>测试13</th>
                    <th>测试14</th>
                </tr>
                <tbody>
                    <tr>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                        <td>雨水的气味</td>
                    </tr>
                </tbody>
            </table>

二、设计思路
①、点击自定义列时，读取当前table th的内容与对应的序号
②、数组中排除，始终显示的列
③、跳转action至复选框选择列界面（参数为：tableId、数组{[序号，列名],[序号1，列名1],.....}和<input type="hidden" name="show_table_col" id="show_table_col" value='<ss:property value="show_table_col"/>'>的值--供初始化复选框勾选事件
）
④、用户在Dialog中，点选复选框时，改写<input type="hidden" name="show_table_col" id="show_table_col" value='<ss:property value="show_table_col"/>'>的值，即时生效控制table的列显示与隐藏。
⑤、页面刷新标签以及上一页下一页之类的，默认通过$(document).ready{function() {});来控制当前table列的显示与隐藏。

三、插件配置
1、在需要控制table的显示列的位置，定义table的Id
2、当前页面若存在刷新，则需要封装show_table_col参数

<input type="hidden" name="show_table_col" id="show_table_col" value='<ss:property value="show_table_col"/>'>

和页面初始化，加载的函数

$(document).ready(function() {
        //初始化，table自定义显示
        document_function_table_show_column("<ss:property value='show_table_col'/>", '201808251915');
    });

/*初始化加载，自定义显示列 Red_Ant_Hoyl 20180825*/
    function document_function_table_show_column(show_column_num, tableId){
        if(show_column_num != ''){//判断页面初始化，或者是用户自定义的全不显示
            //用户自定义
            if(show_column_num == "empty"){//用户自定义，全不显示
                show_column_num = '';
            }
            data_single = show_column_num.split(',');
            var column_item = $("#"+tableId + " th",);
            for (var i = 0; i < column_item.size(); i++) {
                var index = $.inArray(""+i, data_single);
                if(index > -1){//含有该列，则显示
                    $("#" + tableId).find('th').eq(i).show();//处理表头
                    var tbody = $("#" + tableId).find('tbody');
                    var tbodyLst = tbody.find('tr');
                    for (var j = 0; j < tbodyLst.size(); j++) {
                        tbodyLst.eq(j).find('td').eq(i).show();
                    }
                }else{
                    $("#" + tableId).find('th').eq(i).hide();//处理表头
                    var tbody = $("#" + tableId).find('tbody');
                    var tbodyLst = tbody.find('tr');
                    for (var j = 0; j < tbodyLst.size(); j++) {
                        tbodyLst.eq(j).find('td').eq(i).hide();
                    }   
                } 
            } 
        }
    }

4、定义自定义列函数

`   <a class="btn" onclick="show_table_column('1', '201808251915', this, '显示的名称')">自定义列</a>`

function show_table_column(condition, table_id, obj, title){
        /* 考虑：1、是否留有，默认显示（是否所有列，皆可控显示） */
        var column_content = [];//table内容
        /*全部读取，th内容*/
        var column_item = $("#"+table_id + " th");
        for (var i = 0; i < column_item.size(); i++) {
            column_content.push([i, $("#"+table_id).find('th').eq(i).html()]);//追加数组
        }
        /*跳转action，弹出自定义列，对话框*/
        var old_column_content = $("#show_table_col").val();//当前用户已经选择的内容
        var whole_column = JSON.stringify(column_content);
        var tSessionId = new Date().getTime();
        var url = "selfDefinedColumn.action?t"+tSessionId + "&table_id=" + table_id + "&condition=" + condition +"&old_column_content="+old_column_content+"&whole_column="+whole_column;
        $(obj).attr("href", url);
        $(obj).attr("title","自定义" + title + "显示列");
        $(obj).attr("target","Dialog");
    }

5、后端处理

    private String table_id;//当前Table Id
    private String whole_column;//待选择的，table 列
    private String old_column_content;//已选择的数据
    private List<Object> selfColumnLst = new ArrayList<Object>();
    private String condition;//用户的默认选择数据

Boolean flag = null;//是否已选择，false是未选择 ，true是已选择
        List<String> oldLst = null;
        List<String> conditionLst = null;
        //判断当前的默认选择
        if(StringHelper.isNotEmpty(condition)){
            conditionLst = Arrays.asList(condition.split(","));
            /*那么，用户无论选啥，都不会出现，用户自定义全不显示的情况*/
        }
        if(StringHelper.isEmpty(old_column_content)){//初始化显示
            flag =  true;
        }else if(old_column_content.equals("empty")){//用户自定义全不显示
            flag = false;
        }else{//用户的自定义情况
            oldLst = Arrays.asList(old_column_content.split(","));
        }
        //解析Json数组，加载全部自定义列
        try {
            String now_column = new String(whole_column.getBytes("ISO-8859-1"), "utf-8");
            JSONArray wholeArray = new JSONArray(now_column);
            for (int i = 0; i < wholeArray.length(); i++) {
                JSONArray jsarray1 = new JSONArray(wholeArray.get(i).toString());
                Object[] obj = new Object[4];
                obj[0] = jsarray1.get(0).toString();//table 列所在位置
                obj[1] = jsarray1.get(1).toString();//table 列内容
                if(conditionLst != null && conditionLst.size() > 0){
                    if(conditionLst.contains(obj[0])){
                        obj[3] = false;//当前列不做选择显示
                    }
                }
                if(flag != null){
                    obj[2] = flag;
                }else{
                    if(oldLst != null && oldLst.size() > 0){
                        if(oldLst.contains(obj[0])){
                            obj[2] = true;
                        }else{
                            obj[2] = false;
                        }
                    }
                }
                selfColumnLst.add(obj);
            }
        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

6、Dialog中

        <div align="center" style="width: 230px;">
            <form class="form-horizontal form-validate" id="self_show_table_column_form" method="post" name="self_show_table_column_form" style="width: 200px !important;">
                <table class="table table-bordered" style="width: 200px;">
                    <tbody>
                        <tr>
                            <td style="padding-bottom: 1px !important; padding-top: 0px !important;">
                                <input group="ids" id="checkbox_all" onclick="checkAll(this);" class="cleck-all" type="checkbox"/>
                            </td>
                            <td style="border:0px;padding-bottom: 1px !important; padding-top: 0px !important;">
                                全选
                            </td>
                        </tr>
                        <ss:iterator value="selfColumnLst" status="rowstatus">
                            <ss:set name="record" value="selfColumnLst[#rowstatus.index]"/> 
                            <tr <ss:if test="#record[3] == false">style="display: none;" class="biechongle"</ss:if>>
                                <td style="padding-bottom: 1px !important; padding-top: 0px !important;">
                                    <input type="checkbox" name="show_table_column_items" value="<ss:property value='#record[0]'/>" <ss:if test="#record[2] == true">checked="true"</ss:if>/>
                                </td>
                                <td class="text-center" style="padding-bottom: 1px !important; padding-top: 0px !important;">
                                    <ss:property value="#record[1]" />
                                </td>
                            </tr>
                        </ss:iterator>
                    </tbody>
                </table>
                <div class="set-btn" data-spy="affix" data-offset-top="200" align="center" style="margin-right: 25px;">
                    <a css="btn green" caption="确定" onclick="make_table_column();" />
                    <a type="button" css="btn" caption="取消" onclick="closeDialog();" />
                </div>
            </form>
        </div>
        <script>
            function make_table_column(){
                var ids=[];
                var tableId = "<ss:property value='table_id'/>";
                var obj = $("input[name='show_table_column_items']");
                for(var i=0; i<obj.length;i++){
                    if(obj[i].checked){
                        ids.push(obj[i].value);
                        $("#" + tableId).find('th').eq(i).show();//处理表头
                        $("#" + tableId).find('th').eq(i).removeAttr("name");
                        $("#" + tableId).find('th').eq(i).attr("name","show");//给显示的th夹那么属性
                        /*处理td*/
                        debugger;
                        var tbody = $("#" + tableId).find('tbody');
                        var tbodyLst = tbody.find('tr');
                        for (var j = 0; j < tbodyLst.size(); j++) {
                            tbodyLst.eq(j).find('td').eq(i).show();
                        }
                    }else{
                        $("#" + tableId).find('th').eq(i).removeAttr("name");
                        $("#" + tableId).find('th').eq(i).hide();//处理表头
                        /*处理td*/
                        var tbody = $("#" + tableId).find('tbody');
                        var tbodyLst = tbody.find('tr');
                        for (var j = 0; j < tbodyLst.size(); j++) {
                            tbodyLst.eq(j).find('td').eq(i).hide();
                        }   
                    }
                }
                if(ids.length > 0){//判断用户全选择不显示，还是页面的初始化
                    $("#show_table_col").val(ids);
                }else{
                    $("#show_table_col".val("empty");
                } 
                closeDialog();
            }

            function checkAll(obj){
                if(obj.checked){
                    $("input:checkbox").attr("checked",true);
                }else{
                    $("input:checkbox").attr("checked",false);
                    $("#self_show_table_column_form").find("tbody tr:hidden").find("input:checkbox").attr("checked",true);
                }

            }
        </script>

转载于:https://blog.51cto.com/13479739/2164336