JQuery DataTables 和 Jeditable - 字段包含 html 但不应该。为什么？

Question

我正在使用 DataTables 和 Jeditbale。一切似乎都运行良好，但是，由于某种原因，当我双击 table 中的任何字段时，它包含 HTML。我在此处插入了视觉效果。我没有尝试任何方法来解决这个问题，因为我什至不明白这是怎么发生的。我用谷歌搜索了这个问题，但大多数报告类似问题的人只是报告了额外的空格；字段未满 html。我怎样才能解决这个问题？如果需要额外的代码，可以在适当的时候添加。

这是我的 table 代码：

<!-- start table listing -->
            <table id="myTable" class="stripe hover cell-border row-border">
                <thead>
                    <tr>
                        <th id="country_id">Country ID</th> 
                        <th id="country">Country Name</th>  
                        <th id="country_import">Import Commnents</th>
                        <th id="country_export">Export Comments</th>
                        <th id="country_date_created">Created</th>
                        <th id="country_date_updated">Updated</th>
                        <th id="">Updated by</th>
                        <th id="country_enabled">Enabled?</th>
                        <th id="">Actions</th>
                    </tr>
                </thead>

                <tbody>
                <?php
                    foreach ($query as $row ) {
                ?>
                    <tr <?php echo 'id="'.$row->country_id.'"'; ?> > 


                        <td>    
                            <?php echo $row->country_id; ?>
                        </td>


                        <td>    
                            <a class='table-action-deletelink' href='/admin/country_view/<?php echo ''.$row->country_id.''; ?> '><?php echo $row->country; ?></a>
                        </td>



                        <td>    
                            <?php echo $row->country_import_comments; ?>
                        </td>
                        <td>    
                            <?php echo $row->country_export_comments; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_date_created; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_date_last_updated; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_updated_by; ?>
                        </td>






                        <td>    <?php 
                                if ($row->country_enabled == 1) {
                                    echo '<span class="glyphicon glyphicon-ok" aria-hidden="true" ></span>';
                                } else {
                                    echo '<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>';
                                } ?>
                        </td>




                        <td>


                        <!-- main container -->
                        <div class="dropdown">
                          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                            Dropdown
                            <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_view/<?php echo ''.$row->country_id.''; ?>">View</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Edit</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Deactivate</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_delete/<?php echo ''.$row->country_id.''; ?> ">Delete</a></li>
                          </ul>
                        </div>


                        </td>

            </form>


                    </tr>
                    <?php } ?>
                </tbody>            
            </table>    
        </div>
    </div>
</div>

这是我的 javascript 实现了 table:

$(document).ready(function() {
    //sDeleteURL: "/Home/DeleteData.php"
    $('#myTable').dataTable().makeEditable( {
        // some basic config
        'bProcessing':      true, 
        'bServerSide':      true, 
         'sAjaxSource':     "admin/json_get_countries",

        stateSave:          true,
        "scrollCollapse":   true,
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
            }
    } );
} );  // end of on doc load

Answer 1

您正在使用 jQuery DataTables Editable plugin which internally uses jQuery Jeditable plugin。

根据Jeditable documentation（参见Usage with Textile、Markdown、ReST、WiKi），如果字段包含纯文本以外的内容（HTML， Markdown 等），你需要使用 loadurl 参数来加载内容和 sUpdateURL 来保存修改的值。

请参阅 Editable DataTable example - custom editors，了解如何使用 loadurl 和 sUpdateURL 参数中指定的 URL 编辑和保存 Engine version 字段。

您可以通过定义 aoColumns 选项并为相应的列指定 null 来使某些列为只读和非 editable。 aoColumns 是一个数组，按顺序保存所有列的选项，此数组的长度必须等于原始 HTML table.

中的列数

示例：

$(document).ready( function () {
   $('#example').dataTable().makeEditable({
      sUpdateURL: "UpdateData.php",
      "aoColumns": [
            null,
            {
            },
            {
               indicator: 'Saving platforms...',
               tooltip: 'Click to edit platforms',
               type: 'textarea',
               submit:'Save changes',
               fnOnCellUpdated: function(sStatus, sValue, settings){
                  alert("(Cell Callback): Cell is updated with value " + sValue);
               }
            },
            {
               //indicator: 'Saving Engine Version...',
               tooltip: 'Click to select engine version',
               loadtext: 'loading...',
               type: 'select',
               onblur: 'cancel',
               submit: 'Ok',
               loadurl: 'EngineVersionList.php',
               loadtype: 'GET',
               sUpdateURL: "CustomUpdateEngineVersion.php"
            },
            {
               indicator: 'Saving CSS Grade...',
               tooltip: 'Click to select CSS Grade',
               loadtext: 'loading...',
               type: 'select',
               onblur: 'submit',
               data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
               sUpdateURL: function(value, settings){
                  alert("Custom function for posting results");
                  return value;

               }
            }
      ]                          
   });
})

参见 answer to similar problem with Jeditable。然而，这个答案仅针对 Jeditable 而不是 jQuery DataTables Editable 插件，所以那里显示的代码不适用，只是解释。

JQuery DataTables 和 Jeditable - 字段包含 html 但不应该。为什么？

JQuery DataTables and Jeditable - fields contains html but should not. Why?

javascript

php

html

jquery-datatables

jeditable