//创建组件
function Grid(args){
//判断各种重要数据是否存在
try{
//如果渲染区域不存在
if(!args.renderTo){
throw "渲染区域不存在";
}
//判断初始化数据是否存在
if(!args.colums){
throw "必要数据“列名”不存在";
}
//判断初始化数据是否存在
if(!args.dataSource){
throw "渲染数据不存在";
}
//点击事件
if(args.onClick && !(typeof args.onClick == 'function')){
throw "点击事件必须是一个function，现在的数据类型是："+typeof args.onClick ;
}
}catch(e){
alert("Grid组件初始化失败，原因："+e);
}
//调用初始化事件
this.init(args);
}
//初始化事件
Grid.prototype.init = function(args){
//获取渲染地址
this.renderTo = args.renderTo;
//获取父元素
this.renderTo = $("#"+this.renderTo);
this.renderTo.addClass("my-grid");
//获取渲染数据
this.dataSource = args.dataSource;
//获取表格的列名
this.colums = args.colums;
//点击事件
this.onClick = args.onClick && typeof args.onClick == "function" ? args.onClick : function(){};
//带取分页参数
if(args.postData){
//判断是否传递参数
if(args.postData.pageSize == null){
args.postData.pageSize = 10;
}
if(args.postData.pageNum == null){
args.postData.pageNum = 11;
}
}else{
args.postData = {
pageSize:10,
pageNum:1
};
}
this.postData=args.postData;
//将数据缓存到当前父元素身上
this.renderTo.data("args",args);
//创建组件
this.byDataSource();
};
//根据dataSource获取数据
Grid.prototype.byDataSource = function(){
var t = this;
if(typeof t.dataSource == 'string'){
/*$.ajax({
type: "POST",
url: t.dataSource,
success: function(res){
t.dataSource = JSON.parse(res);
t.bulid();
}
});*/
//使用post提交方式
$.post(t.dataSource,t.postData,function(res){
t.dataSource =res;
t.bulid();
},"json");
}else{
t.bulid();
}
};
//表格刷新
Grid.prototype.reload = function(pageSize,pageNum){
var t =this;
//从当前父元素身上将数据取出
var args = t.renderTo.data("args");
if(pageSize){
args.postData.pageSize = pageSize;
}
if(pageNum){
args.postData.pageNum = pageNum;
}
//重新加载表格
t.init(args);
} ;
//创建页面元素
Grid.prototype.bulid = function(){
var t = this;
//获取父元素
/*this.renderTo = $("#"+this.renderTo);
this.renderTo.addClass("my-grid");*/
//清空之前的数据
this.renderTo.html("");
//创建table标签
this.grid = $('').appendTo(this.renderTo);
//创建thead标签
this.head = $('').appendTo(this.grid);
//创建thead标签中的tr标签
this.theadTr = $('|
').appendTo(this.head);
//创建thead中th标签
$(t.colums).each(function(i,colum){
//创建th
var th=$(''+colum.name+' | ').appendTo(t.theadTr);
if(colum.hide){
th.addClass("hidden");
}
});
//创建tbody标签
this.tbody = $('').appendTo(this.grid);
//创建tbody中的tr
$(t.dataSource.rows).each(function(i, row){
var tbodyTr = $('|
').appendTo(t.tbody);
//向tbody中的tr添加td数据
$(t.colums).each(function(i,col){
//旧字段表示从数据库中传过来的数据，新字段表示格式化后的字段
var oldText ,newText;
oldText = newText = row[col.alins];
//保存格式化之前的数据
if(col.originalFomatter && typeof col.originalFomatter == "function" ){
oldText = col.originalFomatter(oldText);
}
//格式化数据
if(col.formatter && typeof col.formatter == "function"){
newText = col.formatter(row[col.alins]);
}
var td=$(''+newText+' | ').appendTo(tbodyTr);
if(col.hide){
td.addClass("hidden");
}
if(col.align){
td.addClass("align"+col.align);
}
/*if(col.money==1){
$('').appendTo(this.td);
}*/
});
});
//封装分页组件
var arrPage = [];
arrPage.push('');
//将分页组件添加到表格组件中
var pageText = $(arrPage.join(""));
pageText.appendTo(t.renderTo);
//选择样式
this.selectitem=$('');
this.selectitem.appendTo(t.renderTo);
//悬浮样式
this.hoveritem=$('');
this.hoveritem.appendTo(t.renderTo);
//调用事件
t.bindEvent();
};
//事件绑定
Grid.prototype.bindEvent = function(){
var t = this;
$("#edit-btn").addClass("btn-disable");
$("#remove-btn").addClass("btn-disable");
$(".gridtr",t.renderTo).click(function(){
//判断当前选中行是否具有grid-select
if($(this).hasClass("grid-select")){
$(this).removeClass("grid-select");
}else{
$(".gridtr",t.renderTo).removeClass("grid-select");
$(this).addClass("grid-select");
}
//调用点击事件
t.onClick({
"id":$(this).attr("data-id")
});
});
//实例化下拉列表
new DDL({
"renderTo":$(".pageSize",t.renderTo).attr("id") ,
"dataSource":[{
"id":10,
"name":10
},{
"id":20,
"name":20
},{
"id":50,
"name":50
}],
"beginOffset":1,
"direction":"up",
"offset":0,
"mapping":{ //匹配映射关系
"key":"id",
"value":"name"
},
"defaultSelect":parseInt(t.postData.pageSize),
"onClick":function(obj){
//alert(obj.key);
t.reload(obj.key, 1);
}
});
//下一页按钮点击事件
$("#nextPage",t.renderTo).click(function(){
//获取最大页数
var maxPage = parseInt($(".total",t.renderTo).text());
//当前页数+1
var page = parseInt($(".currPage",t.renderTo).text())+1;
if(page >= maxPage){
page = maxPage;
}
$(".currPage",t.renderTo).html(page);
//刷新表格
//t.reload($(".selectDdlItem",t.renderTo).attr("data-index"), page);
t.reload(t.postData.pageSize, page);
});
//上一页按钮点击事件
$("#prevPage",t.renderTo).click(function(){
//获取最大页数
var maxPage = parseInt($(".total",t.renderTo).text());
//当前页数-1
var page = parseInt($(".currPage",t.renderTo).text())-1;
if(page <=1){
page = 1;
}
$(".currPage",t.renderTo).html(page);
//刷新表格
//t.reload($(".selectDdlItem",t.renderTo).attr("data-index"), page);
t.reload(t.postData.pageSize, page);
});
//跳转
$("#jump", t.renderTo).click(function(){
var pagetext=parseInt($("#jumptext",t.renderTo).val());
t.reload(t.postData.pageSize, pagetext);
});
};
