Правильно экранирование данных в Jquery / Handsontable - PullRequest
Новая
       13

Правильно экранирование данных в Jquery / Handsontable

0 голосов
/ 24 марта 2020

Каков наилучший способ экранирования данных в jQuery? У меня есть значения, которые будут выходить из базы данных, и мне нужно, чтобы '& "оставалось неизменным. Я пытался заменить их на HTML значения и c, но они не отображаются правильно ...

encodeURI & encodeURIComponent () - это не то, что мне нужно (я думаю?) ... данные, попадающие на эту страницу, не являются тегами HTML ... это элементы, которые имеют много одинарных и двойных кавычек из-за эталоны измерений (в дюймах и футах).

Я никогда не использовал Handsontable и несколько лет не общался с jQuery, теперь я вынужден более интенсивно возвращаться к разработке ... Вот пример кода c моего кода, и я опубликую динамик c под ним ...

Статист c

<script type="text/javascript">
    const data = [
                        ['AM STD 3x6 ID BLUE BKGD FACE||DWG AS090292||', '1', 'A', '22990461', '2020-04-06', '2020-03-11', '5', '', '0000-00-00', '0000-00-00', '0'],
        ['AMOCO 1'9x4'4 TOGO SF CTS SGN(NO LEAF)||DWG BP1024SF_LDSV||FACE: BP184910||', '1', 'A', '35522430', '2020-01-21', '2020-01-02', '5', '•1/20-This will be completed 1/21.', '2020-01-21', '2020-01-21', '1'],

    ];

    const container = document.getElementById('productionLogTable');
    const hot = new Handsontable(container, {
      data: data,
      colHeaders: ['Description', 'Qty', 'LN #', 'Order Number', 'AS400 Ship Date', 'Date Showed on Report', 'Days to Manufacture', 'Notes', 'Date Shown Completed', 'Actual Ship Date', 'Qty Shipped'],
      colWidths: [300, 70, 70, 110, 110, 90, 90, 300, 90, 90],
      rowHeaders: true,
      headerTooltips: {
        columns: true,
        onlyTrimmed: true
      },
      filters: true,
      dropdownMenu: true,
    });
</script>

Это пример записи, которая вызывает проблемы из-за одинарных кавычек между 1'9x4'4 ... 

['AMOCO 1'9x4'4 TOGO SF CTS SGN(NO LEAF)||DWG BP1024SF_LDSV||FACE: BP184910||', '1', 'A', '35522430', '2020-01-21', '2020-01-02', '5', '•1/20-This will be completed 1/21.', '2020-01-21', '2020-01-21', '1'],

Вот код Dynami c ... Я включил оба для ради того, чтобы легко очистить ... 

    <script type="text/javascript">
        const data = [
            <?php
            //setup query
            $sql = 'SELECT * FROM production_data';

            //execute SQL transaction
            try {
                //prepare SQL statement & execute
                $stmt = $pdo->prepare($sql);
                $stmt->execute();

                //bind column names to variables
                $stmt->bindColumn('id', $id);
                $stmt->bindColumn('job_number', $job_number);
                $stmt->bindColumn('enterprise', $enterprise);
                $stmt->bindColumn('part_number', $part_number);
                $stmt->bindColumn('description', $description);
                $stmt->bindColumn('qty', $qty);
                $stmt->bindColumn('line_item', $line_item);
                $stmt->bindColumn('as400_ship_date', $as400_ship_date);
                $stmt->bindColumn('date_showed_on_report', $date_showed_on_report);
                $stmt->bindColumn('shipping_method', $shipping_method);
                $stmt->bindColumn('notes', $notes);
                $stmt->bindColumn('date_shown_complete', $date_shown_complete);
                $stmt->bindColumn('actual_ship_date', $actual_ship_date);
                $stmt->bindColumn('qty_shipped', $qty_shipped);

                //output data into spreadsheet view
                while($row = $stmt->fetch(PDO::FETCH_BOUND)) {
                    print "[";
                    print "'" . $description . "', ";
                    print "'" . $qty . "', ";
                    print "'" . $line_item . "', ";
                    print "'" . $job_number . "', ";
                    print "'" . $as400_ship_date . "', ";
                    print "'" . $date_showed_on_report . "', ";

                    //calculate days to manufacture here
                    print "'" . '5' . "', ";

                    print "'" . $notes . "', ";
                    print "'" . $date_shown_complete . "', ";
                    print "'" . $actual_ship_date . "', ";
                    print "'" . $qty_shipped . "'";
                    print "],";
                }
            }
            //failed to execute SQL transaction
            catch (PDOException $e) {
                print $e->getMessage();
            }
            ?>
        ];

        const container = document.getElementById('productionLogTable');
        const hot = new Handsontable(container, {
          data: data,
          colHeaders: ['Description', 'Qty', 'LN #', 'Order Number', 'AS400 Ship Date', 'Date Showed on Report', 'Days to Manufacture', 'Notes', 'Date Shown Completed', 'Actual Ship Date', 'Qty Shipped'],
          colWidths: [300, 70, 70, 110, 110, 90, 90, 300, 90, 90],
          rowHeaders: true,
          headerTooltips: {
            columns: true,
            onlyTrimmed: true
          },
          filters: true,
          dropdownMenu: true,
        });
    </script>

