Question

你好，我是Javascript编程的新手（我经常做C ++，Rust和Python编程，所以这是一次非常学习的经历！）

＆＃13;

var $table = $("#editable-table");

$table.bootstrapTable({
	url: "data.json",
	columns: [{
		checkbox: true,
	}, {
		formatter: section_formatter,
		title: "Section #",
	}, {
		field: "title",
		title: "Title",
		editable: true,
	}, {
		field: "owner",
		title: "Owner",
		editable: true,
	}, {
		field: "name_1",
		title: "Name #1",
		editable: true,
	}, {
		field: "name_2",
		title: "Name #2",
		editable: true,
	}],
});

//Document Ready
$(function() {
	var $data = $table.bootstrapTable("getData");
	console.log($data);
	
	$("#toolbar").find("select").change(function() {
		$table.bootstrapTable("destroy").bootstrapTable({
			exportDataType: $(this).val()
		});
	});
	
	//Button Listeners
	var $save = $("#save");
	$save.click(function() {
		
	})
});

function section_formatter(value, row, index) {
	return 1 + index;
}

function save(data)
{
	
}

function delete_rows()
{
	
}

function new_row()
{
	
}

function new_column()
{
	
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Editable Table</title>
		
		<link rel="stylesheet" href="css/bootstrap.min.css"></link>
		<link rel="stylesheet" href="css/bootstrap-table.min.css"></link>
		<link rel="stylesheet" href="css/bootstrap-editable.css"></link>
		
		<style>
			body
			{
				margin: 10px;
			}
		</style>
	</head>
	
	<body>
		<!--Table-->
		<div id="toolbar" class="btn-group">
			<button id="new-row" type="button" class="btn btn-default">
				New Row
				<i class="glyphicon glyphicon-plus"></i>
			</button>
			<button id="new-column" type="button" class="btn btn-default">
				New Column
				<i class="glyphicon glyphicon-plus"></i>
			</button>
			<button id="save" type="button" class="btn btn-primary">
				Save
				<i class="glyphicon glyphicon-save"></i>
			</button>
			<button id="delete-row" type="button" class="btn btn-danger">
				Delete Row(s)
				<i class="glyphicon glyphicon-trash"></i>
			</button>
		</div>
		<table
			id="editable-table"
			class="table-striped"
			data-toggle="table"
			data-search="true"
			data-show-refresh="true"
			data-show-columns="true"
			data-click-to-select="true"
			data-show-export="true"
			data-toolbar="#toolbar">
		</table>
		
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-editable.js"></script>
		<script src="js/bootstrap-editable.min.js"></script>
		<script src="js/bootstrap-table-export.min.js"></script>
		<script src="js/tableExport.js"></script>
		<script src="js/editable-table.js"></script>
	</body>
</html>

＆＃13;

这是我目前的文件结构。我现在的网站是这样的：

这个网站的想法是这样，多人可以编辑这个Bootstrap表（以后再进行编辑，以便可以编辑行和列，但这是另一个需要解决的问题）。

所以我的问题是如何保存这些数据？

或者至少妥善保存这些数据。现在我只是从.json文件中获取数据。

所以我最初的计划是使用php和ajax来写入文件。但我比解决方案更令人头疼。

如何在我的服务器上正确保存数据，以便人们可以轻松编辑它？

网站：如何保存不同用户要多次更新和查看的数据？

0 个答案: