boxgrid.js

SQLiteDBMS是SQLite数据库的管理服务器软件

var _gridDatasetMenu1=null;	//fot table: editable
var _gridDatasetMenu2=null;	//for view, query: readonly

function boxGridInit() {
	_gridDatasetMenu1=document.createElement('DIV');
	_gridDatasetMenu1.style.fontSize='8pt';
	_gridDatasetMenu1.innerHTML='Offset: <input type=text size=4 id="offset" onkeydown="numberSeqByKey(event)" onkeyup="fieldNum(this)" style="text-align:right"> Limit: <input type=text size=4 id="limit" onkeydown="numberSeqByKey(event)" onkeyup="fieldNum(this)" style="text-align:right"> <a onclick="boxTabMenuAction(this, \'grid\', \'get\')">Get</a> | <a onclick="boxTabMenuAction(this, \'grid\', \'prev\')">◀</a> <a onclick="boxTabMenuAction(this, \'grid\', \'next\')">▶</a> | <a onclick="boxTabMenuAction(this, \'grid\', \'insert\')">Insert data</a> | <a onclick="boxTabMenuAction(this, \'grid\', \'delete\')">Delete data</a>';

	_gridDatasetMenu2=document.createElement('DIV');
	_gridDatasetMenu2.style.fontSize='8pt';
	_gridDatasetMenu2.innerHTML='Offset: <input type=text size=4 id="offset" onkeydown="numberSeqByKey(event)" onkeyup="fieldNum(this)" style="text-align:right"> Limit: <input type=text size=4 id="limit" onkeydown="numberSeqByKey(event)" onkeyup="fieldNum(this)" style="text-align:right"> <a onclick="boxTabMenuAction(this, \'grid\', \'get\')">Get</a> | <a onclick="boxTabMenuAction(this, \'grid\', \'prev\')">◀</a> <a onclick="boxTabMenuAction(this, \'grid\', \'next\')">▶</a>';
}

function boxGridDataset(grid, mdi) {
	this.grid=grid;
	this.mdi=mdi;

	this.init=false;

	this.menu=null;
	this.menuDiv={};

	this.editable=false;

	this.offset=0;
	this.limit=50;
	this.order='';
	this.orderDirection='ASC';

	this.dbExec=function() {
		if (!this.init) this._init();
		if (mdi.type == 'table')
			sql='SELECT rowid, * FROM '+mdi.data.name+(this.order?' ORDER BY '+this.order+' '+this.orderDirection:'')+' LIMIT '+this.limit+' OFFSET '+this.offset;
		else
			sql='SELECT * FROM '+mdi.data.name+(this.order?' ORDER BY '+this.order+' '+this.orderDirection:'')+' LIMIT '+this.limit+' OFFSET '+this.offset;
		boxDbExec(this.mdi, sql);
		this.syncMenu();
	};

	this.dbResponse=function(dbRes) {
		var div=this.mdi.tab['Data'];
		if (!div) return;

		if (div.childNodes.length <= 0 || (dbRes.columns && dbRes.columns[0].columnname && this.grid.header.length != dbRes.columns[0].columnname.length) || div.firstChild.tagName != 'TABLE' || div.firstChild != this.grid.table || this.grid.table.rows.length <= 0) {
			while (div.childNodes.length > 0)
				div.removeChild(div.childNodes[0]);

			if (dbRes.columns && dbRes.columns[0] && dbRes.columns[0].columnname) {
				if (this.editable)
					dbRes.columns[0].columnname[0]='rowid';
				this.grid.header=dbRes.columns[0].columnname;
			}else{
				this.grid.header=arrayCopy(this.mdi.fields);
				if (this.editable)
					this.grid.header.unshift('rowid');
			}
			div.appendChild(this.grid.draw());
		}else{
			this.grid.clearData();
			if (this.grid.table && this.grid.table.rows.length > 0) {
				for (var i=0; i < this.grid.table.rows[0].cells.length; i++) {
					if (innerText(this.grid.table.rows[0].cells[i]) == this.order)
						this.grid.table.rows[0].cells[i].className='header_'+(this.orderDirection.toLowerCase());
					else if (this.grid.table.rows[0].cells[i].className != 'header')
						this.grid.table.rows[0].cells[i].className='header';
				}
			}
		}

		if (dbRes.row) {
			for (var i=0; i < dbRes.row.length; i++)
				this.grid.appendData(dbRes.row[i].data);
		}
	};

	this.orderChange=function(order) {
		if (this.order == order) {
			if (this.orderDirection == 'ASC')
				this.orderDirection='DESC';
			else
				this.orderDirection='ASC';
		}else{
			this.order=order;
			this.orderDirection='ASC';
		}
		this.dbExec();
	};

	this.syncMenu=function() {
		this.menuDiv['offset'].value=this.offset;
		this.menuDiv['limit'].value=this.limit;
	};

	this.switchAction=function(action, eventSrc) {
		switch (action) {
			case 'get':
				this.limit=number(this.menuDiv['limit'].value);
				this.offset=number(this.menuDiv['offset'].value);
				if (this.limit <= 0) this.limit=50;
				if (this.offset < 0) this.offset=0;
				this.dbExec();
			break;
			case 'prev':
				var offset=number(this.menuDiv['offset'].value);
				var limit=number(this.menuDiv['limit'].value);
				offset-=limit;
				this.menuDiv['offset'].value=offset.toString();
				this.switchAction('get');
			break;
			case 'next':
				var offset=number(this.menuDiv['offset'].value);
				var limit=number(this.menuDiv['limit'].value);
				offset+=limit;
				this.menuDiv['offset'].value=offset.toString();
				this.switchAction('get');
			break;
			case 'insert':
				//inspectorTableNewData(this.mdi.data);
				if (this.grid.selectedRow.length > 0)
					this.grid.offset=this.grid.selectedRow[this.grid.selectedRow.length-1].rowIndex+1;
				var row=this.grid.appendData();
				row.cells[0].innerHTML='<a onclick="boxTabMenuAction(this, \'grid\', \'insertCommit\')">Commit</a> | <a title="Cancel" onclick="boxTabMenuAction(this, \'grid\', \'insertCancel\')">X</a>';
				var div=this.grid.table.parentNode;
				if (div) div.scrollTop=row.offsetTop;
			break;
			case 'insertCommit':
				if (!eventSrc) return;
				var row=oFindParentByTagName(eventSrc, 'TR');
				if (!row) return;

				var header=arrayCopy(this.grid.header);
				header.splice(0, 1);
				var values=[];
				for (var i=1; i < row.cells.length; i++) {
					var val=innerText(row.cells[i]);
					if (val/* || row.cells[i].notnull*/)
						values.push(val.replace(/\'/g, '\'\''));
					else
						header.splice(i-1, 1);
				}

				var sql='BEGIN;INSERT INTO '+this.mdi.data.name+' ('+(header.join(','))+') VALUES(\''+(values.join('\', \''))+'\');COMMIT;';
				boxDbExec(this.mdi, sql, 'insert');
			break;
			case 'insertCancel':
				if (!eventSrc) return;
				var row=oFindParentByTagName(eventSrc, 'TR');
				if (!row) return;
				row.offsetParent.deleteRow(row.rowIndex);
			break;
			case 'delete':
				var checkbox=[];
				for (var i=1; i < this.grid.table.rows.length; i++) {
					if (this.grid.table.rows[i].className == 'select')
						checkbox.push(innerText(this.grid.table.rows[i].cells[0]));
				}
				if (checkbox && checkbox.length > 0) {
					if (confirm('Delete '+checkbox.length+' data?'))
						boxDbExec(grid.dataset.mdi, 'DELETE FROM "'+this.mdi.data.name+'" WHERE rowid in ('+(checkbox.join(','))+')', 'delete');
				}else
					alert('Select data to delete.');
			break;
		}
	};

	this._init=function() {
		if (mdi.type == 'table') {
			this.editable=true;
			this.menu=_gridDatasetMenu1.cloneNode(true);
		}else
			this.menu=_gridDatasetMenu2.cloneNode(true);
		this.menuDiv['offset']=oFindChild(this.menu, 'INPUT', 'offset');
		this.menuDiv['limit']=oFindChild(this.menu, 'INPUT', 'limit');
		this.init=true;
	};
}

