Флажки UniformJS не работают в Handsontable?

Question

Флажки UniformJS не работают в Handsontable?

0

По сути, мне здесь нужны две вещи.

Одно: стилизованные флажки uniformJS не работают в Handsontables. Два: мне нужно установить флажок в заголовке Handsontable, чтобы "проверить все" флажки в соответствующем столбце.

Я считаю, что я могу добавить флажок в таблицу через jQuery.append(), но есть ли более правильный способ сделать это для работы с Handsontables? Заранее спасибо.

http://jsfiddle.net/JNCFP/94/

JQuery

$('input').uniform();   


$(document).ready(function () {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
  }

  $("#example1").handsontable({
    data: getCarData(),
    startRows: 7,
    startCols: 4,
    colHeaders: ["Car", "Year", ""],
    colWidths: [120, 50, 60],
    columnSorting: true,
    columns: [
      {
        data: "car"
        //1nd column is simple text, no special options here
      },
      {
        data: "year",
        type: 'numeric'
      },
      {
        data: "available",
        type: "checkbox"
      }
    ]
  });

});

HTML

<input type="checkbox" checked /> Checkbox

<div id="example1" class="handsontable"></div>

triplethreat77 21 окт. 2013, в 17:13

Источник

Теги:

javascript

jquery

checkbox

append

handsontable

1 ответ

Ещё вопросы

Abraham Uribe · Accepted Answer · 2013-10-21T13-05-00.000Z

вы можете добавить "проверить все" в заголовке непосредственно в handsontable colHeaders и применить UniformJS, вам нужно использовать обратный вызов afterRender, как это

$("#example1").handsontable({
data: getCarData(),
startRows: 7,
startCols: 4,
colHeaders: ["Car", "Year", "<input type='checkbox' class='checkall' />"],//checkall inside colHeaders
colWidths: [120, 50, 60],
columnSorting: true,
columns: [
  {
    data: "car"
  },
  {
    data: "year",
    type: 'numeric'
  },
  {
    data: "available",
    type: "checkbox"
  }
],
//afterRender so all the "available" checkbox use UniformJS 
  afterRender:function(){
      $('input').uniform(); 
      //click handler for .checkall
      $('.checkall').on('click', function () {
      //get all .htCheckboxRendererInput and change the property checked
          $(this).closest('table').find('input.htCheckboxRendererInput').prop("checked",this.checked);
          $.uniform.update();//update UniformJS
      });
  }
});

http://jsfiddle.net/JNCFP/95/