2014-10-28 80 views
0

我试图用x-编辑插件剑道与X可编辑网格?

http://vitalets.github.io/x-editable/

HTML

<div class="col-md-6"> 

     <table id="rowSelection"> 
       <thead> 
        <tr> 
         <th data-field="make">Car Make</th> 
         <th data-field="model">Car Model</th> 
         <th data-field="year">Year</th> 
         <th data-field="category">Category</th> 
         <th data-field="airconditioner">Air Conditioner</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Volvo</td> 
         <td>S60</td> 
         <td>2010</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Audi</td> 
         <td>A4</td> 
         <td>2002</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>BMW</td> 
         <td>535d</td> 
         <td>2006</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>BMW</td> 
         <td>320d</td> 
         <td>2006</td> 
         <td>Saloon</td> 
         <td>No</td> 
        </tr> 
        <tr> 
         <td>VW</td> 
         <td>Passat</td> 
         <td>2007</td> 
         <td>Saloon</td> 
         <td>No</td> 
        </tr> 
        <tr> 
         <td>VW</td> 
         <td>Passat</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Peugeot</td> 
         <td>407</td> 
         <td>2006</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Honda</td> 
         <td>Accord</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>No</td> 
        </tr> 
        <tr> 
         <td>Alfa Romeo</td> 
         <td>159</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>No</td> 
        </tr> 
        <tr> 
         <td>Nissan</td> 
         <td>Almera</td> 
         <td>2001</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Mitsubishi</td> 
         <td>Lancer</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Opel</td> 
         <td>Vectra</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Toyota</td> 
         <td>Avensis</td> 
         <td>2006</td> 
         <td>Saloon</td> 
         <td>No</td> 
        </tr> 
        <tr> 
         <td>Toyota</td> 
         <td>Avensis</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Toyota</td> 
         <td>Avensis</td> 
         <td>2008</td> 
         <td>Saloon</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Audi</td> 
         <td>Q7</td> 
         <td>2007</td> 
         <td>SUV</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Hyundai</td> 
         <td>Santa Fe</td> 
         <td>2012</td> 
         <td>SUV</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Hyundai</td> 
         <td>Santa Fe</td> 
         <td>2013</td> 
         <td>SUV</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Nissan</td> 
         <td>Qashqai</td> 
         <td>2007</td> 
         <td>SUV</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Mercedez</td> 
         <td>B Class</td> 
         <td>2007</td> 
         <td>Hatchback</td> 
         <td>Yes</td> 
        </tr> 
        <tr> 
         <td>Lancia</td> 
         <td>Ypsilon</td> 
         <td>2006</td> 
         <td>Hatchback</td> 
         <td>Yes</td> 
        </tr> 
       </tbody> 
      </table> 

     </div> 

随着剑道网格模板和我的问题,奇怪的事情发生在表时,点击编辑行? 整个表格左移,这里是工作小提琴的例子我有什么问题?

http://jsfiddle.net/LozkL2cx/

在拨弄X编辑甚至不火了我不知道为什么?

JS

$("#rowSelection").kendoGrid({ 
       dataSource: { 
        pageSize: 6 
       }, 
       sortable: { 
        mode: "single", 
        allowUnsort: false 
       }, 
       pageable: { 
        buttonCount: 5 
       }, 
       scrollable: false, 
       navigatable: true, 
      }); 





    //toggle `popup`/`inline` mode 
    $.fn.editable.defaults.mode = 'popup';  

    //make username editable 
    $('td').editable(); 
+0

我是c urious。当Kendo UI Grid本身支持内联,弹出和批量编辑时,为什么还要使用另一个第三方插件? – Brett 2014-10-28 20:06:11

+0

是的,但它没有像这样的样式,它具有内联,并弹出模式:( – 2014-10-29 12:23:47

回答

0

细胞左移,因为X-编辑关闭</td>

我已经解决了这种方式后注入股利,也许有一个更好的

<td><div class="edit">1</div></td> 

$('.edit').editable(); 

working sample