チェックボックスを使用して無効なユーザーを表示する

bugfix> node.js > 投稿

デフォルトでは、有効なユーザーをブートストラップで表示するWebサイトを作成していますが、すべてのユーザーを表示するチェックボックスがあります。しかし、どうすればそれを適切に実装できるのかわかりません。

私はやろうと思った：

 <form class="" action="/admin" method="get">
    <input type="checkbox" name="showDisabled" value="">
    <input type="submit" name="" value="">
  </form>

そして、私の/ adminルートで：

 if (req.body.showDisabled) {
  User.find({}, (err, users) => {
    if (err) {
      console.log(err);
    }
  }).then((users) => {
    res.render('pages/userTable', {users: users});
  })
} else if (!req.body.showDisabled) {
  User.find({enabled: true}, (err, users) => {
    if (err) {
      console.log(err);
    }
  }).then((users) => {
    res.render('pages/userTable', {users: users});
  })
}

しかし、それは本当にジャンキーなようです。それを行うより良い方法は何ですか？

node.js

express

回答 1 件

  • これを試すことができます：

    ルーター

    app.get('/getDiasbleUser', function(req, res) {
var getDiasbleUser = req.params.showDisabled
if (getDiasbleUser == "Yes") {
    User.find({}, (err, users) => {
        if (err) {
            console.log(err);
        }
    }).then((users) => {
        res.send(users);
    })
} else if (getDiasbleUser == "No") {
    User.find({
        enabled: true
    }, (err, users) => {
        if (err) {
            console.log(err);
        }
    }).then((users) => {
        res.send(users);
    })
}
})

    HTML（テンプレート）

    <!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class="container">
         <form class="" action="/admin" method="get">
            <input type="checkbox" id="disableId" name="showDisabled" value=""><br>
            <div id="appendValue"></div>
            <br>
            <button class="btn btn-primary">Submit</button>
         </form>
      </div>
   </body>
    //Ajax call
   <script>
      $('#disableId').on('click', function () {
             $(this).val(this.checked ? 1 : 0);
             //console.log($(this).val());
             var url = "";
             if($(this).val() == 1){
                url = "/getDiasbleUser?showDisabled=yes"
             } else {
                url = "/getDiasbleUser?showDisabled=no"
             }
             $.ajax({
                url: url,
                 success: function(data){
                    //Here data will be return result(You will append into div or table)
                    //like : $('#appendValue').append(data)
                 }
             })
         });
    </script>
</html>

あなたの答え

関連記事