Question

您好我有一个使用java + struts2 + hibernate构建的Web应用程序。我正在使用dataTable Editor显示其中一个后端表的内容。我是DataTables的新手，我发现很难做几件事。

1）val featureVectors = features.map(row => { Vectors.dense(row.toSeq.toArray.map({ case s: String => s.toDouble case l: Long => l.toDouble case _ => 0.0 })) })窗口中显示的下拉列表将包含一个下拉列表，下拉列表的选项来自数据库。我不知道如何返回一个包含列表的JSON对象并迭代它以填充上述窗口中的下拉框？

2）如何在单击DataTable的删除按钮后获取所选行的隐藏列值？

以下是我的代码：

New/Edit

JQuery的：

 <table id="example" class="display" cellspacing="0" width="100%">
     <thead>
        <tr>
            <th>Description</th>
            <th>Category</th>
            <th>Payee</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Income ID</th>
        </tr>
    </thead>
   </table>

单击“删除”按钮时，我可以从表中获取第4列值（即金额）。但我无法获得第5列值，即隐藏的incomeID（主键）值（bVisible：false）。现在如何获取隐藏的列值？这可以解决我的问题。

更新

  <script src="jquery/dt_editor/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
   <script src="jquery/dt_editor/DataTables-1.10.10/js/jquery.dataTables.min.js" ></script>
   <script src="jquery/dt_editor/Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
  <script src="jquery/dt_editor/Select-1.1.0/js/dataTables.select.min.js" >    </script>
   <script src="jquery/dt_editor/Editor-1.5.4/js/dataTables.editor.min.js" ></script>
   <script>
     var editor; 

    $(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
    "ajax": "refreshIncomeData",
    "table": "#example",
    "fields": [ {
            "label": "Description:",
            "name": "inocme.description"
        }, {
            "label": "Amount:",
            "name": "inocme.amount"
        },
        {
            "label": "Category:",
            "name": "userCodeID",
            "type": "select",
            "options": [{userCodeName: "Edinburgh", userCodeID: 51}],
            optionsPair: {
                label: 'userCodeName',
                value: 'userCodeID'
            }
        },
        {
            "label": "Transaction Date:",
            "name": "inocme.transactionDate",
            "type": "datetime",
            "def": new Date()
        }
    ]
    } );

    $('#example').DataTable( {
    dom: "Bfrtip",
    "ajax": "refreshIncomeData",
    serverSide: true,
    "aoColumns": [
                  {"mData":"description","bSearchable": true,"bSortable": true},
                  {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
                  {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
                  {"mData":"transactionDate","bSearchable": false,"bSortable": false},
                  {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": true},
                  {"mData":"incomeID","visible":false}],
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { "text": "Remove Record", action: function(){

            $.each($("#example tr.selected"),function(){ //get each tr which has selected class
                alert($(this).find('td').eq(4).text()) //Gives me 4th column value of the table(amount)

            });
        } }
    ]
    } );
  } );

 </script>

这给了我一个对象类型。我不确定如何从对象获取文本或将该对象转换为普通文本？

Answer 1

以下是我的一个问题的解决方案（本文第2期）。

使用事件捕获选定的行索引，并在我们选择行后单击删除按钮时将索引存储在变量中。现在调用删除按钮的功能并使用$.getJSON('URL',parameters,function)我正在执行删除操作，它正常工作。

更新了CODE：

<script src="jquery/dt_editor/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="jquery/dt_editor/DataTables-1.10.10/js/jquery.dataTables.min.js" ></script>
<script src="jquery/dt_editor/Buttons-1.1.0/js/dataTables.buttons.min.js">    </script>
<script src="jquery/dt_editor/Select-1.1.0/js/dataTables.select.min.js" ></script>
<script src="jquery/dt_editor/Editor-1.5.4/js/dataTables.editor.min.js" ></script>
<script>
var removerRowID;
$(document).ready(function() {
var oTable=new $('#example').DataTable( {
    dom: "Bfrtip",
    "ajax": "refreshIncomeData",
    serverSide: true,
    "aoColumns": [
                  {"mData":"description","bSearchable": true,"bSortable": true},
                  {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
                  {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
                  {"mData":"transactionDate","bSearchable": false,"bSortable": false},
                  {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": true},
                  {"mData":"incomeID","visible":false}],
    select: true,
    buttons: [
        { "text": "New", action: function(){} },
        { "text": "Edit",   action: function(){} },
        { "text": "Remove", action: function(){

            var tempIncomeID=$("#example").dataTable().fnGetData(removerRowID).incomeID;
    $.getJSON("deleteUserIncomesJson",{incomeID:tempIncomeID},
    function(data)
    {
        $("#example").dataTable().fnDeleteRow(removerRowID);
        });
        } }
    ]
} );

  $("#example").on('click','tr',function(){
   removerRowID=oTable.row(this).index();
   });
 } );

但是：当我点击删除按钮后弹出一个JQuery Confirmation Dialog框时（这样我可以在确认后删除记录）它无效。因为在对话框中没有出现。以下是我从JQuery UI库添加的文件列表。如果有人知道如何解决它，请发表评论。

  <link rel="stylesheet" href="jquery/jquery-ui.css">
 <link rel="stylesheet" href="css/datatable/demo_page.css">
 <link rel="stylesheet" href="css/datatable/demo_table_jui.css">
 <script src="jquery/external/jquery/jquery.js"></script>
 <script src="jquery/jquery-ui.js"></script>

 $( "#dialog-confirm" ).dialog( "open");

数据表编辑器提交类型“选择”+操作以编辑和删除按钮问题

1 个答案: