今天呢，笔者，利用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>
