- 用途：為當前后臺框架中的列表加上一個可動態選擇顯隱的按鈕列表
可控表格對應列的顯隱；
- 使用方法：在頁面引用插件后，新建一個 ColumnSwitcher對象；
在頁面Razor組件queryed回調函數中，調 用 ColumnSwitcher.Update ()方法即可
- 使用范例：
```
var tool = new Sail.RazorPage( "" , "Student" , "StudentId" );
//新建 ColumnSwitcher 對象
var switcher = new ColumnSwitcher();
tool.CreatePage({
titles: [ "姓名" , "學號" , "年級" , "性別" , "年齡" , "操作" ],
titleWidth: [0, 0, 0, 0, 0, 120],
queryed: function (result) {
//調用UpdateTable方法
switcher.UpdateTable( );
}
});
```
- 源碼詳解
```javascript
//引號中為默認值：
//list: ".tableColumn",按鈕下拉菜單容器
//table: "#pageList",頁面表單的容器
//listTmpl: "#columnTmpl", 按鈕下拉菜單的模版
//cookieName: "listModel" 保存時的名稱后綴
function ColumnSwitcher(settings) {
var set = $.extend({ list: ".tableColumn", table: "#pageList", listTmpl: "#columnTmpl", cookieName: "listModel" }, settings);
this.model = [];
this.cookieName = set.cookieName;
this.list = set.list;
this.table = set.table;
this.listTmpl = set.listTmpl;
this.diff = false;
}
```
```javascript
//獲取當前頁面列表的顯隱結構生成數據，若已存cookie則讀取其中的數據
//selector為表格所在容器，默認為#pageList
//indexStart，indexEnd為需動態顯隱的列表起始序號與結尾序號，默認為第二列至倒數第二列；
//當indexStart，indexEnd不為默認值時會重置cookie
ColumnSwitcher.getModel = function (selector, indexStart, indexEnd) {}
var model = [];
if (indexStart !== 0 && !indexStart) {
indexStart = 1;
} else {
indexStart = indexStart === 0 ? 0 : indexStart - 1;
$.cookie(this.cookieName, "");
}
$(selector).find("thead th").each(function () {
model.push({ key: $(this).text(), value: true });
});
if (!indexEnd) {
indexEnd = model.length - 1;
} else {
$.cookie(this.cookieName, "");
}
return model.slice(indexStart, indexEnd);
}
```
```javascript
//控制表格列動態顯隱的方法，參數默認為ColumnSwitcher的table參數
ColumnSwitcher.prototype.display = function (selector) {
var that = this;
$(selector).find("li").each(function () {
var table = that.table;
var isShow = $(this).data("value");
var index = $(this).data("key");
var title = $(table).find("thead th").eq(index);
var length = $(table).find("thead th").length;
var foot = $(table).find("tr").last().find("th").eq(index);
if (isShow) {
title.show();
foot.show();
} else {
title.hide();
foot.hide();
}
$(table).find("tbody tr")
.each(function () {
var actuallyLen = $(this).find("td").length;
console.log(index - (length - actuallyLen))
var column = $(this).find("td").eq(index - (length - actuallyLen));
isShow ? column.show() : column.hide();
});
});
}
```
```javascript
//根據getModel獲得數據渲染按鈕下拉列表
ColumnSwitcher.prototype.renderList = function () {
var selector = $(this.table).find(this.list);
var cookie = $.cookie(this.cookieName);
console.log(this.model);
if (cookie) {
this.model = JSON.parse(cookie);
}
$(selector).Link(this.listTmpl, this.model);
this.display(selector);
}
```javascript
//為下拉列表按鈕綁定click事件
ColumnSwitcher.prototype.bindList = function () {
var that = this;
$(this.list).on("click", "li", function () {
var $this = $(this);
var index = $this.data("key");
var value = $this.data("value");
var temp = that.model;
temp[index - 1].value = !value;
$.observable(that.model).refresh(temp);
$.cookie(that.cookieName, JSON.stringify(temp), { exprires: 30 });
that.display(that.list);
});
}
```
```javascript
//暫定為需外部顯式調用的函數
//prefix為cookie名稱的前綴，若不傳則用默認值
//indexStart，indexEnd為需動態顯隱的列表起始序號與結尾序號，默認為第二列至倒數第二列；
//當indexStart，indexEnd不為默認值時會重置cookie
ColumnSwitcher.prototype.ControllerList = function (prefix, indexStart, indexEnd) {
if (prefix && !this.diff) {
this.cookieName = prefix + "_" + this.cookieName;
this.diff = true;
}
this.model = this.getModel(this.table, indexStart, indexEnd);
this.renderList();
this.bindList(); }
```
