4. javascript tabelle

javascript tabelle

  • U

    hallo.
    zu erst mal: ich habe nicht besonders viel erfahrung mit javascript (wird denke ich auch gleich ersichtlich).

    ich habe eine tabelle gebaut und möchte dynamisch regeln für bestimmte spalten erstellen. das geschieht so:
    (in $exec->output[] ist ein langer string, der dann in die tabelle gehört. in der ersten zeile der kopf samt formatierungsstrings, in den folgenden zeilen jeweils eine zeile der tabelle)

    $js_code .= '<script>';
$js_code .= 'var table = new table_t(\'table\', \'tasktable\');';
$task_head = explode("\t", $exec->output()[0]);
$js_code .= 'var head_arr = ' . json_encode($task_head) . ';';
$js_code .= 'table.set_head(head_arr);';
for($i = 1; $i != sizeof($exec->output()); ++$i)
{
	$task_data = explode("\t", $exec->output()[$i]);
	$js_code .= 'table.add_ceil(' . json_encode($task_data) . ');';
}
$js_code .= "\r\n";

$js_code .= "table.append_row('blubb', '', 'right', '<a href=index.php?action=blubb&value= <<1>> >kill_me</a>', '');\r\n";
for($i = 0; $i != count($task_head); ++$i)
{
	if(strpos($task_head[$i], "time") !== FALSE)
		$js_code .= "table.replace_row(' <<XX>> ', '', $i, 'ms_to_time( <<XX>> )', {'align':'right'})\r\n";
	else if(strpos($task_head[$i], "mem") !== FALSE)
		$js_code .= "table.replace_row(' <<XX>> ', '', $i, 'byte_shrink_to_fit( <<XX>> )', {'align':'right'})\r\n";
	else if(strpos($task_head[$i], "name") !== FALSE)
		$js_code .= "table.replace_row(' <<XX>> ', '', $i, ' <<XX>> ', {'align':'left'})\r\n";
	else if((strpos($task_head[$i], "ID") !== FALSE) && (strpos($task_head[$i], "parent") !== FALSE))
		; //mouse over/onclick name?
	else
		$js_code .= "table.replace_row(' <<XX>> ', '', $i, ' <<XX>> ', {'align':'right'})\r\n";
}

