README

带有JavaScript数据库编辑器的Composer库

可以使用两种类型的数据库编辑器

一个编辑器允许选择要编辑的表（可以是用户选择的或硬编码的）
一个编辑器允许编辑给定表中的某些配置值

在所有情况下，都可以强制执行列/值的类型格式和必填值。

设置说明

要安装net-tools/js-db-editor包，只需通过composer要求它：require net-tools/js-db-editor:^1.0.0。

如何使用？

SqlLiteTableEditor（sqljs-editor.html 示例）

该库提供两个表编辑器，一个用于SqlJs数据库（一个托管在客户端浏览器上的数据库引擎），一个用于Mysql PDO数据库（数据库托管在远程服务器上，通过PHP脚本访问）。

SqlLiteTableEditor 是一个JavaScript类，用于创建给定表的SqlJs编辑器。

构造函数期望以下数据

从前一个sql-wasm.js库中创建的先前创建的 SQL.Database 对象
编辑器必须渲染的 HTMLElement 节点（通常是DIV）
要编辑的表名
选项，作为对象字面量
- onAllowDelete : 在行删除期间调用的函数；如果行可以删除，则返回已解析的Promise，如果行不能删除，则返回已拒绝的Promise；默认情况下，所有行都可以删除
- onSetupGridColumns : 一个函数，可以使您更新列设置（可以标记列为只读、必需等；有关可用的值，请参阅 net-tools/js-grid-editor）
- gridEditorOptions : 一个嵌套对象字面量，包含底层网格编辑器的选项（在此处可以提供行的默认值；有关可用的值，请参阅 net-tools/js-grid-editor 构造函数的 options 参数）
- noPrimaryKeyEdit : 如果设置为true，则主键列无法修改（除非在创建新行时）
- orderBy : 要附加到请求的某些SQL字符串，以便显示的行按正确顺序排列

var	grid = new nettools.SqlLiteTableEditor(
	// database of type SQL.Database ; see sample for db object construction
	db,

	// node
	document.getElementById('table'),

	// table name
	'Product',

	// options
	{
		onAllowDelete : function(rowNumber, row)
			{
				// for the sample, refusing to remove odd lines
				if ( rowNumber % 2 == 0 )
					return Promise.resolve();
				else
					return Promise.reject();
			},


		onSetupGridColumns : function(columns)
			{
				// set second column as readonly
				columns[1].readonly = true;
			},


		gridEditorOptions : {
			defaultValues : { name:'unknown name', price:'999.99'}
		}
	}
);

当 grid 对象就绪时，应调用 setup 方法以初始化数据

grid.setup()
	.then(function(){ /* here some code to chain with when setup is done */ })
	.catch(function(e){
		// error handling during setup
		alert(e.message ? e.message : e);
	});

不要删除 catch 语句；如果您删除它，则不会显示错误。

MysqlPdoTableEditor（pdo-editor.html 示例）

对于Mysql PDO编辑器，我们使用一个新的类，它继承自类 nettools.PdoServerInterface，该类定义了与数据库的端到端对话的入口点。

MysqlPdoTableEditor 编辑器构造函数期望以下参数

继承自 nettools.PdoServerInterface 类并实现 send 方法的对象
编辑器必须渲染的 HTMLElement 节点（通常是DIV）
要编辑的表名

var grid = new nettools.MysqlPdoTableEditor(

	// database link
	intf,

	// node
	document.getElementById('table'),

	// table name
	'Product'
);

作为第一个参数期望的对象必须从用户定义的类创建，该类继承自 nettools.PdoServerInterface；其 send 方法实现JavaScript和服务器端之间的对话。示例提供了一个简单的对象，使用XmlHttpRequest将查询发送到服务器端。您可以将 send 方法定制以添加任何所需的安全层（示例代码中没有安全措施）。此外，此用户定义的类有一个布尔值的构造函数；如果设置为true，则发送回浏览器的数据（例如 select 语句）将被压缩以节省带宽。

当 grid 对象就绪时，应调用 setup 方法以初始化数据

grid.setup()
	.then(function(){ /* here some code to chain with when setup is done */ })
	.catch(function(e){
		// error handling during setup
		alert(e.message ? e.message : e);
	});

不要删除 catch 语句；如果您删除它，则不会显示错误。

DatabaseEditor（database-editor.html 示例）

