Layui表格：新增行显示在第一行

想要实现的效果：新添加一行数据，该行数据显示在表格的第一行。

难点：

1.获得新增数据的id。

2.把新增数据放到第一行，并且不使用重新请求数据的方法。

1、list.html

重点：

localStorage.getItem("addID") 获得全局变量

var oldData = layui.table.cache["accountsTableReload"]; 获得表格的所有数据

oldData.unshift(newData); //新数据放到第一个位置

table.on('toolbar(accountsTable)', function(obj) {
	if (obj.event == "add") {
		var oldData = layui.table.cache["accountsTableReload"];//括号中是初始化表格时的参数id，获得当前表格的所有数据
						
		var index = layer.open({
			title: '新增统型项目',
			type: 2,
			shade: 0.2,
			maxmin: true,
			shadeClose: true,
			area: ['100%', '100%'],
			content: 'add.html',
			end: function(){//layer层销毁之后的回调
				$.ajax({
					async: false,
					type: "GET",
					url: creiUrl + detailUrl + localStorage.getItem("addID"),//调用API，获得新增的数据
					dataType: 'JSON',
					contentType: "application/json;charset=UTF-8",
					success: function(res) {
						var detailData =res.data;//API请求后返回的数据
						var newData = {//新增行的数据
							 abbreviation: detailData.abbreviation//abbreviation是cols参数中定义的各列的field 
							,businessDepartment: detailData.businessDepartment
							,systemName: detailData.systemName
							,systemField: detailData.ffCatalog
		                    ......//根据自己表格字段写
							};
										
										
						 oldData.unshift(newData);//新数据放到第一个位置
						 table.reload('accountsTableReload', {
							data: oldData,
							page: {
							    curr: 1 //重新定位到第一页
							}
						 });
					
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {}
                });
								
								
			}
	});
			
});

2、add.html

重点：

localStorage.setItem("addID",res.data);  定义全局变量，得到新增数据的id

form.on('submit(submit)', function(data) {
    ......
    $.ajax({
			async: false,
			type: "post",
			url: creiUrl + addUrl,
			data: JSON.stringify(data.field),
			dataType: 'json',
			contentType: "application/json;charset=UTF-8",
			success: function(res) {
			    localStorage.setItem("addID",res.data);
				if(res.code == 0) {
					layer.msg('新增成功!', {
						icon: 1,
						time: 1000
					});
            .......
)}