简单excel分组表格实现

最新推荐文章于 2021-11-30 21:20:16 发布

kingngkio

最新推荐文章于 2021-11-30 21:20:16 发布

阅读量643

点赞数

文章标签：简单excel分组表格实现

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table{
table-layout:fixed;
}
td,td{
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
	<div>
		<form>
			<label>查询条件:</label><input type="text"/>
			<button value="查询">查询</button>
		</form>
	</div>
	<div id="table1"></div>
</body>
</html>
<script>
var sortCol = [0];
var columnModel = [{"DATA_INDEX":"APP_ID","HEADER":"申请单号"},{"DATA_INDEX":"ORDER_ID","HEADER":"工单号"},{"DATA_INDEX":"ORDER_NAME","HEADER":"工单名"}];
var table = $("<table border=1 cellpadding=0 cellspacing=0><tr><th>申请单号</th><th>工单号</th><th>工单名</th></tr></table>");
$("#table1").append(table);
var json = [{"APP_ID":1,"CONTENT":[{"ORDER_ID":76543211234567,"ORDER_NAME":'测试1'},{"ORDER_ID":76543211234568,"ORDER_NAME":'测试2'}]},
{"APP_ID":2,"CONTENT":[{"ORDER_ID":76543211234568,"ORDER_NAME":'测试3'},{"ORDER_ID":76543211234569,"ORDER_NAME":'测试4'}]}];
window.onload = function(){
	for(key in json){
		var app = json[key];
		var tr = $("<tr><td>"+app.APP_ID+"</td></tr>");
		var contents = app.CONTENT;
		var td = $("<td colspan='"+contents.length+"'></td>");
		var table1 = $("<table border=1 cellpadding=0 cellspacing=0  frame=void rules=rows></table>");
		for(con in contents){
			var content = contents[con];
			var tr1 = $("<tr></tr>").click(function(){
				check(this);
			});
			for(col in columnModel){
				if(in_array(sortCol,col))continue;
				var attrName = columnModel[col].DATA_INDEX;
				var attrValue = content[attrName];
				var td1 = $("<td>"+attrValue+"</td>");
				$(tr1).append(td1).attr(attrName,attrValue);
			}
			$(table1).append(tr1);
		}
		$(td).append(table1);
		$(tr).append(td);
		$("#table1 table:first").append(tr);
	}
}
function in_array(array,col){
	 for(var i in array){
        if(array[i]==col){
            return true;
        }
    }
    return false;
}
function check(obj){
	var This = $(obj);
	var orderId = This.attr('order_id');
}
</script>