/**
* Class: Bev.DataTable
* 表格控件。
*
* Examples:
* (code)
* Bev.loader.js("js/controls/DataTable.js",function(){
* var myDataGrid = new Bev.DataTable({
* "body":document.getElementById("div"),
* "data":[
* ["小王","16","男","87"], //数据
* ["小李","17","男","89"]
* ],
* "columnTitles":["姓名","年龄","性别","成绩"],
* "click":function(info){
* //your code
* },
* "onrefresh":function(datas){
* //your code
* },
* "mouseover":function(info){
* //your code
* },
* "mouseout":function(info){
* //your code
* }
* });
* myDataGrid.setHighlight(2);
* var data1 = myDataGrid.getDataOfCurPage();
* var data2 = myDataGrid.getAllData();
* });
* (end)
*/
Bev.DataTable = Bev.Class({
/**
* APIProperty: body
* {HTMLElement} 父容器
*/
body:
null,
/**
* APIProperty: data
* {Array<String>} 表格中要显示的数据,二维数组
*/
data:
null,
/**
* APIProperty: ColumnTitles
* {Array<String>} 每一列的标题
*/
columnTitles:
null,
/**
* APIProperty: mouseover
* {Function} mouseover事件
*/
mouseover:
null,
/**
* APIProperty: mouseout
* {Function} mouseout事件
*/
mouseout:
null,
/**
* APIProperty: click
* {Function} click事件
*/
click:
null,
/**
* APIProperty: onrefresh
* {Function} 表格刷新事件，当翻页或是其他操作导致表格刷新时，会触发该事件，并返回当前显示的数据
*/
onrefresh:
null,
/**
* APIProperty: isDisplayMenu
* {Boolean} 是否显示左上角的菜单
*/
isDisplayMenu:
true,
/**
* APIProperty: isDisplaySearch
* {Boolean} 是否显示搜索框
*/
isDisplaySearch:
true,
/**
* APIProperty: isSimplePagination
* {Boolean} 表格底部页码是否显示简版，简版只有“上一页”和“下一页”两个按钮
*/
isSimplePagination:
false,
/**
* APIProperty: isDisplayPagination
* {Boolean} 是否显示右下角的页码
*/
isDisplayPagination:
true,
/**
* APIProperty: isDisplayTableInfo
* {Boolean} 是否显示左下角表格信息
*/
isDisplayTableInfo:
true,
/**
* APIProperty: scrollHeight
* {String} 垂直滚动高度，默认为"150px"，也可以设置为"disabled"
*/
scrollHeight:
"150px",
/**
* APIProperty: scrollWidth
* {String} 水平滚动宽度，默认为"disabled"，也可以设置为数值，如："600px"
*/
scrollWidth:
"disabled",
/**
* Property: isInit
* {Boolean} 是否已经初始化
*/
isInit:
false,
/**
* Property: table
* {HTMLElement} 表格对象
*/
table:
null,
/**
* Property: userColumnTitles
* {Array<String>} 用户设置的标题数组
*/
userColumnTitles:
null,
/**
* Property: isFilesLoaded
* {Boolean} 依赖文件是否加载完成
*/
isFilesLoaded:
false,
/**
* Constructor: Bev.DataTable
* 实例化 DataTable 类。
*
* Parameters:
* options - {Object} 参数
*/
initialize: function(options) {
var me =
this;
for(
var key in options){
this[key] = options[key];
}
Bev.loader.css(
"css/demo_table_jui.css");
this.loadFiles(function(){
me.create();
window.setTimeout(function(){
me.isInit =
true;
if(!me.isDisplayMenu){
$(me.body).find(
".dataTables_length").css({
"display":
"none"});
}
if(!me.isDisplaySearch){
$(me.body).find(
".dataTables_filter").css({
"display":
"none"});
}
if(!me.isDisplayPagination){
$(me.body).find(
".dataTables_paginate").css({
"display":
"none"});
}
if(!me.isDisplayTableInfo){
$(me.body).find(
".dataTables_info").css({
"display":
"none"});
}
},
100);
});
},
/**
* APIMethod: setHighlight
* 设置某条数据高亮
*
* Parameters:
* id - {Number} 索引
*/
setHighlight:function(id){
var me=
this,tb =
this.table;
this.loadFiles(function(){
var tds,td,tr,trs;
trs = tb.find(
"tr");
for(
var i=
0;i<trs.length;i++){
tr = $(trs[i]);
tds = tr.children(
"td");
td = tds[
0];
id1 = $(td).html();
if(id1==id+
""){
me.highlight(tr);
break;
}
}
});
},
/**
* APIMethod: setUnHighlight
* 设置某条数据高亮
*
* Parameters:
* id - {Number} 索引
*/
setUnHighlight:function(id){
var me=
this,tb =
this.table;
this.loadFiles(function(){
var tds,td,tr,trs;
trs = tb.find(
"tr");
for(
var i=
0;i<trs.length;i++){
tr = $(trs[i]);
tds = tr.children(
"td");
td = tds[
0];
id1 = $(td).html();
if(id1==id+
""){
me.unHighlight(tr);
break;
}
}
});
},
/**
* APIMethod: getDataOfCurPage
* 获取当前页所显示的数据
*/
getDataOfCurPage:function(){
return this.getData(
true);
},
/**
* APIMethod: getAllData
* 获取所有数据
*/
getAllData:function(){
return this.getData(
false);
},
/**
* APIMethod: clear
* 清空表格
*/
clear:function(){
var t =
this;
this.loadFiles(function(){
if(t.table)t.table.fnClearTable();
t.data =
null;
if(t.userColumnTitles&&t.columnTitles)t.columnTitles = t.userColumnTitles.concat([]);
});
},
/**
* APIMethod: close
* 关闭
*/
close:function(){
var t =
this;
this.loadFiles(function(){
if(t.table){
t.table.fnClose();
}
});
},
/**
* APIMethod: add
* 往表格中添加数据
*
* Parameters:
* data - {Array} 新添加的数据，可以是一维数组，也可以是二维数组
*/
add:function(data){
var me =
this;
this.loadFiles(function(data){
return function(){
var vl;
if(!(data[
0] instanceof Array)){
data = [data];
}
var startIndex =
0;
if(me.data){
startIndex = me.data.length;
}
vl = me.setDataId(me.userColumnTitles.concat([]),data,startIndex);
if(me.data){
me.data = me.data.concat(vl[
1]);
}
else{
me.data = vl[
1];
}
if(me.table){
me.table.fnAddData(data);
me.registerEvernt();
}
}
}(data));
},
/**
* Method: getData
* 获取数据
*
* Parameters:
* isCurPage - {Boolean} 是否是当前页
*/
getData:function(isCurPage){
var datas=[],me=
this,tb =
this.table,tds,td,tr,trs;
if(isCurPage)trs = tb.children(
"tbody").children(
"tr");
else trs = tb.$(
"tr");
for(
var i=
0;i<trs.length;i++){
tr = $(trs[i]);
tds = tr.children(
"td");
var data = [];
for(
var j=
0;j<tds.length;j++){
data.push($(tds[j]).html());
}
datas.push(data);
}
return datas;
},
/**
* Method: create
* 创建该控件的dom对象。
*/
create:function(){
var me=
this,tb,colParam,cts,vl;
colParam = [];
me.userColumnTitles = me.columnTitles.concat([]);
vl = me.setDataId(me.columnTitles,me.data);
cts = me.columnTitles = vl[
0];
me.data = vl[
1];
for(
var i=
0;i<cts.length;i++){
colParam.push({
"sTitle":cts[i],
"sClass":
"center"
});
}
me.table = tb = $(
"<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\"></table>");
tb.appendTo($(me.body));
$(me.body).css({
"font-size":
"13px",
"font-family":
"none"
});
tb.dataTable({
"sScrollY":me.scrollHeight,
"sScrollX":me.scrollWidth,
"bJQueryUI":
true,
"sPaginationType": me.isSimplePagination?
"two_button":
"full_numbers",
"aaData":me.data,
"aoColumns":colParam,
"oLanguage": {
"sLengthMenu":
"每页显示 _MENU_ 条",
"sInfo":
"从 _START_ 到 _END_ 共 _TOTAL_ 条",
"sInfoEmpty":
"从 0 到 0 共 0 条",
"sSearch":
"搜索:",
"oPaginate": {
"sFirst":
"首页",
"sLast":
"末页",
"sPrevious":
"上一页",
"sNext":
"下一页"
}
},
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
if(me.onrefresh&&me.isInit){
window.setTimeout(function(){
var data = me.getDataOfCurPage();
me.onrefresh(data);
},
30)
}
}
});
me.registerEvernt();
},
/**
* Method: highlight
* 设置高亮
*
* Parameters:
* tr - {HTMLElement} 表格的tr对象
*/
highlight:function(tr){
var me =
this;
me.table.$(
'tr.tb_click').removeClass(
"tb_click");
me.table.$(
'td.highlighted').removeClass(
'highlighted');
tr.addClass(
"tb_click");
tr.children(
"td").addClass(
'highlighted');
},
/**
* Method: unHighlight
* 取消高亮
*
* Parameters:
* tr - {HTMLElement} 表格的tr对象
*/
unHighlight:function(tr){
var me =
this;
tr.removeClass(
"tb_click");
tr.children(
"td").removeClass(
'highlighted');
},
/**
* Method: getInformation
* 从tr上获取信息。
*/
getInformation:function(tr){
var info=[],tds,td;
tds = tr.children(
"td");
for(
var i=
0;i<tds.length;i++){
td = tds[i];
info.push($(td).html());
}
return info;
},
/**
* Method: setDataId
* 设置data上的id信息。
*/
setDataId:function(columnTitles,data,startIndex){
var me =
this,idIndex=
null,t1;
if(columnTitles&&data){
for(
var i=
0;i<columnTitles.length;i++){
if(me.isId(columnTitles[i])){
idIndex = i;
}
}
if(!startIndex)startIndex=
0;
for(
var i=
0;i<data.length;i++){
t1 = data[i];
if(idIndex==
null){
data[i].unshift(i+
1+startIndex);
}
else{
var id = t1.splice(idIndex,
1);
t1.unshift(id);
data[i] = t1;
}
}
if(idIndex==
null){
columnTitles.unshift(
"SMID");
idIndex =
0;
}
}
return [columnTitles,data];
},
/**
* Method: isId
* 判断该字段是否是id字段。
*/
isId:function(str){
if(str){
str = str.toLowerCase();
}
if(str==
"id"||str==
"smid"){
return true;
}
else{
return false;
}
},
/**
* Method: registerEvernt
* 注册事件
*/
registerEvernt:function(){
var tb =
this.table,me =
this;
tb.$(
"tr").hover(
function(){
$(
this).children(
"td").addClass(
'highlighted');
$(
this).css({
"cursor":
"pointer"
});
if(me.mouseover)me.mouseover(me.getInformation($(
this)));
},
function(){
if(!$(
this).hasClass(
"tb_click")){
$(
this).children(
"td.highlighted").removeClass(
'highlighted');
}
if(me.mouseout)me.mouseout(me.getInformation($(
this)));
}
).click(function(){
me.highlight($(
this));
if(me.click)me.click(me.getInformation($(
this)));
});
},
/**
* Method: loadFiles
* 加载依赖文件
*/
loadFiles:function(cb){
var t =
this;
if(!
this.isFilesLoaded){
Bev.loader.js(
"js/ui/jquery.dataTables.js",function(cb){
t.isFilesLoaded =
true;
window.setTimeout(function(cb){
return function(){
cb();
}
}(cb),
100);
}(cb));
}
else{
cb();
}
},
CLASS_NAME:
"Bev.DataTable"
});
