3

Datatablesを使用してデータテーブルを取得しました。以下に示すように、テーブルを作成して入力しました。次に、ユーザーが年を選択できるように、コンボボックスを実装する必要があります（2010、2011、2012があると仮定します）。次に、ユーザーがテーブルに配置されている[表示]または[変更]リンクをクリックすると、選択した年がパラメーターとして別のページに渡されます。

では、どうすれば年の列をコンボボックスに変えることができますか？

        rulesTableGlobal = $('#rulesTable').dataTable( {
            //"bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                 { "sTitle": "Id", "sWidth" : "20px" },
                 { "sTitle": "Property ID" , "sWidth"  : "20px"},
                 { "sTitle": "Adress" , "sWidth"  : "130px"},
                 { "sTitle": "Suburb" , "sWidth"  : "50px"},
                 { "sTitle": "Bond", "sWidth"  : "25px" },
                 { "sTitle": "Year", "sWidth"  : "25px" , "aType": "dom-select"},
                 { "sTitle": "View or Modify" , "sWidth"  : "50px"}]

        });

    function addPropertyToTable( lt_id, lt_uid, address, suburb_name, min_guests, max_guests,
                                 bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate){

        var _lt_id = "\'" + lt_id + "\'";
        var viewLink    = '<A href="#" onclick="forwardDetails('+_lt_id+');">View and Modify</A>';          
        var year= "";

        $('#rulesTable').dataTable().fnAddData( [
                                 lt_id, lt_uid, address, suburb_name, bondFee,cleaningFee,bookingServiceFee,  weekly_rate,nightly_rate, min_guests, max_guests, year, viewLink ] );


    }

        });

    }
4

3 に答える 3

3

これは、同じ問題を経験した皆さんのために私が使用した解決策です。コンボボックスを作成し、列12に追加します。よろしく..オズレム。

        function init(){

            //http://stackoverflow.com/questions/2759837/adding-dropdown-list-to-the-particular-column-using-jquery

            var ind = 0;
            var year    = 2010;
            //var options = getYears(year, 3);
            $.each($('#rulesTable td:nth-child(12)'), function () {

                //creates a combobox
                var select  = document.createElement('select');
                select.setAttribute('class','year');
                select.setAttribute('name',ind+''); 
                select.setAttribute('id','comboYear'+ind); 
                select.innerHTML = '<option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option>'; 

                /*for (var i= 0 ; i<options.length; i++){
                    var nextOption = options[i];                        
                    select.appendChild(nextOption);
                }*/
                $(this).append(select);
                $('#comboYear'+ind).change(function () {

                    var comboId = $(this).attr('id');
                    var comboIndex = $(this).attr('name');
                    var yearSelected = $('#'+comboId+' option:selected').text();
                    var propertyId = rulesTableGlobal.fnGetData()[comboIndex][0];
                    //alert(text);
                    upDateRow(propertyId, yearSelected, comboIndex );

                });

                year = year+1;
                ind++;                  

            });

        }
于 2010-12-29T03:52:40.473 に答える
1

次のように、HTMLでコンボボックスを定義します。

<select id="year">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
</select>

コンボボックスの実際に選択された値が必要なときはいつでも、

$("#year").val()

jQuery DOMルックアップを繰り返さないことをお勧めします。そのため、次のようにすることをお勧めします。

// Define this on document ready
var selectYear = $("#year");

// Use this syntax to get the current value
selectYear.val()

サンプルコードから、これをどこで使用するかはわかりませんが（おそらく、行の中var year = "";で、変更する場合はvar year = selectYear.val();）、これでうまくいくことを願っています。そうでない場合は、コメントで詳細をお気軽にお問い合わせください。

編集：要求に応じて、通常の表で選択した年を表示するサンプルを示します。

<table>
    <tr>
        <td>a cell</td>
        <td>
            <select id="year">
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
            </select>
        </td>
    </tr>
</table>
于 2010-12-23T05:45:24.487 に答える
0

fnRenderを使用する-

$('#example').dataTable( {
    aoColumns : [ {
        fnRender : function(oObj) {
            return '<select id="year">' + '<option value="2010">2010</option>' + '<option value="2011">2011</option>' + '<option value="2012">2012</option>' + '</select> ';
        }
    } ]
});
于 2011-12-07T06:46:42.630 に答える