1 Ответ

0 голосов
/ 24 марта 2020

Хорошо, вот мой код после того, как я начал его работать на основе рекомендации @ CBroe. 

        <script type="text/javascript">
            const data = 
                <?php
                //setup query
                $sql = 'SELECT * FROM production_data';

                //execute SQL transaction
                try {
                    //prepare SQL statement & execute
                    $stmt = $pdo->prepare($sql);
                    $stmt->execute();

                    //bind column names to variables
                    $stmt->bindColumn('id', $id);
                    $stmt->bindColumn('job_number', $job_number);
                    $stmt->bindColumn('enterprise', $enterprise);
                    $stmt->bindColumn('part_number', $part_number);
                    $stmt->bindColumn('description', $description);
                    $stmt->bindColumn('qty', $qty);
                    $stmt->bindColumn('line_item', $line_item);
                    $stmt->bindColumn('as400_ship_date', $as400_ship_date);
                    $stmt->bindColumn('date_showed_on_report', $date_showed_on_report);
                    $stmt->bindColumn('shipping_method', $shipping_method);
                    $stmt->bindColumn('notes', $notes);
                    $stmt->bindColumn('date_shown_complete', $date_shown_complete);
                    $stmt->bindColumn('actual_ship_date', $actual_ship_date);
                    $stmt->bindColumn('qty_shipped', $qty_shipped);

                    //output data into spreadsheet view
                    while($row = $stmt->fetch(PDO::FETCH_BOUND)) {

                        //construct array with data
                        $json = array();
                        while($row = $stmt->fetch(PDO::FETCH_BOUND)) {
                            $json[] = array($description, $qty, $line_item, $job_number, $as400_ship_date, $date_showed_on_report, "5", $notes, $date_shown_complete, $actual_ship_date, $qty_shipped);
                        }

                        //encode for JSON and output to screen
                        print(json_encode($json));

                    }
                }
                //failed to execute SQL transaction
                catch (PDOException $e) {
                    print $e->getMessage();
                }
                ?>

            const container = document.getElementById('productionLogTable');
            const hot = new Handsontable(container, {
              data: data,
              colHeaders: ['Description', 'Qty', 'LN #', 'Order Number', 'AS400 Ship Date', 'Date Showed on Report', 'Days to Manufacture', 'Notes', 'Date Shown Completed', 'Actual Ship Date', 'Qty Shipped'],
              colWidths: [300, 70, 70, 110, 110, 90, 90, 300, 90, 90],
              rowHeaders: true,
              headerTooltips: {
                columns: true,
                onlyTrimmed: true
              },
              filters: true,
              dropdownMenu: true,
            });
        </script>

Использование json_encode () было чрезвычайно полезным. Спасибо!

...