2013-01-02 15 views
13

Datatables kullanıyorum ve tabloyu oluşturmak için aşağıdaki koda sahibim. Okuma, yazma, yürütme ve yönetici değerleri için onay kutularını görüntülemek istiyorum. Değer 1'e eşitse, onay kutusunun işaretli olmasını istiyorum. ve 0 onay kutusu işaretli değilse.jquery.datatables içindeki onay kutularını nasıl gösteririz?

JavaScript

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       var oTable = $('#example').dataTable({ 
        "sScrollY": "500px",         
        "bPaginate": false, 
        "bProcessing": true, 
        "sAjaxSource": "sources/sample.json" 
       }); 


      }); 
     </script> 

HTML

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
        <thead> 
         <tr> 
          <th width="20%">Browser</th> 
          <th width="25%">Read</th> 
          <th width="25%">Write</th> 
          <th width="15%">Execute</th> 
          <th width="15%">Admin</th> 
         </tr> 
        </thead> 
        <tbody> 

        </tbody> 
        </table> 

JSON

{ "aaData": [ 
    ["Trident","0","0","0","1"], 
    ["Trident","0","1","0","0"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","0","0"], 
    ["Gecko","1","1","1","1"], 
    ["Gecko","0","0","0","1"], 
    ["Other browsers","1","0","0","U"] 
] } 
+0

Veritabanına satır içi kontroller eklemek istediğinizi düşünürsünüz: [datatable inline controls] (http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html) .also [related ] (http://stackoverflow.com/questions/3444339/jquery-datatables-plugin-adding-a-checkbox-dynamically) – zer0bit

cevap

22

Ben

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     "aoColumnDefs": [{ 
      "aTargets": [0], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "Gecko") { 
        return '<a href="' + data + '">' + data + ' Download Gecko</a>'; 
       } else { 
        return '<a href="' + data + '">' + data + ' Download</a>'; 
       } 
      } 
     }, { 
      "aTargets": [1], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [2], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [3], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [4], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }], 
     "bFilter": false, 
     "sScrollY": "500px", 
     "bPaginate": false, 
     "bProcessing": true, 
     "sAjaxSource": "sources/sample.json" 
    }); 
}); 
mrenderer datables kullanarak işe başardı
+2

Bir jsondan onay kutularının nasıl görüntüleneceğine bir örnek arıyordum, bu çözüm için teşekkürler, ben onay kutularını güncelledikten sonra verileri sunucuya geri kaydetmek için bir kaydetme düğmesinin nasıl oluşturulacağını bilmek ister. Teşekkürler. –

İlgili konular