list1.1.js

java script web控件 包含了树 列表 表单的操作

function SigmaListRow(list,id){
	this.value = list.getRowDataObjById(id);
	this.cells = new Object();
	this.grid = list;
	this.id = id;
	var oThis = this;
	var columns = list.columns;
	for(var i=0;i<columns.length;i++){
		var column = columns[i];
		var cell = new SigmaListCell(oThis,column);
		this.cells[column.name] = cell;
	}

	this.getElement = function(){
		var rows = list.getElement().all("dataTable").rows;
		for(var i=0;i<rows.length;i++){
			var row = rows[i];
			if(row.l_r_id == oThis.id){
				return row;
			}
		}
		return null;
	}

	this.setSelected = function(s){
		var e = oThis.getElement();
		if(e!=null){
			if(s==true){
				e.className = "selected";
			}else{
				e.className = "";
			}
		}
		selected = oThis.grid.selectedIds;
		if(s==true){
			if(selected.contains(oThis.id)){
			}else{
				selected[selected.length] = oThis.id;
			}
		}else{
			selected.remove(oThis.id);
		}
		oThis.grid.onSelect();
	}
}

function SigmaListCell(row,column){
	this.grid = row.grid;
	this.column = column;
	this.row = row;

	var oThis = this;
	this.getValue = function(){
		return oThis.grid.getPropertyOfObj(oThis.row.value,oThis.column.name);
	}
}