该库还定义了一个类，用于创建用户从表列表中选择所需的GUI，并且所选的表可以进行编辑（使用MysqlPdoTableEditor或SqlLiteTableEditor）。

DatabaseEditor类的构造函数期望以下参数：

一个表列表
编辑器必须渲染的 HTMLElement 节点（通常是DIV）
用作网格编辑器的类构造函数（SqlLiteTableEditor或MysqlPdoTableEditor）；任何网格编辑器的第一个参数必须绑定到构造函数，如下面的示例所示

var dbeditor = new nettools.DatabaseEditor(
	// table list
	['Product', 'Color'],

	// node
	document.getElementById('dbeditor'),

	// database of type SQL.Database
	nettools.SqlLiteTableEditor.bind(null, db)
);

没有setup方法可以调用，GUI是即时创建的。

DbConfigEditor（dbconfig-editor.html示例）

DbConfigEditor类使您能够编辑存储在表中的配置值。数据库可以是SqlJs数据库（通过SqlLiteTableEditor编辑器编辑）或服务器托管数据库（通过MysqlPdoTableEditor编辑器）。

表可以具有任何所需的列，但以下3列是必需的：id（作为主键），metadata（存储有关预期值类型的数据），value；这些是默认名称，可以使用自定义名称。

data列存储配置值；通过metadata列，我们可以强制其实例化类型（文本、数字、布尔值），确保它未被省略，并使用特定值编辑器（对于HTML值或多行字符串）。metadata列的值通过GUI元数据编辑器窗口为每一行（即每个配置值）定义。

DbConfigEditor类构造函数期望以下参数：

要编辑的配置表名称
编辑器必须渲染的 HTMLElement 节点（通常是DIV）
一个包含类选项值的对象字面量
- metadataColumn：元数据列的名称（默认为'metadata'）
- valueColumn：值列的名称（默认为'value'）
- primaryKeyColumn：主键列的名称（默认为'key'）
- defaultSeparator：用于在枚举值中分隔数据的字符（默认为';'）
- lineLength：当具有'mhtml'或'longtext'值类型的元数据值超过此长度时，输出将被截断并显示为(...)
- dialogObject：到类构造函数nettools.ui.desktop.dialog的引用（默认）
- requiredColumns：必需列名称数组（除了始终必需的主键列和值列之外，值列的必需行为由metadata.required属性强制执行）
从nettools.SQLTableEditor类继承的类构造函数（SqlLiteTableEditor或MysqlPdoTableEditor）；请记住，绑定任何未在nettools.SQLTableEditor构造函数中声明的第一个构造函数参数
作为前一个参数传递给类构造函数的对象字面量选项

var grid = new nettools.DbConfigEditor(
	// table config name
	'Config',

	// node
	document.getElementById('table'),

	// options
	{
		metadataColumn : 'metadata',
		valueColumn : 'value',
		primaryKeyColumn : 'id',
		requiredColumns : ['namespace']
	},

	// SQLTableEditor class, db connection is bound to constructor

	nettools.SqlLiteTableEditor.bind(null, db),

	// SQLTableEditor options
	{
		orderBy : 'id DESC',				

		// underlying jsGridEditor options
		gridEditorOptions : {
			defaultValues : {namespace:'test'}
		}					

	}
);

在此示例中，由db引用的数据库有一个具有id、metadata、namespace和value列的config表。

要显示GUI编辑器：

grid.setup()
	.then(function(){ /* here some code to chain with when setup is done */ })
	.catch(function(e){
		// error handling during setup
		alert(e.message ? e.message : e);
	});

请参阅示例以了解如何创建db连接。

示例

在/samples子目录中有几个示例

sqljs-editor.html：一个数据库编辑器示例，其中数据库使用SqlJs实现（sql-wasm提供）
pdo-editor.html：一个数据库编辑器示例，其中通过服务器端PHP脚本使用PDO语句访问数据库（仅需要数据库连接；您的托管Mysql数据库必须有一个Product表才能运行此示例）
database-editor.html：一个示例，其中给定要编辑的可用表列表，用户选择一个表，然后可以编辑所选的表
dbconfig-editor.html：本示例展示了如何将配置值存储在只有3个必需列的表中（id、metadata、value；名称可以修改）；根据预期的值类型，编辑可以是简单文本、数值、布尔值、长文本（多行）、带有wysiwyg编辑器的HTML

net-tools / js-db-editor

维护者

详情