jquery.doubletable.js

(function ($) {

	var $parentTable;
	var initParentOptions;
	var initChildOptions;
	var lineJson;

	$.extend($.fn, {
		initTable: function (options) {
			initParentOptions = $.extend({
				parentTitleKey: {
					'line_id': 'id',
					'line_no': '线路编号',
					'line_name': '线路名称',
					'operate': '操作'
				},
				id: "line_id",
				hasExpand: true,
				expandTitle: " "
			}, options);

			var $tr = $("<tr>");
			if (initParentOptions.hasExpand) {
				$tr.append($("<th>").css("width", "35px").append(initParentOptions.expandTitle));
			}
			$.each(initParentOptions.parentTitleKey, function (key, titleName) {
				var $th = $("<th>").append(titleName);
				if (key == initParentOptions.id) {
					$th.css("display", "none");
				}
				$tr.append($th);
			})

			$parentTable = $("<table>").addClass("doubleTable").attr("cellpadding", "0").attr("cellspacing", "0").attr("border", "0")
				.append($("<thead>")
					.append($tr));

			this.append($parentTable);
			return $parentTable;
		},

		initChildTable: function (options) {
			initChildOptions = $.extend({
				childTitleKey: {
					'road_seq': '序号',
					'road_no': '路段编号',
					'road_name': '路段名称',
					'road_type': '路段类型',
					'start_longitude': '开始经度',
					'start_latitude': '开始纬度',
					'end_longitude': '结束经度',
					'end_latitude': '结束纬度',
					'operate': '操作'
				},
				width: {
					'road_seq': "30px",
					'road_no': '80px',
					'road_type': '80px',
					'start_longitude': '100px',
					'start_latitude': '100px',
					'end_longitude': '100px',
					'end_latitude': '100px'

				},
				id: "road_no",
				hasExpand: true,
				expandTitle: "&nbsp;"
			}, options);

			var $tr = $("<tr>").css("background-color", "#D3DFF1");
			$.each(initChildOptions.childTitleKey, function (key, titleName) {
				var $th = $("<th>").append(titleName);
				$.each(initChildOptions.width, function (key1, width) {
					if (key == key1) {
						$th.css("width", width);
					}

				});
				$tr.append($th);
			});

			$childTable = $("<table>").addClass("childTable").attr("cellpadding", "0").attr("cellspacing", "0").attr("border", "0")
				.append($("<thead>")
					.append($tr));
			return $childTable;
		},

		query: function (jsondata) {
			lineJson = jsondata;
			var $self = this;
			this.find("tbody").html("");
			$.each(lineJson, function (i, lineDetail) {
				$self.addParent(lineDetail);
			});

			this.append($parentTable);
			return $parentTable;
		},

		queryChildren: function ($table, json) {
			$self = this;
			$table.find("tbody").html("");
			var $tbody = $("<tbody>");
			$.each(json, function (i, item) {

				$self.addChild($tbody, item);

			});
			$table.append($tbody);
		},

		TRClick: function () {
			$self = this;
			$self.on("click", "tr", function (event) {
				var $clickTarget = $(event.target).closest("tr");
				if ($clickTarget.attr("id") && $clickTarget.attr("name") == "line" && event.target.className != "settingBtn") {
					$clickTarget.next("tr").toggle(function () {
						if ($(this).is(":hidden")) {
							$clickTarget.find("td").eq(0).css("background", " url(../../images/bus/tree-collapsed.png) no-repeat center");
							$(this).hide();
						} else {
							$clickTarget.find("td").eq(0).css("background", " url(../../images/bus/tree-expanded.png) no-repeat center");
							$(this).show();
							$.each(lineJson, function (i, item) {
								if (item[initParentOptions.id] == $clickTarget.attr("id") && item.roads != null && item.roads.road != null && item.roads.road != undefined) {
									$clickTarget.next("tr").css("background-color", "#CED3DC");
									//									console.log(item.roads.road.length);
									$self.queryChildren($clickTarget.next("tr").find("table"), item.roads.road);
								}
							});
						}
					});
				}
			});
		},
		addParent: function (json) {
			var $self = this;
			var $tr = $("<tr>").attr("name", "line");
			var count = 0;

			if (initParentOptions.hasExpand) {
				var $td = $("<td>").css("background", " url(../../images/bus/tree-collapsed.png) no-repeat center").css("width", "35px");
				$tr.append($td);
			}

			$.each(initParentOptions.parentTitleKey, function (titleKey, titleValue) {
				var $td = $("<td>");
				if (titleKey == initParentOptions.id) {
					$td.css("display", "none");
				}

				$.each(json, function (key, value) {
					if (key == titleKey) {
						$td.append(value);
						if (key == initParentOptions.id) {
							$tr.attr("id", value);
						}
					}
				});

				if (titleKey == "operate") {

					$td.append($("<a>").attr("href", "#").addClass("settingBtn").attr("id", "addRoad").html("添加路段"));
					$td.append($("<a>").attr("href", "#").addClass("settingBtn").attr("id", "updateLine").html("修改线路"));
					$td.append($("<a>").attr("href", "#").addClass("settingBtn").attr("id", "delLine").html("删除线路"));
				}
				$tr.append($td);
				count++;
			});
			//			$tr.append($("<td>").append($("<span>").html(json)).css("display","none"));
			$parentTable.append($tr);

			$parentTable.append($("<tr>").append($("<td>").css("background-color", "#CED3DC")).append($("<td>").attr("colspan", count - 1).append($self.initChildTable())).hide());
		},

		updateParent: function (preLineNo, json) {
			$("#" + preLineNo).find("td").eq(2).html(json.line_no);
			$("#" + preLineNo).find("td").eq(3).html(json.line_name);
			$("#" + preLineNo).attr("id", json[initParentOptions.id]);
		},

		deleteParent: function (lineNo) {
			$("#" + lineNo).next("tr").remove();//删除子项
			$("#" + lineNo).remove();
		},

		addChild: function ($tbody, json, newRoadNo) {
			var $tr = $("<tr>").attr("id", json[initChildOptions.id]).attr("name", "road");
			$tr.css("background-color", "#EBEDF1");

			$.each(initChildOptions.childTitleKey, function (titleKey, titleValue) {
				var $td = $("<td>");
				$.each(json, function (key, value) {
					if (key == titleKey) {
						$td.append(value);
					}
				});

				if (titleKey == "operate") {
					$td.append($("<a>").attr("href", "#").addClass("settingBtn").attr("id", "editRoadButton").html("修改路段"));
					$td.append($("<a>").attr("href", "#").addClass("settingBtn").attr("id", "delRoadButton").html("删除路段"));
				}

				$tr.append($td);

			});
			$tr.append($("<td>").css("display", "none").append(json.restrict_times))
				.append($("<td>").css("display", "none").append(json.road_direction));
			if (json.road_extra_info != null && json.road_extra_info.extra_info != null && json.road_extra_info.extra_info.extra_info_detail != null) {
				$tr.append($("<td>").css("display", "none").append(json.road_extra_info.extra_info.extra_info_detail));
			}
			$tbody.append($tr);
		},

		updateChild: function (preRoadNo, road) {
			var $tds = $(".childTable tr[id='" + preRoadNo + "']").attr("id", road[initChildOptions.id]).find("td");
			$tds.eq(0).html(road.road_seq);
			$tds.eq(1).html(road.road_no);
			$tds.eq(2).html(road.road_name);
			$tds.eq(3).html(road.road_type);
			$tds.eq(4).html(road.start_longitude);
			$tds.eq(5).html(road.start_latitude);
			$tds.eq(6).html(road.end_longitude);
			$tds.eq(7).html(road.end_latitude);
			$tds.eq(9).html(road.restrict_times);
			$tds.eq(10).html(road.road_direction);
			$tds.eq(11).html(road.road_extra_info.extra_info.extra_info_detail);

		},

		deleteChild: function (roadNo) {
			$("tr[name='road'][id='" + roadNo + "']").remove();
		}
	});
})(jQuery);