$js_code .= 'table.print();' . "\r\n";
$js_code .= '</script>';

    <<XX>> ist der platzhalter für den wirklichen inhalt der zelle, falls das irritiert.
    ms_to_time() und byte_shrink_to_fit() sind weitere javascript funktionen. und sollten ausgeführt werden. dazu unten in der fehlerbeschreibung mehr.

    der javascript code dazu sieht in so aus: (und ist auch an noch vielen stellen nicht fertig)

    function table_t(js_var_name_, div_container_)
{
	this.js_var_name = js_var_name_;
	this.div_container = div_container_;

	this.x_max = 0;
	this.x_format = Array(); //see html {NAME: VALUE} - e.g. x_format.push({align: 'center'});

	this.heading = Array();
	this.heading_format = Array(); //see html {NAME: VALUE}

	this.additional_rows = Array(); //{heading, heading_format, position, text, text_format} -- format: see html{NAME : VALUE}
	this.editted_rows = Array(); //{heading, heading_format, position, text, text_format} -- format: see html{NAME : VALUE}

	this.y_max = 0;

	this.cells = Array();

	this.sort_asc = 1;
	this.sort_row = -1;

	/*
		field[n] = {"name_1 | align_1"; ...}
	*/
	this.set_head = function(field)
	{
		this.x_max = field.length;

		for(var i=0; i != this.x_max; ++i)
		{
			var actual = field[i].split(' | ');
			this.heading[i] = actual[0];
			this.x_format[i] = {align: (actual.length == 2 ? actual[1] : 'left')};
		}
	}

	/*
		ceil[n] = {"value_1"; ...}
	*/
	this.add_ceil = function(ceil)
	{
		this.cells[this.y_max] = ceil;

		for(var i = 0; i != this.x_max; ++i)
		{
			if(Number(this.cells[this.y_max][i]))
				this.cells[this.y_max][i] = parseInt(this.cells[this.y_max][i]);
		}
		++this.y_max;
	}

	this.sort = function(row)
	{
		if(row == this.sort_row)
			this.sort_asc *= -1;
		else
		{
			this.sort_asc = 1;
			this.sort_row = row;
		}

		if(this.sort_asc == 1)
			this.cells.sort(function(lhs,rhs){return lhs[row] > rhs[row];});
		else
			this.cells.sort(function(lhs,rhs){return rhs[row] > lhs[row];});

		this.print();
	}

	this.append_row = function(heading_, heading_format_, new_position_, text_, text_format_)
	{
		this.additional_rows.push({heading: heading_, heading_format: heading_format_, position: new_position_, text: text_, text_format: text_format_});
	}

	this.replace_row = function(heading_, heading_format_, new_position_, text_, text_format_)
	{
		this.editted_rows.push({heading: heading_, heading_format: heading_format_, position: new_position_, text: text_, text_format: text_format_});
	}

	this.print = function()
	{
		print_this(this, this.div_container);
	}

	this.pre_sort_for_gimme = function()
	{
		for(var i=0; i != this.additional_rows.length; ++i)
		{
			if(this.additional_rows[i].position.constructor !== String)
				continue;
			var actual = this.additional_rows[i].position.split(' | '); //[[-]0...n] | [left/right]
			var nr = (actual[0][0] >= '0' && actual[0][0] <= '9' || actual[0][0] == '-' ? parseInt(actual[0]) : (actual.length == 2 ? parseInt(actual[1]) : 0)); //0...n
			var str = (actual[0][0] != '-' && (actual[0][0] < '0' || actual[0][0] > '9') ? actual[0] : (actual.length == 2 ? actual[1] : '')); //[left|right]

			if(str=='right')
				nr += this.x_max-1;
			else if(str=='left')
				--nr;

			this.additional_rows[i].position = nr;
		}
		this.additional_rows.sort(function(lhs,rhs){return lhs.position > rhs.position;});
		this.editted_rows.sort(function(lhs,rhs){return lhs.position > rhs.position;});
	}

	this.gimme = function()
	{
		this.pre_sort_for_gimme();
		var ret_val = '<table border=1 width=100%>';

		ret_val += '<tr>';
		for(var index_real=0, index_data=0, index_add=0, index_edit=0; index_real != this.x_max + this.additional_rows.length; ++index_real)
		{
			if(this.additional_rows.length > index_add && this.additional_rows[index_add].position < index_data)
			{
				ret_val += '<th' + get_format_as_html_code(this.additional_rows[index_add].heading_format) + '>' + this.additional_rows[index_add].heading + '</th>';
				++index_add;
				continue;
			}

			var this_heading = this.heading[index_data];
			ret_val += '<th';
			while(this.editted_rows.length > index_edit && this.editted_rows[index_edit].position == index_data)
			{
				ret_val += get_format_as_html_code(this.editted_rows[index_edit].heading_format);

				var actual_rule = this.editted_rows[index_edit].heading;
				var origin = this_heading;
				this_heading = '';
				var found;

				while((found = actual_rule.indexOf(' <<XX>> ')) != -1)
				{
					if(found > 0)
						this_heading += actual_rule.substr(0, found);
					this_heading += origin;
					actual_rule = actual_rule.substr(found+8);
				}
				this_heading += actual_rule;

				++index_edit;
			}

			ret_val += ' onclick="java\1:' + this.js_var_name + '.sort(' + index_data + ')">' + this_heading + '</a></th>';
			++index_data;
		}
		ret_val += '</tr>';

		for(var i=0; i != this.y_max; ++i)
		{
			ret_val += '<tr>';
			for(var index_real=0, index_data=0, index_add=0, index_edit=0; index_real != this.x_max + this.additional_rows.length; ++index_real)
			{
				if(this.additional_rows.length > index_add && this.additional_rows[index_add].position < index_data)
				{
					var content = this.additional_rows[index_add].text;
					var found;
					while((found = content.indexOf(' <<')) != -1)
					{
						var row = parseInt(content.substring(found+3));
						if(row >= this.x_max)
							break;
						content = content.substring(0, found) + this.cells[i][row] + content.substring(found+6+(row>9 ? 2 : 1));
					}
					ret_val += '<td' + get_format_as_html_code(this.additional_rows[index_add].text_format) + '>' + content + '</td>';
					++index_add;
					continue;
				}

				var content = this.cells[i][index_data];
				var this_format = this.x_format[index_data];
				while(this.editted_rows.length > index_edit && this.editted_rows[index_edit].position == index_data)
				{
					for(x in this.editted_rows[index_edit].text_format)
						this_format[x] = this.editted_rows[index_edit].text_format[x];

					var this_cell = content;
					content = this.editted_rows[index_edit].text;
					var found;
					while((found = content.indexOf(' <<XX>> ')) != -1)
					{
						content = content.substring(0, found) + this_cell + content.substring(found+8);
					}
					++index_edit;
				}

				ret_val += '<td ' + get_format_as_html_code(this_format) + '>' + content + '</td>';
				++index_data;
			}
			ret_val += '</tr>';
		}

		ret_val += '</table>';
		return ret_val;
	}
}

    hier dann die "fehler"-beschreibung:
    das sortieren funktioniert im firefox und IE gut. im windows phone nicht. mache ich schon beim aufrufen der sortier-fkt was falsch?
    das eigentliche problem ist aber, dass die javascript-funktionen nicht aufgerufen werden sondern als string ausgegeben werden. (was ja auch klar ist, allerdings habe ich keine ahnung, wie das gehen sollte.)

    der string an sich sieht dann konkret (z.B.) so aus:
    A\tB\tC\r\nA1\tB1\tC1\r\nA2\tB2\tC2
    ggf. noch mal nen paar format-angaben mit drin

    bb

    0
Anmelden zum Antworten