由于我是网络编程的新手,任何人都可以建议我实现以下想法的最佳解决方案(从设计和易于实现的角度来看):
我正在从MySQL数据库中检索数据并将其加载到表中。为此,我正在使用Webix来完成这个技巧。
然后,我希望能够在每个单元格中更改数据 单击Enter,要在DB中更新的数据或保存,直到我单击例如 提交按钮。
另一件事是“质量更新”,例如我想改变一切 列中的单元格(例如,我想为所有行设置相同的日期) 表格。
我认为我可以在Webix的帮助下实现第一个目标: (edit each cell separately),但即使在这里,我也看不到数据如何传输回服务器/数据库/文件,但据我所知,它只是在表本身中发生了变化。 这是源代码:
<!DOCTYPE html>
<html>
<head>
<title>Datatable Validation</title>
<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../common/samples.css">
<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class='header_comment'>Cell validation</div>
<div class='sample_comment'>Rank and Votes columns must contain positive numbers</div>
<div id="testA"></div>
<hr>
<div id="testB" class='sample_comment'></div>
<script type="text/javascript" charset="utf-8">
function positiveNumber(value){ return value > 0; }
webix.ready(function(){
grid = webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"rank", header:"", css:"rank", width:50, editor:"text"},
{ id:"title", header:"Film title", width:200, editor:"text"},
{ id:"year", header:"Released" , width:80, editor:"text"},
{ id:"votes", header:"Votes", width:100, editor:"text"}
],
rules:{
"rank":positiveNumber,
"votes":positiveNumber
},
editable:true,
autoheight:true,
autowidth:true,
data:small_wrong_film_set,
ready:function(){
this.validate();
}
});
});
</script>
<input type="button" value="Add row" onclick="grid.add({ rank:-1 })">
</body>
</html>
所以如果你能让我知道最好或更简单的解决方案(我不是要求我为它写,但是如果你这样做会表示感谢:),我会非常感激,但如果你能告诉我小部件或附加组件或我可以用来实现这两个目标的任何东西。
提前致谢。