Изменить размер столбца таблицы с фиксированным заголовком в jquery - PullRequest
Новая
       1

Изменить размер столбца таблицы с фиксированным заголовком в jquery

4 голосов
/ 30 марта 2012

У меня есть таблица с горизонтальной и вертикальной прокруткой, где фиксированный заголовок.Поскольку я использую фиксированный заголовок, клон создается для заголовка, поэтому изменение размера не работает с ним.Мне нужно изменить размер столбцов таблицы также.Пожалуйста, помогите мне ...

Вот код: http://jsfiddle.net/manishan/Hx7ak/

Ответы [ 6 ]

5 голосов
/ 27 ноября 2012

Я не видел, чтобы кто-нибудь упоминал плагин DataTables.net, так как у него есть некоторые дополнения, которые подходят для этих случаев.Он полностью настраиваемый и расширяемый.

По какой-то причине мой jsfiddle показывал мне ошибки, которые я не смог отладить, но при попытке здесь с xammp он работал отлично и отображал нумерацию страниц, сортировку столбцов и примеры фиксированных заголовков.Как вы можете видеть, код инициализации довольно короткий, но вы можете загрузить de codebase для изображений.Я в основном взял предоставленные вами элементы кода и организовал его для применения плагина DataTables.net jQuery.

HTML 

                <!DOCTYPE html> 
                                <html lang="en">
                                <head>
                                    <meta charset="utf-8">
                                    <title>
                                TEST DataTables.net plugin - Fixed Header example
                                </title>
                                <script src='jquery182.js' ></script>
                                <script src='jquery.dataTables.js' ></script>
                                <script src='FixedHeader.js' ></script>
                                <link rel='stylesheet' href='demo_table.css'/>
                                <link rel='stylesheet' href='demo_page.css'/>
                                </head>
                                <body>
                                <div id="demo">
                                <table cellpadding="0" cellspacing="0" border="0" class="display data_Table" >
                                    <thead>
                                        <tr>

                                     <th style='width:47px; height:29px' >
                                 <input  name="chkSelectAll" type="checkbox" value="" id="chkSelectAll"/></th>
                                            <th style='width:159px;font-weight:bold'>Computer <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:105px;font-weight:bold'>Group <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:97px;font-weight:bold'>Policy <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:105px;font-weight:bold'>Domain <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:126px;font-weight:bold'>Address<span class="actdiv">&nbsp;</span></th>
                                            <th style='width:127px;font-weight:bold'>Type <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:109px;font-weight:bold'>Status <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:181px;font-weight:bold'>Test Status  <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:165px;font-weight:bold'>Version <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:131px;font-weight:bold'>Date <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:160px;font-weight:bold'>Last Date <span class="actdiv">&nbsp;</span></th>
                                            <th style='width:173px;font-weight:bold'>Count </th>

                                        </tr>
                                    </thead>


                                    <tbody>

  <tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr><tr style="padding-left:10px">
                                            <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
                                            <td class="name">DEVBUILD1</td>
                                            <td class="groupId">test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                            <td>test</td>
                                          </tr> </tbody>
                                </table>
                                </div>

    <script>
                                jQuery(document).ready(function($){
                                    var oTable = $('.data_Table').dataTable( {
                                        // "sDom": 'RC<"clear">lfrtip'
                                    //options: we are using
                                            "sDom": 'Rlfrtip',
                                            "sScrollY": "200px",
                                            "bPaginate": true         //Disable pagination false


                                    } );
                                });
                                </script>
                                </body>
                </html>

ВКЛЮЧАЙТЕ JS & CSS из JSFIDDLE LINK

Если вы возьмете исходный код в разделе HTML для этого jsfiddle и загрузите зависимости из этой ссылки jsfiddle (файлы javascript и css и поместите этот html в один и тот же каталог), он должен быстро начать работус ним.

Хотя, в зависимости от того, какие варианты вы можете рассмотреть, вы решите использовать этот плагин jQuery, имейте в виду, что он имеет очень активное сообщество и поддержку, и на форумах разработчики должныБудьте мастерами со спецификой.

Для дополнительной проверки DataTables.net пример раздела.

Интересные ссылки, которые могут помочь вам в зависимости от того, как вы хотели бы представить свои данные с помощью этого плагина:

FixedHeader

ColReorder

Колвис (кажется интересным)

FixedColumns