function boxGrid() {
	this.width='';
	this.header=[];
	this.align=[];
	this.type=[];

	this.table=null;

	this.offset=-1;
	this.selectedRow=[];
	this.selectedCell=[];

	this.dataset=null;

	this.draw=function() {
		this.table=document.createElement('TABLE');
		this.table.className='grid';
		this.table.grid=this;
		if (this.width)
			this.table.style.width=this.width;
		var row=this.table.insertRow(0);
		addEvent(row, 'mousemove', boxGridHeaderResizeCursor);
		addEvent(row, 'mousedown', boxGridHeaderResizeStart);
		for (var i=0; i < this.header.length; i++) {
			var cell=row.insertCell(row.cells.length);
			cell.className='header';
			if (this.dataset) {
				var link=appendNew(cell, 'A');
				if (this.dataset.order == this.header[i]) {
					innerText(link, this.header[i]);
					if (this.dataset.orderDirection == 'DESC')
						cell.className='header_desc';
					else
						cell.className='header_asc';
				}else
					innerText(link, this.header[i]);
				link.title='Order by this column';
				addEvent(link, 'click', boxGridDatasetOrderChange);
			}else
				innerText(cell, this.header[i]);
		}
		return this.table;
	};

	this.clearData=function(rownum) {
		if (!rownum || rownum < 1) {
			while (this.table.rows.length > 1)
				this.table.deleteRow(1);
			this.selectedRow.splice(0, this.selectedRow.length);
			this.selectedCell.splice(0, this.selectedCell.length);
		}else
			this.table.deleteRow(rownum);
	}

	this.clear=function() {
		this.clearData();
		while (this.table.rows.length > 0)
			this.table.deleteRow(0);
	}

	this.appendData=function() {
		if (this.offset < 0) this.offset=this.table.rows.length;
		var row=this.table.insertRow(this.offset);
		//if (this.offset < 0 && this.table.rows.length > 100)
		//	row.style.display='none';
		this.offset=-1;
		if (isArray(arguments[0])) data=arguments[0];
		else data=arguments;
		addEvent(row, 'click', boxGridToggle);
		if (this.dataset && this.dataset.editable)
			addEvent(row, 'click', boxGridDatasetEdit);
		for (var i=0; i < data.length; i++) {
			var cell=row.insertCell(row.cells.length);
			if (this.align[i]) cell.style.textAlign=this.align[i];
			if (this.type[i] == 'html')
				cell.innerHTML=data[i];
			else
				innerText(cell, data[i]);
		}

		if (i < this.header.length) {
			for (; i < this.header.length; i++)
				var cell=row.insertCell(row.cells.length);
		}