Question

我有一个查看页面，其中列出了所有产品，每个产品都有“编辑”和“删除”按钮。我正在尝试在编辑页面中预填充输入字段以显示所选产品的数据。

我想知道如何用所选产品数据预填充编辑页面。

用于查看page.js的代码，

router.get("/", async (req, res) => {
  const listdata = await sapview.listall();
  const pricedata = listdata.T_PRICE;
  res.render('viewpage', {title: 'Products', data: pricedata})
  // res.send(pricedata)
});

viewpage.jade的代码，

extends layout

block content
  h1(style='text-align:center')= title
  button(type='submit', onClick='add()') Add a Material
  script.
    function add() {
      window.location.href = '/addpage'
    }
    function edit() {
      window.location.href = '/editpage'
    }
    function removed() {
      window.location.href = '/removepage'
    }
  br
  br
  -var product = data
  div
  table.table.table-hover(border='1', style='width:100%')
    tr
        th Sl.No
        th Plant
        th Material
        th Currency
        th Rate
        th Price_Unit
        th Cond_Unit
        th Customer
        th Portal User
        th Options
    tbody
      each value in product
        tr
          td(style='text-align:center')
          td(style='text-align:center', id='p_plant')= value.PLANT
          td(style='text-align:left', id='p_material')= value.MATERIAL
          td(style='text-align:left', id='p_currency')= value.CURRENCY
          td(style='text-align:right', id='p_rate')= value.RATE
          td(style='text-align:center', id='p_price_unit')= value.PRICE_UNIT
          td(style='text-align:left', id='p_cond_unit')= value.COND_UNIT
          td(style='text-align:left', id='p_customer')= value.CUSTOMER
          td(style='text-align:left', id='p_portal_user')= value.PORTAL_USER
          td(style='text-align:left')
            ul
              button(type='submit', onClick='edit()') Edit
              button(type='submit', onClick='removed()') Delete

用于编辑page.js的代码，

router.put('/editpage', 

(req, res) => {
  console.log("Hello", req.body);
  client.connect(() => {
    console.log('Connecting');
    client.invoke("ZSD_CP_PRICE_CHANGE", 
    {P_PLANT: req.body.P_PLANT, 
    P_MATERIAL: req.body.P_MATERIAL, 
    P_CUSTOMER: req.body.P_CUSTOMER,
    P_RATE: req.body.P_RATE,  
    P_CURRENCY: req.body.P_CURRENCY,
    P_PRICE_UNIT: req.body.P_PRICE_UNIT,
    P_COND_UNIT: req.body.P_COND_UNIT,
    P_PORTAL_USER: req.body.P_PORTAL_USER
    },
    (err, result) => {
      console.log('Invoking')
      if (err) {
        console.log(err)
        return err;
      }
      console.log(result);
    });
    res.redirect('/');
  });
});

用于编辑page.jade的代码，

extends layout

block content
  h1= title
  form(action="/editpage" method="PUT")
    label(for='plant') Plant:
    input(placeholder = 'P_PLANT', id='P_PLANT', value='value.PLANT')
    br
    label(for='material') Material:
    input(placeholder = 'P_MATERIAL', id='P_MATERIAL')
    br
    label(for='customer') Customer:
    input(placeholder = 'P_CUSTOMER', id='P_CUSTOMER')
    br
    label(for='rate') Rate:
    input(placeholder = 'P_RATE', id='P_RATE')
    br
    label(for='currency') Currency:
    input(placeholder = 'P_CURRENCY', id='P_CURRENCY')
    br
    label(for='price_unit') Price_Unit:
    input(placeholder = ' P_PRICE_UNIT', id='P_PRICE_UNIT')
    br
    label(for='cond_unit') Cond_Unit:
    input(placeholder = 'P_COND_UNIT', id='P_COND_UNIT')
    br
    label(for='portal_user') Portal_User:
    input(placeholder = 'P_PORTAL_USER', id='P_PORTAL_USER')
    br
    br
    button(type='submit') Save Changes
    br
    br
  button(type='submit', onclick='nav()') Cancel
  script.
    function nav() {
      window.location.href = '/'
    }

Answer 1

尝试使用不带引号的值。例如

input(placeholder = 'P_PLANT', id='P_PLANT', value=PLANT)

Answer 2

通过将数据作为 url参数从“查看”页面（其中我用“编辑”和“删除”按钮列出了每个产品）传递到“编辑”页面，我可以预填充“编辑”页面的输入字段。 / p>

如何在Jade模板中预填充“编辑”页面（Node + Express + Jade）

2 个答案: