javascript - dx-select-box将mysql与 Angular 绑定(bind)

Question

美好的一天，

我想将 MySQL 数据库绑定(bind)到 DevExtreme 的 dx-select-box 组件。有某种使用 AngularJS 的方法。然后，我需要对国家、州和城市进行过滤:

选择框:

Angular :

$scope.selectBoxProvinceOptions = {
        dataSource: serviceFilter,
        placeholder: 'Select a province',
        displayExpr: 'name',
        valueExpr: 'state',
        bindingOptions: {
            value: 'state'
        }
};

服务器端

app.get('/filter', function (req, res) {

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", true);
res.header("Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'POST, \n\
                GET, PUT, DELETE, OPTIONS');

  connection.query(   
        " SELECT CI.country, CI.state, CI.city  " +
        "  FROM cities CI " 

    , function (err, rows) {    




    if (!err) {
        console.log("Database is connected... \n");
        console.log('The solution is: ', rows);


    } else {
        console.log("Error connecting database... \n");
        console.log('Error while performing Query.');
    }

    res.end(JSON.stringify(rows));        
});


});

我可以用这种方式将结果推送到选择框中吗？

有人知道该怎么做。

感谢您的帮助。

Answer 1

DevExtreme 是客户端技术，因此您可以轻松地将其与 MySQL 或其他数据库集成，而无需任何特殊的 JavaScript 代码。

例如，如果您使用 MySQL + PHP，您的后端代码可以如下所示:

// my-data-service.php
$db = new PDO('mysql:host=localhost;dbname=test','user','password');
$sth = $dbh->prepare("SELECT name, colour FROM fruit");
$sth->execute();
$result = $sth->fetchAll();
echo json_encode($result);

现在，在客户端您可以使用 my-data-service.php url 加载数据:

var dataSource = new DevExpress.data.DataSource("/my-data-service.php");

接下来，将 dataSource 实例绑定(bind)到 dxSelectBox 或其他 devextreme-widget。