Как вы можете видеть на http://www.datatables.net/examples/ список примеров довольно длинный,но надеюсь это поможет!

DataTables implementation 1 DataTables implementation 2

Ожидаемые результаты с этим плагином jQuery

4 голосов
/ 24 ноября 2012

** Полезные плагины jQuery для работы с табличным или табличным контентом ** ( включает столбцы большого размера и фиксированный заголовок )

28 октября 2015: Отредактированная одна ссылка недоступна для дальнейшего использования.

2 голосов
/ 21 ноября 2012

Редактировать: Для изменяемых размеров столбцов и фиксированного заголовка попробуйте этот плагин http://www.tablefixedheader.com/fullpagedemo/, который позволяет изменять размер заголовка вместе со столбцами.

Я недавно написалплагин для таблиц с фиксированными заголовками.Что в основном предназначено для решения проблемы с прокручиваемой таблицей, в которой заголовок и столбцы не отображаются во время прокрутки.

Проверьте демонстрационную страницу плагина @Git: http://meetselva.github.com/fixed-table-rows-cols/

Иполная демонстрационная страница вашего HTML: http://jsfiddle.net/ryB2n/4/embedded/result/

DEMO: http://jsfiddle.net/ryB2n/4/

Также этот плагин поддерживает фиксированные столбцы, которые можно настроить с помощью опции fixedCols.Обратите внимание, что это просто необязательная конфигурация, поэтому без этой опции будет отображаться таблица с фиксированным заголовком.

Примечание: Я все еще работаю над этим плагином для обработки исключений и других функций, поэтому, пожалуйста, используйте его с осторожностью.

0 голосов
/ 12 февраля 2014

Просто используйте ниже строку кода, которая будет работать. 

$(window).on('resize', function () { $('.fixedHeader').remove(); new $.fn.dataTable.FixedHeader(table); });
0 голосов
/ 29 декабря 2012

@ Luv / Не уверен, что я полностью понял вашу ссылку на excel.exe против изменения размера с помощью сценария перетаскивания мышью, описанного в вашем вопросе, но я постараюсь ответить тем, с чем мне удалось поработать до сих пор в отношении в DataTables плюс некоторые чтения и соображения при просмотре их веб-сайта (http://www.datatables.net)

Есть очень крутой плагин (я не пробовал сам), который позволяет вам делать CRUD (цикл программирования Create-Read-Update-Delete .. В случае, если вы работаете с каким-то локальным хранилищем или базой данных подход для хранения данных ваших приложений) Кроме того, я не могу точно догадаться, к какой функциональности вы, наконец, стремитесь, вот несколько соображений, которые следует рассмотреть:

Платный плагин для таблиц данных (плагин редактора)

http://editor.datatables.net/release/DataTables/extras/Editor/examples/events_keySubmit.html

Стоит около 15 долларов США за лицензию, если я не ошибаюсь, но поставляется со встроенным набором готовых для CRUD приложений API, что кажется действительно классным ... Я думаю, что он использует своего рода модальное окно открытия facebox на вызванные события. Стоит попробовать!

Если вы хотите редактировать DataTables, я думаю, что для этого есть плагин

http://datatables.net/release-datatables/examples/api/editable.html

(dataTables, созданные Allan Jardine, по-видимому, очень поддерживаются его сообществом, и я хотел бы предложить, чтобы, если вы планируете разрабатывать с ним, вы должны стать постоянным участником на их форумах или задавать вопросы Аллану так, как если бы требуемый функционал, который вы ищете, был разработан для этой текущей стабильной версии его интересной работы).

С другой стороны, если вам нужно отредактировать ширину столбцов как метод изменяемого размера пользовательского интерфейса jQuery, я считаю, что вам нужно перехватить перерисовку функции и написать собственное расширение, например, в этом примере:

http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Кроме того, вам может быть интересно посмотреть: (http://jqueryui.com/resizable/), чтобы узнать больше о том, как можно создать прототип для обработки столбцов в fnReDraw (что очень полезно для перехвата событий, когда мы используем параметры сортировки или фильтрации из DaTatables) с программированием некоторых связанных событий.

Я не пробовал это, но это могло бы работать в крайнем случае ... Удачного кодирования;)

0 голосов
/ 28 ноября 2012

Возможно, вы захотите взглянуть на этот сайт: http://bz.var.ru/comp/web/resizable.html Там есть скрипт с изменяемым размером столбцов, который вы можете извлечь и внедрить в свой код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...