剑道网格与X可编辑?

时间:2014-10-28 08:58:59

标签: css kendo-ui kendo-grid x-editable

我正在尝试使用x-editable插件

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>

使用Kendo网格模板,我遇到问题,点击编辑行时,表格会发生什么奇怪的事情? 整个桌子左转,这里是工作小提琴的例子我有什么问题?

http://jsfiddle.net/LozkL2cx/

小提琴x-editable甚至没有发射我不知道为什么?

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();

1 个答案:

答案 0 :(得分:0)

单元格向左移动,因为x-editable在关闭</td>

后注入一个Div

我已经用这种方式解决了,也许有更好的方法

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

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

working sample