function SigmaList (){
	this.columns = null;
	this.data = [];
	this.dataIndexer = null;   //行数据索引
	this.context = null;
	this.element = document.createElement("div");
	this.element.className = "SigmaList";
	this.element.style.height = "100%";
	this.element.style.overflow = "auto";
	this.columnHeaders = new Object();
	this.rowHeight = 20;
	this.headerHeight = 20;
	this.selectedIds = new Array();
	this.from = 0;
	var idSequence = 0;

	this.getNextRowId = function(){
		idSequence ++;
		return idSequence;
	}


	this.rows = new Object();


	this.getRowDataObjById = function(id){
		if(oThis.dataIndexer == null){
			oThis.dataIndexer = new Object();
			for(var i=0;i<oThis.data.length;i++){
				var rowData = oThis.data[i];
				oThis.dataIndexer[rowData.l_r_id] = rowData;
			}
		}
		return oThis.dataIndexer[id];
	}

	SigmaObject.call(this);

	this.getSelectedRows = function(){
		var r = new Array();
		for(var i=0;i<oThis.selectedIds.length;i++){
			var row = oThis.getRow(oThis.selectedIds[i]);
			r[r.length] = row;
		}
		return r;
	}

	var sb = [];
	sb[sb.length] = '<div id="headerArea" style="border:0;overflow:hidden;position:relative;height:20;width:100%;"> ';
	sb[sb.length] = '<table id="headTable" cellspacing=0 cellpadding=0 border=0 style="z-index:-1;table-layout:fixed;position:relative;"></table>';
	sb[sb.length] = '</div>';
	sb[sb.length] = '<div id="listBox" class="listBox" style="width:99%;overflow:auto;">';
	sb[sb.length] = '<div id="listArea" style="z-index:1;height:2;">';
	sb[sb.length] = '</div>';
	sb[sb.length] = '</div>';
	
	this.element.innerHTML = sb.join("");
	this.headTable = this.element.all("headTable");
	this.sLeft = 0;
	this.element.all("listBox").onscroll = function(){
		if(this.scrollLeft!=oThis.sLeft){
			oThis.sLeft = this.scrollLeft;
			oThis.headTable.style.left = -oThis.sLeft;
		}else{
			var from = this.scrollTop/oThis.rowHeight;
			var y = this.scrollTop % oThis.rowHeight
			if(y>0){
				from++;
			}
			var s = (""+from).split(".");
			from = parseInt(s[0]);
		
			oThis.paintCurrentRows(from);
			oThis.element.all("dataTable").style.top = this.scrollTop;
		}
	}
	
	this.getElement = function(){
		return this.element;
	}
	
	var oThis = this;

	this.setContext = function(context){
		oThis.context = context;
	}

	this.resize = function(){
		var box = oThis.element.all("listBox");
		
		box.style.height = oThis.element.offsetHeight - oThis.headerHeight-2;
		box.style.width = oThis.element.offsetWidth -2;
		var area = oThis.element.all("listArea");
		area.style.width = oThis.element.all("headTable").offsetWidth -2;
	}

	this.resizeArea = function(){
		var area =  oThis.element.all("listArea");
		area.style.height = oThis.data.length * oThis.rowHeight;
		
		if(oThis.data.length * oThis.rowHeight==0)
			area.style.height=1;
	}



	this.bindHeader = function(columns){
		oThis.element.style.width = oThis.element.offsetWidth;
		this.columns = columns;
		try{
			this.headTable.deleteRow(0);
		}catch(e){
		}

		var row = this.headTable.insertRow();
		var start = 0;
		
		if(oThis.context.checkBox){
			var cell = row.insertCell(start);
			/*var input = document.createElement("input"); 
			input.type = "checkbox";
			input.onclick = function(){
				oThis.selectAll(this.checked);
			};
			cell.appendChild(input);
			*/
			cell.innerText = " ";
			cell.className = "header";
			cell.style.width = 40;
			start++;
		}else if(oThis.context.radioBox){
			var cell = row.insertCell(start);
			start++;
			cell.className = "header";
			cell.style.width = 40;
			cell.innerText = " ";
		}
		if(oThis.context.sequence){
			var cell = row.insertCell(start);
			cell.innerText = "序号";
			cell.className = "header";
			cell.style.width = 40;
			start++;
		}

		for(var i=0;i<oThis.columns.length;i++){
			var column = oThis.columns[i];
			var cell = row.insertCell(start+i);
			cell.column = column;
			cell.className = "header";
			cell.innerText = column.caption;
			width = getColumnWidth(column);
			cell.style.width = width;
			oThis.columnHeaders[column.name] = cell;
		}
		oThis.resize();
	}

	this.bindData = function(data){
		this.data = data;
		//给每行的数据生成id号
		for(var i=0;i<data.length;i++){
			data[i].l_r_id = oThis.getNextRowId();
		}

		oThis.resizeArea();
		var columnsNum = oThis.columns.length+1;
		if(oThis.context.checkBox){
			columnsNum++;
		}else if(oThis.context.radioBox){
			columnsNum++;
		}
		if(oThis.context.sequence){
			columnsNum++;
		}
		oThis.paintCurrentRows(0);
	}

	var visibleHeight = null;
	var visibleRowsAmount = null;
	this.getVisibleRowsAmount = function(){
		if(visibleRowsAmount==null){
			var h = oThis.getVisibleHeight();
			visibleRowsAmount = oThis.divide(h,oThis.rowHeight);
		}
		return visibleRowsAmount;
	}

	this.getVisibleHeight = function(){
		if(visibleHeight==null){
			visibleHeight = oThis.element.all("listBox").offsetHeight;
		}
		return visibleHeight;
	}


	this.divide = function(a,b){
		var r = ""+a/b;
		var s = r.split(".");
		return parseInt(s[0]);
	}

	this.paintCurrentRows = function(from){
		var listArea = oThis.element.all("listArea");
		var sb = new Array();
		sb[sb.length] = '<table id="dataTable" cellspacing=0 cellpadding=0 border=0 style="table-layout:fixed;position:relative;">';
		var rowsAmount = oThis.getVisibleRowsAmount();
		var end = from + rowsAmount;
		if(end>=oThis.data.length){
			end = oThis.data.length-1;
		}
		this.from = from;
		for(var i=from;i<=end;i++){
			var rowData = oThis.data[i];
			rowData._index = i;
			sb[sb.length] = oThis.paintRow(rowData);
		}
		sb[sb.length] = '</table>';
		listArea.innerHTML = sb.join("");

		//改变选中行的样式
		oThis.refreshStateOfSelectedRow();

	}

	this.refreshStateOfSelectedRow = function(){
		var table = oThis.element.all("dataTable");
		var rows = table.rows;
		for(var i=0;i<rows.length;i++){
			var row = rows[i];
			var id = row.l_r_id;
			var rowObj = oThis.getRow(id); 
			if(oThis.selectedIds.contains(id)){
				row.className = "selected";
				if(oThis.context.checkBox==true||oThis.context.checkBox==true){
					row.cells[0].children[0].checked = true;
				}
			}
		}
	}

	this.paintRow = function(rowData){
		var sb = [];
		sb[sb.length] = "<tr l_r_id="+rowData.l_r_id+">";
		if(oThis.context.checkBox==true){
			sb[sb.length] = '<td align="center" style="width:40;">';
			sb[sb.length] = '<input type="checkbox" name="auto_check"';
			sb[sb.length] =' onclick="list_onCheckBoxClicked(';
			sb[sb.length] = oThis.getId() + ',';
			sb[sb.length] = rowData.l_r_id + ',';
			sb[sb.length] = 'this.checked)"></td>';
			
		}else if(oThis.context.radioBox==true){
			sb[sb.length] = '<td align="center" style="width:40;">';
			sb[sb.length] = '<input type="radio" name="auto_radio"></td>';
		}

		if(oThis.context.sequence==true){
			sb[sb.length] = '<td align="center" style="width:40;">';
			sb[sb.length] = (rowData._index+1) + '</td>';
		}

		var columns =oThis.columns;
		for(var i=0;i<columns.length;i++){
			sb[sb.length] = oThis.paintCell(rowData,columns[i]);
		}
		sb[sb.length] = "</tr>";
		return sb.join("");
	}

	this.paintCell = function(rowData,column){
		var data = null;
		var align = "";