jquery.dataTables表格列動態顯示隱藏封裝(二)

jquery.dataTables 提供了列的顯示隱藏方法。
做過企業管理項目前台的程式員可能都知道，許多使用者在查看一些業務資料的時候，喜歡將表格不關心的資料進行隱藏。便於資訊的比對與查看。在此我對jquery.dataTables的控制項做了一個簡單的封裝，將表格列的顯示與隱藏功能做成一個小的控制項，先看下效果圖。

點擊checkbox 將勾去掉則將該列進行隱藏，勾上則表示將該列進行顯示。這裡我們將第一、二以及最後一列都進行隱藏，效果如圖：

實現步驟：
第一步：需要在搜尋方塊後面添加一排按鈕，然後點擊最後的按鈕時，能彈出一個下拉式清單。我這裡html代碼如下，前提條件時我用了bootstrap架構作為自己的基礎架構。

<!--按鈕的代碼--><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-th icon-th"></i> <span class="caret"></span></button><!--點擊按鈕會彈出下面的相應的下拉式清單--><ul class="dropdown-menu" role="menu"><li data-column="1"><label><input data-column="1" type="checkbox" data-field="name" value="1" checked="checked"> 序號</label></li><li data-column="2"><label><input data-column="2" type="checkbox" data-field="date" value="2" checked="checked">選</label></li><li data-column="3"><label><input type="checkbox" data-field="amount" data-column="3" checked="checked">角色名稱</label></li><li data-column="4"><label><input type="checkbox" data-field="user-status" data-column="4"> 排序號</label></li><li data-column="5"><label><input data-column="5" type="checkbox" data-field="user-status" value="4"> 操作</label></li></ul>

第二步：將jquery.dataTables表格列隱藏顯示的操作封裝成一個公用的function

//jTable為jquery.dataTables表格對象//colNum為操作列的序號 為整形數字function hidColumn(jTable, colNum) {    var column = jTable.column(colNum);    column.visible(!column.visible());}

第二步：編寫下拉li裡面的點擊事件

//通過jquery 尋找到相應每個li  並註冊其點擊事件 $("#" + tableDivId + " .dropdown-menu").find("li").click(function (e) { //由於列的隱藏與顯示是由checkbox的true、false來控制的。所以點擊時首先需要擷取每行checkbox目前的選擇狀態        var val = $(this).find(".hideColCheck").prop("checked");        if (val == true) {            //表示隱藏操作            hidColumn(jTable, $(this).attr('data-column'));        } else {            //表示顯示操作            hidColumn(jTable, $(this).attr('data-column'));        }        //列操作後 需要將checkbox的值進行切換        $(this).find(".hideColCheck").prop("checked", !val);        //阻止事件冒泡 目的是不使下拉式清單隱藏，如果不加這句話就會每點擊一行，下拉式清單就隱藏咯        e.stopPropagation();    })

第三步：編寫checkbox的點擊事件
寫到第二步時，並不表示完成了封裝，這樣有個問題，點擊checkbox的時候，你會發現列的顯示、隱藏狀態，跟checkbox的選中狀態是不統一的。這是因為點擊checkbox會觸發狀態的變化，同時checkbox又是li元素的子項目，這樣會觸發li註冊的點擊事件，這樣就會導致checkbox的狀態變化倆次，為瞭解決這問題，就只能將事件註冊給checkbox然後阻止事件冒泡。函數的內容跟li的內容基本是一樣的。

 $("#" + tableDivId + " .dropdown-menu").find(".hideColCheck").click(function (e) {        e.stopPropagation();        var val = $(this).prop("checked");        if (val == true) {            //表示隱藏操作            hidColumn(jTable, $(this).attr('data-column'));        } else {            //表示顯示操作            hidColumn(jTable, $(this).attr('data-column'));        }    })