数据表编辑器字段类型 'select'+ 编辑和删除按钮问题的操作

Question

您好，我有一个使用 java+struts2+hibernate 构建的 Web 应用程序。我正在使用数据表编辑器显示后端之一的内容 table。我是 DataTables 的新手，我发现很难做几件事。

1) New/Edit window 中出现的下拉菜单将包含一个下拉菜单，下拉菜单的选项来自数据库。我不确定如何 return 包含列表的 JSON 对象并迭代它以填充提到的 window 中的下拉框??

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

下面是我的代码：

 <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>

JQuery:

  <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>

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

更新：

 var myTable=$("#example").DataTable();
 var col=myTable.row().cell(5).data();
alert(col);

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

Answer 1

这是我的一个问题的解决方案（post 的第 2 期）。

使用事件捕获 selected 行索引并将索引存储在变量中，因为在我们 select 一行之后单击删除按钮。现在调用删除按钮的函数并使用 $.getJSON('URL',parameters,function) 我正在执行删除操作并且它工作得很好。

更新代码：

<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();
   });
 } );

但是： 当我尝试 pop-up 点击删除按钮后出现 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");

数据表编辑器字段类型 'select'+ 编辑和删除按钮问题的操作

datatables Editor filed type 'select'+ action for Edit and remove buttons issues

struts2

jquery-datatables-editor