- 用途：为当前后台框架中的列表加上一个可动态选择显隐的按钮列表
可控表格对应列的显隐；
- 使用方法：在页面引用插件后，新建一个 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(); }
```
