js编写list控件（参照网上原型用法）

function map()
{
this.keys = [];
this.values = [];
}


map.prototype.push = function(key,value)
{
if(this.exist(key) == -1)
{
this.keys.push(key);
this.values.push(value);
}
}


map.prototype.remove = function(key)
{
var index = this.exist(key);
if(index != -1)
{
this.keys.slice(index,1);
this.values.slice(index,1);
}
}


map.prototype.find = function(key)
{
var index = this.exist(key);
if(index != -1)
 return this.values[index];
    return null;  
}


map.prototype.exist = function(key)
{
var length = this.keys.length;
for(var i = 0; i < length; ++i)
{
if(key == this.keys[i])
{
return i;
}
}
return -1;
}


/*
  文字属性:
  var HeaderCols = 
  [
{"id":1,"name":"code","alias":"名称","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false},
{"id":2,"name":"newPrice","alias":"现价","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false},
{"id":3,"name":"change","alias":"涨跌","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false},
{"id":4,"name":"%chg","alias":"涨跌幅","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false},
{"id":5,"name":"volume","alias":"成交量","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false},
{"id":6,"name":"position","alias":"持仓量","width":50,"sort":false,"align":"left","focus":false,"descend":false,"change":false}
  ]
  
  var HeaderAttrs =
  {
"useForeColor":true,
"backColor":"black",
"foreColor":"#222222",
"gradientColor1":"white",
"gradientColor2":"black",
"operate":true;
"lineWidth":1,
"lineColor":"#222222",
"wordColor":"white",
"wordFontSize":14,
"wordFontName":"arial";
"height":25,
"autoCol":true
  }
*/


function listHeader()
{
//表头列
this.headerCols = null;

//绘制属性
this.headerAttrs = 
{
"useForeColor":false,
"backColor":"black",
"foreColor":"#222222",
"gradientColor1":"#474747",
"gradientColor2":"#2B2B2B",
"operate":true,
"borderWidth":0.5,
"lineWidth":0.5,
"lineColor":"#202020",
"wordColor":"blue",
"wordFontSize":14,
"wordFontName":"normal normal 500 15px  Arial",
"height":20,
"arrowWidth":6,
"autoCol":true
}

//回调函数
this.headerClicked = null;

//表头区域
this.headerLinkArea = [];

//表头区域
this.headerClient = null;

//自定义绘制函数;
this.drawCurFunc = null;

//画笔;
this.context = null;
}


listHeader.prototype.setCols = function(cols)
{
if(cols == null)
{
return;
}
this.headerCols = cols;
}


listHeader.prototype.setAttrs = function(attrs)
{
if(attrs == null)
{
return;
}
this.headerAttrs = attrs;
}


listHeader.prototype.setContext = function(context)
{
if(context == null)
{
return;
}
this.context = context;
}


listHeader.prototype.setDrawCurFunc = function(func)
{
if(func == null)
{
return;
}
this.drawCurFunc = func;
}


listHeader.prototype.getHeaderHeight = function()
{
if(this.headerAttrs == null)
{
return 0;
}
return this.headerAttrs["height"];
}


listHeader.prototype.getColCount = function()
{
if(this.headerCols == null)
{
return 0;
}
return this.headerCols.length;
}


listHeader.prototype.getColItem = function(index)
{
if(this.headerCols == null || index <0 || index >= this.headerCols.length)
{
return null;
}

return this.headerCols[index];
}


listHeader.prototype.getLinkItem = function(index)
{
if(this.headerLinkArea == null || index <0 || index >= this.headerLinkArea.length)
{
return null;
}

return this.headerLinkArea[index];
}




listHeader.prototype.updateArea = function(Area)
{
if(Area == null || this.headerAttrs == null ||
    this.headerCols == null ||this.headerCols.length <= 0)
{
return;
}

this.headerClient = Area;

//数组清空;
this.headerLinkArea = [];
var size = this.headerCols.length;
//自动分割;
if(this.headerAttrs["autoCol"])
{
var fitWidth = Math.floor(Area["width"] / size);
for(var i = 0; i < size; ++i)
{
var colArea = {};
colArea["x"] = Area["x"] + i * fitWidth;
colArea["y"] = Area["y"];
colArea["width"] = fitWidth;
colArea["height"]= Area["height"];
if(i == size - 1)
colArea["width"] = Area["width"] - fitWidth * (size - 1);
this.headerLinkArea.push(colArea);
}        
}//自定义分割;
else
{
var offset = 0;
for(var i = 0; i < size; ++i)
{
var colArea = {};
colArea["x"] = Area["x"] + offset;
colArea["y"] = Area["y"];
colArea["width"] = this.headerCols[i]["width"];
colArea["height"]= Area["height"];
this.headerLinkArea.push(colArea);
//偏移量
offset += colArea["width"];
}
}
}


listHeader.prototype.drawCurItem = function(headerItem,linkArea,i)
{
if(headerItem == null || linkArea == null || this.headerAttrs == null)
{
return;
}

//填充前景色及边框
this.drawFore(linkArea,i);

//绘制文字
this.drawWord(headerItem,linkArea,i);

//绘制箭头
//this.drawArrow(linkArea,i);
}


listHeader.prototype.drawBack = function()
{
if(this.context == null || this.headerAttrs == null || this.headerClient == null)
{
return;
}
this.context.save();
this.context.fillStyle = this.headerAttrs["backColor"];
this.context.fillRect(this.headerClient["x"], this.headerClient["y"], this.headerClient["width"], this.headerClient["height"]);
this.context.restore();
}


listHeader.prototype.drawFore = function(linkArea,i)
{
if(this.context == null || this.headerAttrs == null
  || this.headerClient == null || this.headerLinkArea.length < 0)
{
return;
}

this.context.save();
//绘制前景色;
if(this.headerAttrs["useForeColor"])
{
this.context.fillStyle = this.headerAttrs["backColor"];
this.context.fillRect(linkArea["x"], linkArea["y"], linkArea["width"], linkArea["height"]);
this.drawBorder(linkArea,i);
}
else
{
var gradient = this.context.createLinearGradient(linkArea["x"] + 1, linkArea["y"] + 1, linkArea["width"] - 2, linkArea["height"] - 2);
gradient.addColorStop(0,this.headerAttrs["gradientColor1"]);
gradient.addColorStop(1,this.headerAttrs["gradientColor2"]);
this.context.fillStyle = gradient;
this.context.fillRect(linkArea["x"] + 1,