2014-10-28 118 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