数据表编辑器归档类型“选择"+ 用于编辑和删除按钮问题的操作 [英] datatables Editor filed type 'select'+ action for Edit and remove buttons issues

问题描述

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

Hi I have a web application built using java+struts2+hibernate. I am using dataTable Editor in displaying the contents of one of the backend table. I am new to DataTables and I am finding it difficult to do couple of things.

1) New/Edit 窗口中出现的下拉菜单将包含一个下拉菜单，该下拉菜单的选项来自数据库.我不确定如何返回包含列表的 JSON 对象并对其进行迭代以填充上述窗口中的下拉框??

1) the dropdown that appears in New/Edit window will contain a dropdown and the options of the dropdown comes from the DB. I am not sure how to return a JSON object which contains the list and iterate it to populate the dropdown box in the mentioned window??

2) 点击DataTable的remove按钮后如何获取选中行的隐藏列值?

2) How to fetch the hidden column value of the selected row after clicking on the remove button of the 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>

单击删除按钮时，我能够从表中获取第 4 列值(即金额).但我无法获得第 5 列值，即隐藏的收入 ID(主键)值(bVisible:false).现在如何获得隐藏的列值?这可以解决我的问题.

I am able to get the 4th column value( which is amount) from the table when clicked on the remove button. But I am unable to get the 5th column value which is incomeID(primary key) value which is hidden(bVisible:false). now How to get that hidden column value? This can solve my issue.

更新:

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

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

this is giving me an object type. I am not sure how to get the text from object or convert that object to normal text?

推荐答案

这是我的一个问题的解决方案(本文的第 2 期).

Here is the solution for one of my issues( issue 2 of this post).

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

capturing the selected row index using the event and storing index in variable as clicking of remove button happens after we select a row. now calling a function for the remove button and using $.getJSON('URL',parameters,function) I am doing the delete operation and it's working perfectly fine.

更新代码:

<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 确认对话框 单击删除按钮后的框(以便我可以在确认后删除记录)它不起作用.因为在对话框中没有出现.这是我从 JQuery UI 库添加的文件列表.如果有人知道如何解决它，请发表评论.

But: When I am trying pop-up a JQuery Confirmation Dialog box after I click on remove button( so that I can delete the record upon confirmation) it is not working. As In the Dialog box is not getting appeared. Here are the list of files that I have added from JQuery UI library. Please comment if any one know how to fix it.

  <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");

这篇关于数据表编辑器归档类型“选择"+ 用于编辑和删除按钮问题的操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！